TheBestTutorials.css Case: Responsive Site

Building a Responsive Web Site From Scratch

In this chapter we will build a TheBestTutorials.css responsive website from scratch.

First, start with a simple HTML page, with an initial viewport and a link to TheBestTutorials.css.

Example

<!DOCTYPE html>
<html lang="en">
<title>subhodaya.css Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://tutorials/lib/subhodaya.css">

<body>
<h1>My first subhodaya.css website!</h1>
<p>This site will grow as we add more ...</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>

</html>

Try it Yourself »

Put Elements in Containers

Now we need to add a common margin and padding to all elements.

To achieve this, put your HTML elements inside containers (<div class="subhodaya-container">)

To make it possible define separate classes for headers. Separate the header from the rest of the content, using a separate <div> element:

Example

<div class="subhodaya-container">
<h1>My First subhodaya.css Website!</h1>
<p>This site will grow as we add more ...</p>
</div>

<div class="subhodaya-container">
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>

Try it Yourself »

Color Classes

Color classes defines the color of elements.

This example adds a color to the first <div> element:

Example

<div class="subhodaya-container subhodaya-light-grey">
<h1>My First subhodaya.css Website!</h1>
<p>This site will grow as we add more ...</p>
</div>

<div class="subhodaya-container">
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>

Try it Yourself »

Size Classes

Size classes defines the text size for elements.

This example adds a size to both header elements:

Example

<div class="subhodaya-container subhodaya-light-grey">
<h1 class="subhodaya-jumbo">My First subhodaya.css Website!</h1>
<p class="subhodaya-xxlarge">This sage will grow as we add more ...</p>
</div>

<div class="subhodaya-container">
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>

Try it Yourself »

Use Semantic Elements

If you like to follow the HTML5 semantic recommendations. please do!

It does not matter for TheBestTutorials.css if you use <div> or <header>.

Example

<!DOCTYPE html>
<html lang="en">
<title>subhodaya.css Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://tutorials/lib/subhodaya.css">
<body>

<header class="subhodaya-container subhodaya-light-grey">
<h1 class="subhodaya-jumbo">My first subhodaya.css website!</h1>
<p class="subhodaya-xxlarge">This site will grow as we add more ...</p>
</header>

<div class="subhodaya-container">
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>

<footer class="subhodaya-container">
<p>This is my footer</p>
</footer>

</body>
</html>

Try it Yourself »

Multicolumn Responsive Layout

With TheBestTutorials.css it is easy to create a multicolumn responsive layout.

The columns will rearrange themselves automatically when viewed on different screen sizes.

Some grid rules:

Start with a row class <div class="subhodaya-row-padding">
Use predefined classes like "subhodaya-third" to quickly make grid columns
Place your text content inside the grid columns

This example shows how to create three columns of equal width:

Example

<div class="subhodaya-row-padding">
<div class="subhodaya-third">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="subhodaya-third">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="subhodaya-third">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>

Try it Yourself »

This example shows how to create four columns of equal width:

Example

<div class="subhodaya-row-padding">
<div class="subhodaya-quarter">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="subhodaya-quarter">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="subhodaya-quarter">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="subhodaya-quarter">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>

Try it Yourself »

Columns With Different Widths

This example creates a three-column layout where the column in the middle is wider than the first and last column:

Example

<div class="subhodaya-row-padding">
<div class="subhodaya-quarter">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="subhodaya-half">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="subhodaya-quarter">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>

Try it Yourself »

Navigation Bars

A navigation bar is a navigation header that is placed at the top of the page.

Example

Try It Yourself »

Side Navigation

With side navigation, you have several options:

Always display the navigation pane to the left of the page content.
Open the navigation pane, hiding the left part of the page content.
Open the navigation pane, hiding all of the page content.
Shift the page content to the right, when opening the navigation pane.

This example opens the navigation pane, hiding a part of the page content:

JavaScript used to open and hide the menu:

function subhodaya_open() {
document.getElementById("mySidenav").style.display = "block";
}
function subhodaya_close() {
document.getElementById("mySidenav").style.display = "none";
}

Try It Yourself »

« Previous

Next Chapter »