W3.CSS framework: Recap 3

Display controls

Display and floats

w3schools offers a perfect example of how to place text with the display class. See their full page guide. The only hitch might be with floats, where you may need to insert padding. Here's my doctored version of the w3schools page.

w3-mobile

The control you will probably use most immediately is the new w3-mobile command. It adds display:block and width:100% to an element on screens that are less than 600px wide. Here's the w3schools example. It turns your horizontal menu into a vertical one when the screen shrinks.

Buttons and bars

w3.css basically distinguishes between buttons and bars (horizontal). You'll probably use it with input-type, i.e. input-type = button, with maybe w3-hover-color, specifying the color. You create a full-width button with w3-block. w3schools' guide is here.

Bars

Button bars give you an easy way to group buttons horizontally and by default they change color when you mouse over them. w3schools' example. w3-bar-item groups them without a space between.

With W3.CSS, all elements can be a button, w3schools points out.

Responsive layouts

w3-row and w3-col work pretty much as they do in the popular bootstrap framework that got famous well before w3.css came on the scene. A 12-column grid forms the basis, with addition of w3-row-padding to give you a margin between columns. As in bootstrap you can specify small, medium and large screen specifications, and even percentages for cells. Some are the same as w3-quarter (m3), w3-half (m6), w3-quarter (m3).

One of the most useful instructions is w3-rest to fill out lines in a grid.