sass/ | |– abstracts/ | |– _index.scss # index file | |– _variables.scss # Sass Variables | |– _mixins.scss # Sass Mixins | |– vendors/ | |– _index.scss # index file | |– _bootstrap.scss # Bootstrap | |– base/ | |– _index.scss # index file | |– _reset.scss # Reset/normalize | |– _typography.scss # Typography rules | |– layout/ | |– _index.scss # index file | |– _navigation.scss # Navigation | |– _grid.scss # Grid system | |– _header.scss # Header | |– _footer.scss # Footer | |– _sidebar.scss # Sidebar | |– _forms.scss # Forms | |– components/ | |– _index.scss # index file | |– _buttons.scss # Buttons | |– _carousel.scss # Carousel | |– _cover.scss # Cover | |– _dropdown.scss # Dropdown | |– pages/ | |– _index.scss # index file | |– _home.scss # Home specific styles | |– _contact.scss # Contact specific styles | |– themes/ | |– _index.scss # index file | |– _theme.scss # Default theme | |– _admin.scss # Admin theme | – main.scss # Main Sass input file main.scss should have @use "base"; @use "components"; @use "layout"; @use "utilities"; @use "variables"; package.json should have https://thinkdobecreate.com/articles/minimum-static-site-sass-setup/
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter