ahzab / smack-sass

A starter kit for Sass projects using the SMACSS methodology.

Smack Sass v1.0

A starter kit for Sass projects using the Scalable and Modular Architecture for CSS (SMACSS) methodology by Jonathan Snook and the Block, Element, Modifier (BEM) naming convention by Yandex. Based on Sassy Starter by Mina Markham. Feel free to adapt Smack Sass to meet your specific needs. I hope Smack Sass helps you organize your CSS in a more efficient way.

Installation

1. Clone the git repository, or click Download ZIP.
2. Install Sass by running gem install sass.
3. Install the Grunt CLI by running npm install -g grunt-cli.

Instructions

1. Watch for changes by running sass --watch scss:css.
2. Compress the output by running sass --watch scss:css --style compressed.
3. Use Autoprefixer by running grunt prefix.
4. Beautify your JavaScript by running grunt cleanjs.
5. Uglify your JavaScript by running grunt buildjs.

File Structure

├── base
│   ├── _base.scss          # all of the base styles for the project
│   ├── _index.scss         # base manifest file
│   └── _normalize.scss     # normalize.css v3.0.2
├── css
│   └── styles.css          # main CSS file for your site
├── gruntfile.js            # configures Grunt tasks
├── index.html              # start writing your HTML here
├── js
│   └── script.min.js       # uglified js file for your site
├── layout
│   ├── _grid.scss          # styles for a twelve-column grid
│   └── _index.scss         # layout manifest file
├── modules
│   └── _index.scss         # modules manifest file
├── node_modules            # Node modules for Grunt
├── package.json            # JSON data for Grunt
├── scss
│   └── styles.scss         # core manifest file
├── src
│   └── js                  # js files in this directory can be uglified
│       └── script.js       # start writing your JavaScript here
├── states
│   └── _index.scss         # states manifest file
├── themes
│   └── _index.scss         # themes manifest file
└── utilities
    ├── _functions.scss     # all of the functions for the project
    ├── _globals.scss       # global variables
    ├── _helpers.scss       # placeholder selectors, screen reader text, etc.
    ├── _index.scss         # utilities manifest file
    └── _mixins.scss        # all of the mixins for the project

Release Notes

• Smack Sass v1.0
• Normalize.css v3.0.2
• Grunt v0.4.5
• Autoprefixer v5.2.1
• Uglify v0.9.1

Resources

• Sass
• SMACSS
• BEM
• Sassy Starter
• Normalize.css
• Grunt
• Autoprefixer
• Uglify

Thank You

• Guil Hernandez at Sass break for help with some of the functions and mixins for this project.
• Mina Markham for creating such a great tool with Sassy Starter.
• Jonathan Snook for making CSS more organized with SMACSS.