Useful CSS snippets that will help you save a lot of time when coding
Notice
Some snippets will warning in Vanilla CSS because some code I write base on SASS way
Table of snippets
| Prefix | Code |
| ------------------- | ------------------------------------------------------------------------------------------------ |
| flex-center | Center thing with flexbox |
| flex-centerc | Center flexbox column direction |
| flex-image | Using for image when make layout row direction with flexbox |
| grid-center | Center with css grid |
| abs-center | Center top and left with position absolute |
| abs-centerx | Center left with absolute |
| abs-centery | Center top with absolute |
| text-overflow | Text overflow multiple lines with three dots... |
| text-single | Text overflow single line with threed dots...| |abs-full| Position absolute full base on parent | |bg-opacity| Useful when you want to have background opacity base oncolorproperty of parent | |abs-dropdown| Using when you make dropdown list absolute or dropdown menu when parent havepositionproperty | |flex-layout| Useful when making flexbox layout column | |grid-layout| Another way to making layout fast with css grid | |css-reset| Some useful css reset code when you start coding css | |scroll-hide| Just hide scrollbar | |input-spin-hide| Hide input spin with input[type="number"] | |input-placeholder| Change input placeholder color | |image-responsive| Responsive image by ratio | |imgcover| Image cover full | |scroll-snap| Apply css scroll snap useful when making simple slider with only css | |@max-w| Media query for max-width | |@min-w| Media query for min-width | |input-style| Default css for input | |button-style| Default css for button | |modal-style| CSS for common modal | |css-hide| Hide element to use transition effect later with css-show | |css-show| Show element when using css-hide before | |box-auto| Auto element | |text-style| Useful css for text | |abs-top-left| Position absolute top left | |abs-top-right| Position absolute top right | |abs-bottom-left| Position absolute bottom left | |abs-bottom-right| Position absolute bottom left | |bg-linear| CSS background linear gradient | |shadow-bg| Create box shadow base on background color or background gradient | |@supports| Support rule in css for properties did not support for most browsers | |text-gradient| Create text gradient | |text-shadow| Create text shadow | |shadow| Create shadow | |@keyframes| Keyframes animation | |scrollbar-style| Custom scrollbar style | |abs-full-width| Position absolute full width | |abs-full-height| Position absolute full height | |square| Create fast square | |rect| Create fast rectangle | |square-radius| Create fast square with radius | |circle| Create fast circle | |wfull| Make width full 100% | |hfull| Make height full 100% | |sfull| Make width and height full 100% | |fabase| Flexbox align-items baseline | |faend| Flexbox align-items flex-end | |fastart| Flexbox align-items flex-start | |facenter| Flexbox align-items: center | |fjend| Flexbox justify-content flex-end | |ohidden| Overflow hidden | |xhidden| Overflow x hidden | |yhidden| Overflow y hidden | |xauto| Overflow x auto | |yauto| Overflow y auto | |upper| Text transform to UPPERCASE | |lower| Text transform to lowercase | |capitalize| Text transform to Capitalize | |bold| Make text bold | |italic| Make text italic | |300|font-weight: 300| |400|font-weight: 400| |500|font-weight: 500| |600|font-weight: 600| |700|font-weight: 700| |800|font-weight: 800| |900|font-weight: 900| |cl` | Create class selector fast |
