Toggle navigation
TUTORIAL HOME
W3.CSS Case Study
❮ Previous Next ❯
Building a Responsive Web Site From Scratch
In this chapter we will build a W3.CSS responsive website from scratch.
First, start with a simple HTML page, with an initial viewport and a link to W3.CSS.
Example
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.Omegas.com/
<body>
<h1>My first W3.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>
»
Put Elements in Containers
To add common margins and padding, put the HTML elements inside containers (<div class="w3-container">)
Separate the header from the rest of the content, using two separate <div> elements:
Example
<div class="w3-container">
<h1>My First W3.CSS Website!</h1>
<p>This site will grow as we add more ...</p>
</div>
<div class="w3-container">
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
»
Color Classes
Color classes defines the color of elements.
This example adds a color to the first <div> element:
Example
<div class="w3-container w3-light-grey">
<h1>My First W3.CSS Website!</h1>
<p>This site will grow as we add more ...</p>
</div>
<div class="w3-container">
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
»
Size Classes
Size classes defines the text size for elements.
This example adds a size to both header elements:
Example
<div class="w3-container w3-light-grey">
<h1 class="w3-jumbo">My First W3.CSS Website!</h1>
<p class="w3-xxlarge">This sage will grow as we add more ...</p>
</div>
<div class="w3-container">
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
»
Use Semantic Elements
If you like to follow the HTML5 semantic recommendations. please do!
It does not matter for W3.CSS if you use <div> or <header>.
Example
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.Omegas.com/
<body>
<header class="w3-container w3-light-grey">
<h1 class="w3-jumbo">My first W3.CSS website!</h1>
<p class="w3-xxlarge">This site will grow as we add more ...</p>
</header>
<div class="w3-container">
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<footer class="w3-container">
<p>This is my footer</p>
</footer>
</body>
</html>
»
Multicolumn Responsive Layout
With W3.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="w3-row-padding">
Use predefined classes like "w3-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="w3-row-padding">
<div class="w3-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="w3-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="w3-third">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
»
This example shows how to create four columns of equal width:
Example
<div class="w3-row-padding">
<div class="w3-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="w3-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="w3-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="w3-quarter">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
»
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="w3-row-padding">
<div class="w3-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="w3-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="w3-quarter">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
»
Navigation Bars
A navigation bar is a navigation header that is placed at the top of the page.
Example
<nav class="w3-bar w3-black w3-large">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</nav>
»
Side Navigation
With side navigation, you have several options:
Always display the navigation pane to the left of the page content.
Use a collapsible, "fully automatic" responsive side navigation.
Open navigation pane over the left part of the page content.
Open navigation pane over all of the page content.
Slide the page content to the right when opening the navigation pane.
Display the navigation pane on the right side instead of the left side
This example opens the navigation pane over the left part of the page content:
<nav class="w3-sidebar w3-bar-block w3-black w3-card-2" style="display:none" id="mySidebar">
<a class="w3-bar-item w3-button" href="#">Link 1</a>
<a class="w3-bar-item w3-button" href="#">Link 2</a>
<a class="w3-bar-item w3-button" href="#">Link 3</a>
</nav>
JavaScript used to open and hide the menu:
function w3_open() {
document.getElementById("
}
function w3_close() {
document.getElementById("
}
»
❮ Previous Next ❯
TUTORIAL HOME
W3.CSS Case Study
❮ Previous Next ❯
Building a Responsive Web Site From Scratch
In this chapter we will build a W3.CSS responsive website from scratch.
First, start with a simple HTML page, with an initial viewport and a link to W3.CSS.
Example
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.Omegas.com/
<body>
<h1>My first W3.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>
»
Put Elements in Containers
To add common margins and padding, put the HTML elements inside containers (<div class="w3-container">)
Separate the header from the rest of the content, using two separate <div> elements:
Example
<div class="w3-container">
<h1>My First W3.CSS Website!</h1>
<p>This site will grow as we add more ...</p>
</div>
<div class="w3-container">
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
»
Color Classes
Color classes defines the color of elements.
This example adds a color to the first <div> element:
Example
<div class="w3-container w3-light-grey">
<h1>My First W3.CSS Website!</h1>
<p>This site will grow as we add more ...</p>
</div>
<div class="w3-container">
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
»
Size Classes
Size classes defines the text size for elements.
This example adds a size to both header elements:
Example
<div class="w3-container w3-light-grey">
<h1 class="w3-jumbo">My First W3.CSS Website!</h1>
<p class="w3-xxlarge">This sage will grow as we add more ...</p>
</div>
<div class="w3-container">
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
»
Use Semantic Elements
If you like to follow the HTML5 semantic recommendations. please do!
It does not matter for W3.CSS if you use <div> or <header>.
Example
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.Omegas.com/
<body>
<header class="w3-container w3-light-grey">
<h1 class="w3-jumbo">My first W3.CSS website!</h1>
<p class="w3-xxlarge">This site will grow as we add more ...</p>
</header>
<div class="w3-container">
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<footer class="w3-container">
<p>This is my footer</p>
</footer>
</body>
</html>
»
Multicolumn Responsive Layout
With W3.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="w3-row-padding">
Use predefined classes like "w3-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="w3-row-padding">
<div class="w3-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="w3-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="w3-third">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
»
This example shows how to create four columns of equal width:
Example
<div class="w3-row-padding">
<div class="w3-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="w3-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="w3-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="w3-quarter">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
»
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="w3-row-padding">
<div class="w3-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="w3-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="w3-quarter">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
»
Navigation Bars
A navigation bar is a navigation header that is placed at the top of the page.
Example
<nav class="w3-bar w3-black w3-large">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</nav>
»
Side Navigation
With side navigation, you have several options:
Always display the navigation pane to the left of the page content.
Use a collapsible, "fully automatic" responsive side navigation.
Open navigation pane over the left part of the page content.
Open navigation pane over all of the page content.
Slide the page content to the right when opening the navigation pane.
Display the navigation pane on the right side instead of the left side
This example opens the navigation pane over the left part of the page content:
<nav class="w3-sidebar w3-bar-block w3-black w3-card-2" style="display:none" id="mySidebar">
<a class="w3-bar-item w3-button" href="#">Link 1</a>
<a class="w3-bar-item w3-button" href="#">Link 2</a>
<a class="w3-bar-item w3-button" href="#">Link 3</a>
</nav>
JavaScript used to open and hide the menu:
function w3_open() {
document.getElementById("
}
function w3_close() {
document.getElementById("
}
»
❮ Previous Next ❯
No comments:
Post a Comment