-
Notifications
You must be signed in to change notification settings - Fork 78
Code Corps SASS Ideas and Dicussion
Rafael Lüder edited this page Dec 2, 2016
·
5 revisions
This discussion is related to and goes beyond what's described on issues #672 and #698.
I'd like that by the end of the CSS Refactoring Milestone we achieve not only the decoupling of styles and testing, proper BEM naming of classes and semantic HTML but also a rearranged folder structure for /app/styles. All of this while making the most out of SASS's built-in features.
The main idea here is to reorganize our /app/styles folder structure to follow the the 7-1 pattern (or as close as we can get to it). With this new approach the folder structure would look something like this:
|-- styles/
|--|-- abstracts/
|--|--|-- _functions.scss
|--|--|-- _mixins.scss
|--|--|-- _variables.scss
|--|-- base/
|--|--|-- _base.scss (standard styles for HTML elements)
|--|--|-- _fonts.scss
|--|--|-- _helpers.scss (e.g. .clearfix, .container, etc.)
|--|--|-- _typography.scss
|--|-- components/
|--|--|-- categories-list.scss
|--|--|-- category-item.scss
|--|--|-- ...
|--|-- layout/
|--|--|-- _footer.scss
|--|--|-- _header.scss
|--|--|-- ...
|--|-- templates/
|--|--|-- about.scss
|--|--|-- home.scss
|--|--|-- projects.scss
|--|--|-- team.scss
|--|--|-- ...
|--|-- themes/
|--|--|-- code-corps/
|--|--|--|-- code-corps.scss
|--|--|-- another-theme/
|--|--|--|-- another-theme.scss
|--|--|-- ...
|--|-- app.scss
|--|-- main.scss
- How to Use Sass to Build One Project With Multiple Themes
- Themed Styles with Sass
- Sass Theming with Configuration Files
- Sass Theming: The Neverending Story
- Efficient theming with Sass