SCSS Directory structure suggestion

[rgksugan]

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.

[logeshpaul]

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.

[logeshpaul]

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
  |

[webmarkhq]

This is pretty close to what i had been using. 👍

[logeshpaul]

@MarinaDiamonds I have taken this suggestion from your library only, thanks for the awesome structure.

Will give the credits once we finalize.

[webmarkhq]

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.

[logeshpaul]

Alright; sure will do..