FGAUTREAULT / cheatsheets-css

It's a repository gathering resources about css.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Welcome to cheatsheets-css

It's a repository gathering resources about css.

πŸ“° Blogging πŸ“°

Layout & Responsive

πŸ’» Coding πŸ’»

Viewport meta tag 🚧
Layout examples using positioning, flexbox, cssgrid or multicol technique 🚧
Media queries & breakpoints 🚧
Tools - Chrome Dev Tools, Lighthouse

πŸŽ“ Learning πŸŽ“

https://learn.shayhowe.com/
https://learnlayout.com/
https://www.csstutorial.net/
https://unminify.com/
http://extractcss.com/

By Game

_https://cssbattle.dev/play/1
_https://gridcritters.com/
_http://www.flexboxdefense.com/
_https://flukeout.github.io/
_https://cssgridgarden.com/
_https://www.codemonkey.com/

Documentation

https://www.w3schools.com/css/
https://developer.mozilla.org/en-US/docs/Web/CSS
https://devdocs.io/css/

Code Snippets

https://webcode.tools/generators/css
https://www.littlesnippets.net/
https://enjoycss.com/
https://css-tricks.com/snippets/css/
https://cssdeck.com/
https://codemyui.com/

Inspiration

https://cssnectar.com/
https://www.csswinner.com/

πŸ›  Editor & Tools πŸ› 

https://www.smashingmagazine.com/2021/03/css-generators/ // List of tools to generate Css gradient, shadows...
https://www.magicpattern.design/tools/blob-generator // Magical Css visual effects
https://www.heropatterns.com/ // A collection of repeatable SVG background patterns
https://stripesgenerator.com/ // Generate linear gradient stripes
https://cssgradient.io/ // Css gradient generator
https://accordionslider.com/ // CSS Accordion Slider Generator
https://grid.layoutit.com/ // Generate your grid layout
https://keyframes.app/ // Visual tools to help generate CSS
https://bennettfeely.com/clippy/ //Css clippath shapes
https://jsonformatter.org/scss-to-css // Css converter
https://9elements.github.io/fancy-border-radius/ // Fancy border radius for shapes

Audit

https://www.smashingmagazine.com/2021/03/css-auditing-tools/ // Css audit tools to optimize and lint Css

Colors

https://cssgradient.io/ // Generate gradient, shades, backgrounds, ...
https://mycolor.space/ // Generate color palette from main color

Animations

https://animate.style/ // Powerpoint like animations
https://elrumordelaluz.github.io/csshake/ // Shake animations
https://animxyz.com/ // Composable Css animation toolkit
https://animista.net/ // Powerpoint like animations
https://www.minimamente.com/project/magic/ // Button animations
https://github.com/IanLunn/Hover // Hover
https://codepen.io/Zaku/pen/eRmRxz // Liquid

Chrome Extensions

https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk // Extract CSS and build beautiful styleguides
https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg // Choose color from webpage ...

πŸ“‘ Cheatsheets πŸ“‘

https://cssreference.io/
https://htmlcheatsheet.com/css/
https://ilovecoding.org/courses/htmlcss2
https://devhints.io/
https://grid.malven.co/
https://flexbox.malven.co/
https://yoksel.github.io/flex-cheatsheet/

🐱 Repo GitHub 🐱

https://github.com/awesome-css-group/awesome-css
https://github.com/30-seconds/30-seconds-of-css
https://github.com/AllThingsSmitty/css-protips
https://github.com/afonsopacifer/awesome-flexbox

πŸ“š Authors & Books πŸ“š

About

It's a repository gathering resources about css.