SASS + SMACSS

This is an implementation of the Simple and Modular Architecture for CSS conventions and a SASS Architecture for my own Curriculum.

This is mostly inspired by http://thesassway.com/beginner/how-to-structure-a-sass-project

Why SMACSS ?

So tired of having Ctrl+F adventures in my css' hundreds of lines ...

Why SASS ?

Sass comes with a lot of features allowing SMACSS to be even more powerful

And also because it's cool

Try it

Copy this repo : git clone https://github.com/Zacaria/SMASASS
Install the dependencies : npm install
Launch the server : grunt serve
Edit files : reload and recompilation are automatic

Demo features

Watchers on scss, view folder, and server file
Create build dist by running : grunt build

Demo here

Get started

Grab the _blank folder
Copy it into your own project
Add this line into your html :

<link type="text/css" rel="stylesheet" href="link/to/css/main.css">

Architecture explanation

Head to the core of the project : /public/styles/scss

    |-- scss
        |-- partials
        |   |-- layout
        |   |   |-- _layout.scss 
        |   |-- modules
        |   |   |-- _modules.scss 
        |   |-- themes
        |   |-- _base.scss
        |   |-- _reset.scss
        |   |-- _state.scss
        |   |-- _typo.scss
        |-- vars
        |   |-- _all.scss
        |   |-- ...
        |-- _shame.scss
        |-- main.scss

## partials The partials folder contains code that output css

In this folder, we say 'rule = var'

## layout

All layouts are centralized by _layouts.scss

Layouts are major sections of the page (header, footer, sidebar)

Id's use is tolerable here.

## modules

All modules are centralized by _modules.scss

Modules are autonomous sections in a page.

Modules have to be modular and reusable :

header .block-list { ... }  Bad idea =(
.block-list-fit { ... }     Good idea =)

Rules for same modules have to share same base name :

.btn {}
.btn-search {}
.btn-small {}
.btn-large {}

## themes

Redefines base, layout, module and state rules to switch between themes

This way :

  //Default rules
  body {
      font-family: "Roboto", sans-serif;
  }

  header {
      background-color: #33F;
      color: #A66105;
  }

  .block-list > li{
      border: 0 dashed #00D;
  }

  //Overwritten rules
  .theme-ocean {
    font-family: "Roboto", sans-serif;

    .theme-ocean header {
        background-color: #33F;
        color: #A66105;
    }

    .theme-ocean .block-list > li{
        border: 0 dashed #00D;
    }
  }

This way, you can import all themes at the same time.

You just have to add the theme root class to apply it dynamically, using javascript for example.

## base

Base file imports vars and defines rules for html tags

## reset

Reset is a way of cleaning the styling differences between browsers in order to have a consistent baseline

Feel free to choose your own http://cssreset.com/

## state

This file defines the states of elements (like inputs, divs)

This is the only place where !important is good to use

It defines a final state of an element, therefore, there should not be two states for an element

States can be :