A list of css patterns such as floating label, breadcrumb, media object, notification ...

I didn't notice that ! What a cool tool. There are challenges too

Some games to learn CSS tools. Currently playing at Flexbox zombies.

edit: I have finished flexbox zombie and that's great !

TL;DR

  display: flex;
  justify-content: center;
  align-items: center;

Much easier than previous methods

Priority order :

• Importance
  1. transition
  2. !important
  3. animation
  4. normal rules
• Origin
  1. Website
  2. User
  3. Browser
• Specificity
  1. inline (within a style HTML property)
  2. id
  3. class | attribute | pseudo-class
  4. type | pseudo-element
• Position --> Order of the rules (rules defined later are first applied)

Good idea ! Blur all images that doesn't have a alt attribute.

img:not([alt]) {
    filter: blur(5px);
}
Or you can set a `border: 5px solid red` too.
Feel free to highlight accessibility problems :)

A pack of free icons <3

(shared by Riduidel)

A lot of good CSS tips

A generator of smooth shadows in css

(shared by Warrior du Dimanche)

This tool highlight error on accessibility

Why not ! I never used it before because I try to use a maximum of CSS3 selectors, but it should be useful for other cases.

A lightweight CSS framework following Google's Material Design guidelines. It has dedicated
MUI weights 43.1 KB (minified) and 19KB of javascript (minified too).

7,83 KB only, made to work with Sass.

A proper cheasheet is also available on the official website

Composed of 2 modules : lit and util.
Its particularity is bright colors and lightness !
lit weighs only 838 B (lol) and 2.12 KB for util.

A colored css framework !
25,5 KB of css and 1,8 KB of javascript. Light as well :)