We Meet the third Saturday of each month at the Sydney Mechanics Institute 240 Pitt St Sydney from 2 pm

What we did

November 2016

W3.CSS

The World Wide Web Consortium through its education arm the W3 Schools has created a standard set of styles which its called W3.CSS.

It’s free. It’s free to use eg link too, free to download and free to vary.

The W3 school has extensive tutorials on the features of the style sheet and how to use it and we spent the day running though some of the main features.

I had found a set of lessons at Tutorialspoint with a quick guide and a pdf which we had a look at.

I had found a few video talks. This one which appears to have been taken from a lecture by Dileep Katiyar, while long, around. Unfortunaltly we didn’t have time to look at them

The W3.CSS is designed to be fully compatible across all browsers. Is fully responsive, and uses no JavaScript. However, that appears not to be strictly correct as some JS is used in examples of some navigation and menu styles. The scripts don’t form part of the css but some of the examples such as the accordions and side menus come with a script which is linked to in the HTML element.

By the way, the w3.css site also has a set of javascripts called W3 Data

Everything appears to get covered by w3.css. There are construction elements like containers, which set the all the common elements like margins, padding, alignments etc, and there are individual classes for those elements.

The w3 also has styles for responsive layouts with “w3-half “ to “w3-threequarter” and others. You also use a grid layout, with up to twelve columns in a layout.

There are classes for all colour needs like background, text and hover, as well as colour themes and libraries.

There are font and text classes and links to external font libraries.

You can manipulate images, with classes for rounded, circle and boarded images and text overlays on images

Animations are catered for with sliders and even a spin element

Forms are not forgotten, with input classes along with tables.

To use it you can simply link to the w3 site.

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

Download a copy and you can modify it or add your own css along with the w3 styles.

There is so much more to cover but you can get an over view in the intro page

So go check it out.

 

Steve South

Sig Leader