Generator Smacss

Perfectionist Frontend Generator

What is it?

Productivity Tool which is created using NodeJS and Yeoman

It's creates your project with powerful features

It's published as a node plugin in You can install using a single command.


What it does?

How do I get it?

DRY, Reusability, Maintainability - It's the structure it matters.

Why use it?

Common system for all - projects, developers. 



Explanation about Node package, Bower package, Gulp & Grunt

Generator in action, Supported Application Types, Powerful Features


Package Managers

Generator Smacss

Generator internals, How to contribute and help links, Upcoming Features


SMACSS (Pronounced as "Smacks")

Scalable and Modular Architecture for CSS


Methodology - SMACSS

body, form {
    margin: 0;
    padding: 0;
a {
    color: #039;
a:hover {
    color: #03F;    


#header, #footer {
    width: 960px;
    margin: auto;

.l-fixed {
    position: fixed;
    width: 200px;
    float: left;


.module-popup {
    width: 80%;
    margin: auto;

.module-popup .heading-title {
    font-size: 30px
    padding: 20px;
    border-bottom: 1px solid #333;



States of element

Theming your site, eg. Dark Theme, Lite Theme

Block, Element, Modifier

- Naming convention for classes in HTML and CSS.

- Goal is to help developers understand the relationship between HTML and CSS

Methodology - BEM

/* Block - component */
.btn {}

/* Element - that depends upon the block */ 
.btn__price {}

/* Modifier - that changes the style of the block */
.btn--orange {} 
.btn--big {}
<a class="btn btn--big btn--orange js-subscribe" href="">
  <span class="btn__price">$9.99</span>
  <span class="btn__text">Subscribe</span>



Object Oriented CSS

Object-oriented CSS is a coding paradigm that styles "objects" or "modules"—nestable chunks of HTML that define a section of a webpage—with robust, reusable styles.

Methodology - OOCSS

/* Object Oriented Approach */
%button {
  min-width: 100px;
  padding: 1em;
  border-radius: 1em;
%twitter-background {
  color: #fff;
  background: #55acee;
%facebook-background {
  color: #fff;
  background: #3b5998;

.btn {
  &--twitter {
    @extend %button;
    @extend %twitter-background;
  &--facebook {
    @extend %button;
    @extend %facebook-background;


<a href="#" class="btn--twitter">Twitter</a>
<a href="#" class="btn--facebook">Facebook</a>


Inverted Triangle CSS

It doesn’t matter how well-considered your source order is; how well you’re utilising the cascade; what naming conventions you use; specificity can undo everything

Methodology - ITCSS



Methodology - ITCSS

Low Specificity

High Specificity

Settings: Global variables, config switches

Tools: Default mixins and functions

Generic: Ground-zero styles (Normalize.css, resets) 

Base: Unclassed HTML elements (type selectors)

Objects: Cosmetic-free design patterns

Components: Designed components, chunks of UI

Trumps: Helpers and overrides

Default Layers


- Packages from

Package Managers

    "name": "<%= site_name %>",
    "version": "0.0.1",
    "description": "Application description goes here",
    "devDependencies": {
        "gulp": "~3.8.10",
        "gulp-sass": "~1.3.2",
        "gulp-concat": "~2.4.3",
        "browser-sync": "~1.9.1"
    "engines": {
        "node": ">=0.10.0"

pacakge.json [or] bower.json


- Packages from

npm install [or] bower install



- Backend, Node, File IO

- Frontend, jQuery, Bootstrap

Task Runner - Gulp

'use strict';
 Define the variables of your dependencies in this section
var gulp = require('gulp'),
    sass = require('gulp-sass'),
    concat = require('gulp-concat'),
    browserSync = require('browser-sync');

 Necessary gulp tasks required to run your application like
 magic. Feel free to add more tasks in this area
gulp.task('sass', function () {
        .pipe(sass({includePaths: ['scss']}))

gulp.task('browser-sync', function() {
    browserSync.init(["./app/*.html", "./app/js/*.js", "./app/css/*.css", "./app/images/*.*", "./app/fonts/*.*"], {
        server: {
            baseDir: "./app/"

gulp.task('default', ['sass', 'browser-sync'], function () {"app/scss/*.scss", ['sass']);


gulp [or] gulp taskname

Tasks -

Run Tasks -

Automate and enhance your workflow

Generator Smacss

App Types

Type of web applications you can create with smacss at this moment

Simple Web App

Sometimes you just need a gulp server(localhost), scss compiler & browser-sync(live reload). 

Full Pack Web App

Thinking of creating a solid frontend base with proper structure, well optimization, powerful

Angular App

Angular app with basic configurations and quick commands for creating controllers, directives, etc.,

Generator Smacss

How to kick start a project with Smacss

After installation 'yeoman' and 'generator-smacss' on your machine type 'yo smacss'

App Name

App name goes in necessary places - Folder, Page Title, Dependencies Files, Angular - appname, etc.,

App Type

You have to choose the type of application you want to create.

App Features

Features include frequently and more commonly used plugins like jQuery, Modernizer

App Modules (only applicable for Angular App)

To include some frequently used angular modules like Route, Resource, Animate, Sanitize, etc.,

Generator Smacss

Post generator process after user input

Once you answer all your questions, generator does the following

Creates Project Structure and Files

Scaffolds out your entire project structure based on app type, copy file, link the wires(files)

Dependency Installation

Based on the app type it reads the package.json and bower.json file and automatically installs it.

Start the Server

Once the dependencies is successfully installed, smacss automatically starts the server for you!

And you are ready to work on your project :)

Generator Smacss

Enough of theory, it's showtime!

Generator Smacss


Different Projects; One Generator — Create your type of project in fairly simple steps.

Highly Maintainable — Uses SMACSS approach (BEM, OOCSS, ITCSS in backlog).

Readymade — Directory structure, Naming convention, Linking your app done right.

Speedy Workflow — CSS Preprocessor (Sass), Partials, Browser Sync, Live reload.

Performance Matters — Minify HTML, CSS, & JS. Optimize Images.

Quick Commands — Generate Build, Clean up, Zip project, Angular commands.



Fork the github project

Make your feature addition or bug fix

Send a pull request


Active Contributors

Upcoming Features

App Types

Restify App

Admin App

Node JS restify framework for creating API's with MongoDB as database

Bootstraped admin panel template with Dashboard, Charts, Tabular Data, Forms


Questions / Suggestions?

Github/Twitter - @logeshpaul

Generator Smacss

By Logesh Paul

Generator Smacss

Yeoman generator for frontend projects

  • 2,899