Propose directory structure for CSS files

[akrawchyk]

We should provide more structure to the SASS source files directory to bootstrap code organization and be consistent across projects. This should be agnostic to the choice of CSS library we use, however we should definitely take their organization methodology into consideration:

• Foundation source
  • foundation.scss
  • _global.scss
  • components/
  • forms/
  • grid/
  • settings/
  • typography/
  • util/
• SUITCSS source
  • base
  • utils
  • components

I'm also a fan of SUITCSS's base file for small global adjustments on top of normalize.css.

[heyitsolivia]

Thinking about something like this— providing just enough structure, but not too much that it gets in the way. Larger projects (like Service Year?) might need more structure but I think that should be decided on a per project basis.

scss/
|
|-- components/              # All reusable components
|   |-- _buttons.scss
|   |-- _header.scss
|   |-- _navigation.scss
|   |-- _typography.scss
|   ...
|
|-- utilities/               # Helper utility classes
|   |-- _spacing.sass
|   |-- _type.scss
|   ...
|
|-- mixins/                  # Sass Mixins
|   |-- _ease-animation.scss
|   |-- _background-cover.sass
|   |-- _type-underline.scss
|   ...
|
|-- _base.scss               # Base layout
|-- _settings.scss           # Settings
`-- app.scss                 # Imports/includes