SCSS_Structuring

SCSS_Structuring

Legend
  > Folder
  - file
  * note

Folder Structures 
  > scss
    > base 
      * resets, global defaults
    > components
      * block level components (things like ripple)
    > helpers 
      * globally convenient  mixins/functions
    > layout 
      * contains styling for larger layout components
      * uses %placeholder and is @extend -ed once by a real selector
    > themes 
      * styling for different themes
    > variables 
      * global project variables - sass maps
    - styles.scss
      * output file that brings together all of the above parts

  > components
    > __tests__
      > __snapshots__
        - VBtn.spec.ts.snap
      - VBtn.spec.ts
    - index.ts
    - VBtn.scss
      * contains component specific functions/mixins/styles
    - VBtn.ts

namespaces (wip)
  .l- layouts
  .v- components
  .js- Javascript hooks
  .is-|.has- state classes
  .t1 | .s1 typography sizes (t larger than base font, s smaller than base font)
  .u- utility classes