Small Semantic-first Class-last CSS.

Small

People create amazing things within 4K. Let's do the same.

Semantic-first

Stop doing this: 

<div class="btn-group" role="group" ... >
<button type="button" class="button button-primary">
...
Start doing this 
<menu>
<button>
...

Class-last

Only variantes and utilities are acceptable classes

CSS

Variables

<progress> spinner

People love @animation based spinners, but they consume 1 full core. To be energy-efficent we'll use a goodol' GIF in our <progress> element:

form

disabled:
label label

<menu> groupping

menu button

menu radio

menu a

1 2 3 4 5 6

[data-tooltip]

This attribut will add a tooltip if you hover a specific element. Since, hover does not exist on phone, you shoud also make your element focusable

good for explaination

Long version

<sup> badge

Badge are usefull to indicate changed state (counter, validity, ...):

My reportsnew

They play well with variantes:

[role=alert]

Can also be used as snackbar / notification.

Oopsie Woopsie !! You can't dissmiss me !
Oopsie Woopsie !! Don't dissmiss me :D

<section> cards

A card is paddingless/marginless so you can embed anything in it
you can even create a modal with it

However

It support header/footer

And it's good Was this article usefull ?  

Layout

A typical web page is 
header
	img nav nav
...
footer
 nav img nav
Use the main element to limit the max-width of an element. If you want your full page to be 
main
 header
 ...
 footer

header
main
 article
footer

flex

.flew will give you a wide-spaced items
1
2
3