css.md

Style - SCSS/CSS/JSS/...

Learn

• Learning game - CSS Diner

SASS

Package

• Bourbon (SASS Mixins)

Tools

• CSS Matic - The ultimate CSS tools for web designers
• CSS Triggers
• Neumorphism Generator
• Typography Generator
• CSS Stats - Audit - Analytics and visualizations for your stylesheets
• Screen Sizes - All devices size

Challenge online

• CSS Battle !

Media Query

• Media Query properties - css-tricks.com
• Logic - css-tricks.com

Flexbox

• Flexbox a complet guide
• Flex Cheatsheet - css-tricks.com
• Learning Game - Flexbox Froggy
• Flexbox — The Animated Tutorial

Grid

• Learning Game - Grid Garden
• Complete Guide - css-tricks.com
• 60 Columns CSS Grid 📦

Framework

• Bootstrap

React

• Styled Component 💅
• Material UI

Angular

• Angular Material
• Ng Ant Design

Animation

• Animista (CSS Animation on demand)
• Loading.io
• Animate.css
• Boncejs
• Animating with clip path - css-tricks.com
• Good to great UI animation tips
• Principle Repo

Loader CSS

• Loading.io
• Lukehaas
• Tobiasahlin
• FreeFrontend

Gradient

• UI Gradients - Gradient generator
• Gradienta - Gradient generator

Conferences

• DotCSS 2019 - Paris
• DotCSS 2018 - Paris
• DotCSS 2017 - Paris
• DotCSS 2016 - Paris
• DotCSS 2015 - Paris
• DotCSS 2014 - Paris

Website references

• Organic Basic - 🌱Low Impact - Extremly lite CSS

Articles / Examples

• La Cascade - Un peu de tout sur CSS, HTML, SVG, JavaScript et le reste
• CSS2019
• FluidTransitions React
• Space in Design System
• Understanding CSS: Selector Specificity
• Every Layout - CSS Tricks
• Leading-Trim: The Future of Digital Typesetting
• Enhancing User Experience With CSS Animations
• In Defense of Utility-First CSS
• Creating Utility Classes with Design Tokens using Sass
• Buttons shouldn’t have a hand cursor 👆

Example

• Sémantique HTML - Codepen

🙌 Contributors

• Yann Duval
• Jean-Philippe Bogaert
• Cedric Robert