W3.CSS framework: Recap 3
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.
The control you will probably use most immediately is the new
w3-mobile command. It adds
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 = button, with maybe
w3-hover-color, specifying the color. You create a full-width button with
w3-block. w3schools' guide is here.
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.
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
One of the most useful instructions is
w3-rest to fill out lines in a grid.