W3.CSS
Faster and Better
Responsive Web Sites
What is W3.CSS?
W3.CSS is a small, fast, and modern CSS framework with built-in
responsiveness.
- Designed to be smaller and faster than other CSS frameworks.
- Designed to be easier to learn, and easier to use than other CSS
frameworks.
- Designed to provide CSS equality for all devices: PC, laptop, tablet, and
mobile.
- Designed to use standard CSS only (No need for jQuery or JavaScript).
- Designed to speed up mobile HTML apps.
W3.CSS is Free
W3.CSS is free to use. No license is necessary.
You can download w3.css from w3css_downloads
Easy to Use
Make it as simple as possible,
but not simpler.
Albert Einstein
Built-In Responsiveness
Resize the page to see the effect!
w3-half
The w3-half class uses half (50%) of the screen window.
On small screens (max 600 pixels) it automatically resizes to full screen
width.
w3-half
w3-third
The w3-third class uses one third (33.33%) of the screen widow.
On small screens (max 600 pixels) it automatically resizes to full screen
width.
w3-third
w3-third
w3-quarter
The w3-quarter class uses one quarter (25%) of the screen window.
On small screens (max 600 pixels) it automatically resizes to full screen
width.
w3-quarter
w3-quarter
w3-quarter
In addition W3.CSS uses a 12 column mobile-first fluid grid with responsive
classes for small, large, and medium screen sizes.
Card Classes
The W3.CSS card classes are inspired by the design used on paper cards:
London
London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.
London
London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.
London
London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.
Nice Car
A car is a wheeled, self-powered motor vehicle used for transportation. Most
definitions of the term specify that cars are designed to run primarily on
roads, to have seating for one to eight people, to typically have four wheels.
(Wikipedia)
Shadows
W3.CSS card classes can define shadows:
w3-card-4
(shadow w/4px offset)
w3-card-8
(shadow w/8px offset)
w3-card-16
(shadow w/16px offset)
Color Classes
W3.CSS uses color classes.
The color classes are inspired by colors used in marketing, road signs, and
sticky notes.
Color Themes
The color themes are designed to work in harmony with each other.
Theme Indigo
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge sucess for Marvel and Disney
«»
Theme Teal
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge sucess for Marvel and Disney
«»
How To
To use W3.CSS in your web site, just add a link to "w3.css" from your web
pages:
Example
<!DOCTYPE html>
<html>
<title>Material Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> (online link)
<link rel="stylesheet" type="text/css" href="images/w3.css"
title="style.css"> (local link)
Now, try it by using the Responsive Design View option in the
Firefox browser to view the effects of a resized page (top right of the browser
toolbar, click the icon that looks like 3 horizontal hashmarks; developer;
responsive design view).