Last active
September 4, 2020 05:36
-
-
Save joellesenne/2e711650b7742bb834dc to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
assets/css/ | |
| | |
|-- utility/ # Utility SASS that is not outputted | |
| |-- _mixins.scss # Declarations, Functions, Generic Variables (think brand colors), Extends | |
| |-- _utility.scss | |
| |-- _colors.scss | |
| ... | |
| | |
|-- base/ # Generic Styles that are not attached to specific modules | |
| |-- _base.scss # base | |
| |-- _reset.scss # reset / normalize | |
| |-- _helper.scss # helper classes | |
| |-- _print.scss # print styles | |
| |-- _typography.scss # typography | |
| ... | |
| | |
|-- layout/ # Layout Styles | |
| |-- _grid.scss # Grid | |
| |-- _layout.scss # Global Layout Components like Header and Footer | |
| |-- _individual.scss # css for dedicated pages | |
| ... | |
| | |
|-- components/ # Typography and actual modules | |
| |-- _buttons.scss # buttons | |
| |-- _figures.scss # figures | |
| |-- _forms.scss # forms | |
| |-- _module(x).scss # modules | |
| ... | |
| | |
|-- vendor/ # CSS or Sass from other projects | |
| |-- _colorpicker.scss | |
| |-- _jquery.ui.core.scss | |
| ... | |
| | |
`-- main.scss # primary Sass file where everything is imported to | |
`-- landingpage.scss # Dedicated CSS importing dedicated styles like _individual.scss | |
In short: | |
Utility, Base and Layout are generic, global styles. (Basically we already do this, when we link to resets, grid frameworksm etc.). We just adapt it to the sass/scss workflow. | |
Components and Vendor are specific styles. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment