Architecture to organize your CSS files. If the site is small perhaps it is not necessary to divide it with so much effort. That's why I propose you an optional and trimmed version that I always use when doing a quick job (a week or less).
| sass | ||
| README.md | ||
Pattern Template 7-1 Lite version, an extraordinarily neat architecture that any Web Designer can understand at a glance. Structure with the help of SASS.
sass/
|
|– _base.sass
|– _header.sass
|– _footer.sass
|– _mixins.sass
|– _typography.sass
|– _variables.sass
|– pages/
| |– _home.sass
| |– _contact.sass
| ...
|– vendors/
| |– _normalize.sass
| |– _owl-carousel.sass
| ...
`– main.sass
Compile SASS.
Install
yarn global add node-sass
Run
node-sass --output-style compressed sass/main.sass css/main.css
Watch: Autocompile if it detects changes
node-sass --watch --source-map true --output-style compressed sass/main.sass css/main.css
Other variants
- Pattern 7-1 with Split media: The best, highly recommended ❤️)
- Pattern 7-1: Standard. Not responsive design.
- Pattern 7-1 Lite with Split media: Simplified version for students or very small web sites.
- Pattern 7-1 Lite: Simplified version for students or very small web sites. Not responsive design.