Imports
GravDept uses CSS processors. This enables importing, which harms performance when relying on @import from the CSS spec.
Folder structure
► css
► build
app.css
► src
► component
► core
► animation
► function
► mixin
► var
► layout
► module
► override
► page
► vendor
_partials.scss
app.scss
Source files
/component |
Styles for reusable components. Most of your CSS should be in components. A large project could have hundreds, but many are just 50–100 lines. |
---|---|
/core |
Framework tools (animations, functions, mixins, variables). Defining tools early makes a maintaining a large project much easier. |
/layout | Styles for global layout (header, body, footer). |
/module | Styles for a specific module (not shared). |
/override | Styles Edge cases and shame for old browsers. |
/page | Styles for one-off content or pages. Rarely needed (almost everything should be a component). |
/vendor | Styles from 3rd-parties (extensions, GitHub, etc). |
_partials.scss | List of every partial to include in proper source order. |
app.scss | Compile to css/build/app.css . |