Skip to content

Instantly share code, notes, and snippets.

@Asjas
Created May 19, 2021 07:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Asjas/f55867c502e91c7e7fdd32feb32705dc to your computer and use it in GitHub Desktop.
Save Asjas/f55867c502e91c7e7fdd32feb32705dc to your computer and use it in GitHub Desktop.
Pretty neat SCSS folder structure
// https://matthiasott.com/notes/how-i-structure-my-css
/scss/
├── 1-settings
│ └── _global.scss
├── 2-design-tokens
│ ├── _colors.scss
│ ├── _fonts.scss
│ ├── _media-queries.scss
│ ├── _spacing.scss
│ └── _typography.scss
├── 3-tools
│ ├── _aspect-ratio.scss
│ ├── _blend-modes.scss
│ ├── _center.scss
│ ├── _clearfix.scss
│ └── _gradients.scss
├── 4-generic
│ ├── _box-sizing.scss
│ ├── _font-face.scss
│ ├── _normalize.scss
│ └── _print.scss
├── 5-elements
│ ├── _forms.scss
│ ├── _headings.scss
│ ├── _images.scss
│ ├── _links.scss
│ ├── _lists.scss
│ └── ...
├── 6-skeleton
│ ├── _grid.scss
│ ├── _layouts.scss
│ └── _objects.scss
├── 7-components
│ ├── _accordion.scss
│ ├── _card.scss
│ ├── _hero.scss
│ ├── _pan-galactic-gargle-blaster.scss
│ └── ...
├── 8-utilities
│ ├── _modifiers.scss
│ └── _states.scss
├── _shame.scss
└── main.scss
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment