w3css responsive framework

w3.css responsive framework

What is w3css

w3css is relatively new CSS library developed by w3schools. It is small in size with built-in responsiveness. It is great alternative of bootstrap and other similar responsive CSS framework. It only depends on standard CSS and there is no need of Javascript or jQuery. That makes it stand out from the rest. Moreover it is much easier to learn and use than other responsive frameworks. You may download the latest version from here. This tutorial is easy to follow, if you are familiar with any of responsive framework. Bookmark this page as it serves as ready quick reference to important classes of w3css framework.

How to use

In order to get started with w3css, all you need is to add link of w3css file in head of html document, you may also download it and use it locally.

<!DOCTYPE html>

<html>

<head>

<link rel=”stylesheet” href=”http://www.w3schools.com/lib/w3.css”>

</head>

<body>

</body>

</html>

Features at glance

 

W3CSS Typography : Pages created using w3css are highly readable and even suitable for people with slight reading disability. Font size, letter spacing and line spacing are very good. There are font size classes which you may use.

w3-tiny
w3-small
w3-medium (Default)
w3-large
w3-xlarge
w3-xxlarge
w3-xxxlarge
w3-jumbo
Blockquotes can be used in different size and colors. You may use “w3-blockquote” class and font size class together to display blockquote bigger or smaller. You may also use color class for example “w3-red” to display it in different colors.
w3css responsive css framework
W3CSS Color Classes: w3css has some good colors stored in it classes, you can use those classes in any HTML element like containers, tables, buttons, cards, blockquote etc. It makes it easy for you to choose right color scheme for your website. Here are the list of color classes that you may use.
w3-red
w3-pink
w3-purple
w3-deep-purple
w3-indigo
w3-blue
w3-light-blue
w3-cyan
w3-aqua
w3-teal
w3-green
w3-light-green
w3-lime
w3-sand
w3-khaki
w3-yellow
w3-amber
w3-orange
w3-deep-orange
w3-blue-grey
w3-brown
w3-light-grey
w3-grey
w3-dark-grey
w3-black
You may also use class for colored fonts. You just need to add “text” in between  w3-text-colorname. This makes it easy to remember and use.

w3-text-red

w3-text-pink

w3-text-purple

w3-text-deep-purple

w3-text-indigo

w3-text-blue

w3-text-light-blue

w3-text-cyan

w3-text-aqua

w3-text-teal

w3-text-green

w3-text-light-green

w3-text-lime

w3-text-sand

w3-text-khaki

w3-text-yellow

w3-text-amber

w3-text-orange

w3-text-deep-orange

w3-text-blue-grey

w3-text-brown

w3-text-light-grey

w3-text-grey

w3-text-dark-grey

w3-text-black

W3CSS Containers: w3css container class “w3-container” is essential for having same padding, margin, vertical and horizontal alignment throughout the web page. It is perfect for HTML5 elements like div, header, footer, article, section. If you want to add border to container element, you may use it with “w3-border” class.

<div class=“w3-container w3-border”>
<p>Your content goes here.</p>
</div>
In order to add extra padding to any container, you may use “w3-padding” class. For instance w3-padding-32
In order to add feature of closing any container element, you may use span class w3-closebtn and use onclick event this.parentElement.style.display=’none’. See the example below
<div class=“w3-container w3-red “>
<span class=“w3-closebtn” onclick=“this.parentElement.style.display=’none'”>X</span>
<p>Your content goes here</p>
</div>
This will result in a container, which has closing sign at the upper right corner. Check the result below.
w3.css responsive framework
W3CSS Cards: cards in w3css are nothing but a boxed container with shadow, which gives depth to the container and enhance the user’s experience. Class for cards are as follows.
w3-card
w3-card-2
w3-card-4
w3-card-8
w3-card-12
w3-card-16
w3-card-24
the number 2, 4, 8, 12, 16, 24 denotes pixels for bordered shadow.
Responsive: In order to make your webpage responsive and adapts to all screen size, you need to utilize class for responsiveness. Class you may use are.
w3-half
w3-third
w3-quarter
w3-col
Container with w3-half class occupies 50% of screen size on large or medium device, while w3-third and w3-quarter class occupies 1/3 and 1/4 respectively. w3-col is class for 12 column grid. In order to make your webpage fully responsive use w3-row as parent container, like shown in the example below.
<div class=“w3-row”>
<div class=“w3-container w3-half”>
<h2>w3-half</h2>
<p>This is a paragraph</p>
</div>
<div class=“w3-container w3-half”>
<h2>w3-half</h2>
<p>This is a paragraph</p>
</div>
</div>
3 Votes

saurabh

Saurabh chaudhary is expert in web design, he writes about web design inspiration, bringing all beautiful websites together in a showcase.

You may also like...

3 Responses

  1. Andy says:

    Thanks for submitting this.. very useful one..

  2. Romi says:

    I use it …and i think its better than Bootstrap, Foundation and other Frameworks… very easy, fast to develop and very simple to use it…and most important very small in size…and yet vey powefull … and also includes slideshow, Paralax , responsive menus, accordions and a whole lot more…plus very easy to learn ….thankx for sharing..!!

Leave a Reply

Your email address will not be published. Required fields are marked *