Sass structure.

MonsieurPress use sass, you don’t ? Go learn it, and come back. You’re back ? Great !

Amongst all the features of sass, one of the coolest one is the possibility to spit your css into multiple files and merge them in one master file.

Now it gives you a new question about your workflow : how should you structure your sass project ?

The basic structure of MonsieurPress :

Here is the way MonsieurPress like to organise his sass files :

./scss/
├── base               # The base
│ ├── _config.scss
│ ├── _normalize.scss
│ ├── _typography.scss
│ └── _utils.scss
├── layout             # The wrapper, grid, header, etc...
│ ├── _footer.scss
│ ├── _grid.scss
│ ├── _header.scss
│ └── _sections.scss
├── modules            # The modules, meant to be wrapped by layout elements.
│ ├── _burger_btn.scss
│ ├── _buttons.scss
│ ├── _comments.scss
│ ├── _forms.scss
│ ├── _intro.scss
│ ├── _pagination.scss
│ ├── _post.scss
│ ├── _titles.scss
│ └── _widgets.scss
└── style.scss

The main style.scss

This file is used to import everything in a unique file, gulp is responsible for compiling and placing it at the root of the WordPress template.

/*!
Theme Name: MonsieurPress
[...The meta for the theme] 
*/

//---------------------
// IMPORTING BASE
//---------------------
@import "base/_config";
@import "base/_utils";
@import "base/_normalize";
@import "base/_typography";

//---------------------
// IMPORTING Layout
//---------------------
@import "layout/_header";
@import "layout/_footer";
@import "layout/_sections";
@import "layout/_grid";

//-----------------------
// IMPORTING MODULES
//-----------------------
@import "modules/_titles";
@import "modules/_burger_btn";
@import "modules/_widgets";
@import "modules/_buttons";
@import "modules/_intro";
@import "modules/_pagination";
@import "modules/_post";
@import "modules/_comments";
@import "modules/_forms";

Base, layout, & module

This structure has been conceived to be flexible but yet easy to understand, it’s up to you to change things if it doesn’t match the way you code.

  • The base folder contains configurations and styles uses overall the project, like variables (config), normalizer, global typography styles and utils (including functions, mixins, placeholders & helpers)
  • The layout are meant to be wrapper for modules, MonsieurPress think that the header & the footer are not modules, they wrap things, right ? also the grid is a container (obvious). Less basic, a sections file, for section background, padding, margin, etc…
  • The modules are everything else, all the elements that you can find between the header and the footer and inside the sections and grid system.

Summary

Sometime a little images is more explicit than a long speech.

Sass Layout of MonsieurPress

Leave a Reply

Your email address will not be published. Required fields are marked *