Useful HTML and 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
Useful HTML layout
These are useful snippets just show HTML layout for some most use UI when coding. If you want to know how to CSS please check the next section (Useful HTML CSS)
html-menu
html-dropdown
html-modal
html-tab
html-accordion
html-linkwrap-img
Useful HTML CSS UI Component
These are useful UI components with HTML and CSS for reference purposes
ui-flex-layout1
ui-flex-layout2
ui-flex-layout3
ui-flex-layout4
ui-dropdown
ui-custom-checkbox
ui-custom-radio
ui-search1
ui-search2
ui-button-icon
ui-tab1
ui-icon-opacity
ui-switch-toggle
ui-modal
ui-notification
ui-mega-menu
ui-menu-dropdown
Table of CSS snippets
| Prefix | Code |
| ------------------- | ---------------------------------------------------------------------------------------------------------------- |
| get-shadow1->5 | 5 types of beautiful box-shadow from getcssscan(get-shadow1, get-shadow2, get-shadow3, get-shadow4, get-shadow5) |
| center-block | Center with display block |
| center-inline | Center with display inline-block |
| flex-center | Center thing with flexbox |
| flex-centerc | Center flexbox column direction |
| flex-image | Using for image when make layout row direction with flexbox |
| flex-col | Flex direction column |
| 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 |
| 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 |
| abs-full | Position absolute full base on parent |
| fixed-full | Position fixed full |
| 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 |
| abs-full-width | Position absolute full width |
| abs-full-height | Position absolute full height |
| abs-dropdown | Using when you make dropdown list absolute or dropdown menu when parent have position property |
| text-truncate | Text overflow multiple lines with three dots... |
| text-single | Text overflow single line with threed dots...| |text-style| Useful css for text | |text-gradient| Create text gradient | |flex-layout| Useful when making flexbox layout column | |grid-layout| Another way to making layout fast with css grid | |ohidden| Overflow hidden | |xhidden| Overflow x hidden | |yhidden| Overflow y hidden | |xauto| Overflow x auto | |yauto| Overflow y auto | |uppercase| Text transform to UPPERCASE | |lowercase| Text transform to lowercase | |capitalize| Text transform to Capitalize | |bold| Make text bold | |italic| Make text italic | |@1279| Media screen and max width 1279px | |@1023| Media screen and max width 1023px | |@767| Media screen and max width 767px | |@768| Media screen and min width 768px | |@1024| Media screen and min width 1024px | |@1280| Media screen and min width 1280px | |random-image| Get random image from url of Unsplash, useful when code withsrcof img tag | |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 | |img-responsive| Responsive image by ratio | |img-cover| Image cover full | |grid-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 | |linear-gradient| CSS background linear gradient | |@supports| Support rule in css for properties did not support for most browsers | |@keyframes| Keyframes animation | |scrollbar-style| Custom scrollbar style | |square| Create fast square | |rect| Create fast rectangle | |circle| Create fast circle | |wfull| Make width full 100% | |hfull| Make height full 100% | |sfull` | Make width and height full 100% |
