The 7–1 Pattern

The 7-1 pattern #

The architecture known as the 7–1 pattern (7 folders, 1 file), is a widely-adopted document structure that serves as a basis for large projects.

You have all your partials organised into 7 different folders, and a single file sits at the root level (usually named main.scss) to handle the imports — this is the file that compiles into CSS.

What follows is a sample 7–1 directory structure. I’ve included some examples of files that would sit inside of each folder:

sass/
|
|– abstracts/ (or utilities/)
|   |– _variables.scss    // Sass Variables
|   |– _functions.scss    // Sass Functions
|   |– _mixins.scss       // Sass Mixins
|
|– base/
|   |– _reset.scss        // Reset/normalize
|   |– _typography.scss   // Typography rules
|
|– components/ (or modules/)
|   |– _buttons.scss      // Buttons
|   |– _carousel.scss     // Carousel
|   |– _slider.scss       // Slider
|
|– layout/
|   |– _navigation.scss   // Navigation
|   |– _grid.scss         // Grid system
|   |–

...