generator-smacss
generator-smacss copied to clipboard
SCSS Directory structure suggestion
Hi @logeshpaul
Thinking about scalability, I would prefer separate directories for each components (base, layout, master etc.), rather than a single file.
Even modules can have different directories, for which we can provide with sub generators.
Hey @rgksugan
Agreed! I think (master, base, layout) files are less used; let's keep that in common folder. Where in module and pages are used often, so let's put that into a folder as you have suggested.
Later if we are have more features in other components we can move it to a folder too.
I will work on it and update it here.
Directory structure suggestion
+ scss/
|
| + base/ # reset, typography, site-wide
| |-- _index.scss # imports for all base styles
| |-- _base.scss # base styles
| |-- _normalize.scss # normalize v3.0.1
|
| + layout/ # major components, e.g., header, footer etc.
| |-- _index.scss # imports for all layout styles
|
| + modules/ # minor components, e.g., buttons, widgets etc.
| |-- _index.scss # imports for all modules
|
| + states/ # js-based classes, alternative states e.g., success or error state
| |-- _index.scss # imports for all state styles
| |-- _states.scss # state rules
| |-- _print.scss # print styles
| |-- _touch.scss # touch styles
|
| + themes/ # (optional) separate theme files
| |-- beccapurple.scss # rename to appropriate theme name
|
| + utilities/ # non-CSS outputs (i.e. mixins, variables) & non-modules
| |-- _index.scss # imports for all mixins + global project variables
| |-- _fonts.scss # @font-face mixins
| |-- _functions.scss # ems to rems conversion, etc.
| |-- _global.scss # global variables
| |-- _helpers.scss # placeholder helper classes
| |-- _mixins.scss # media queries, CSS3, etc.
| |-- _lib.scss # imports for third party styles
| |-- + lib/ # third party styles
| | _pesticide.scss # CSS pesticide
| | ...
|
| + ie.scss # IE specific Sass file
| + styles.scss # primary Sass file
| + _shame.scss # because hacks happen
|
This is pretty close to what i had been using. :thumbsup:
@MarinaDiamonds I have taken this suggestion from your library only, thanks for the awesome structure.
Will give the credits once we finalize.
I haven't made my structure public yet, the fork you see on my profile is unchanged from @minamarkham's architecture.
All credit must go to her.
Alright; sure will do..