SMACSS (Pronounced as "Smacks")

Scalable and Modular Architecture for CSS

Base

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

Layout

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

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

Module

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

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

State

Themes

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

/* 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>
</a>

HTML

CSS

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.

/* 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;
  }
}

CSS

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

HTML

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

Problem

Resolution

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

Node

- Packages from npmjs.org

{
    "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

Bower

- Packages from bower.io

npm install [or] bower install

DATA -

INSTALL -

- Backend, Node, File IO

- Frontend, jQuery, Bootstrap

'use strict';
/*-----------------------------------------------------------
 GULP: DEPENDENCIES
 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');

/*-----------------------------------------------------------
 GULP : APP TASKS
 Necessary gulp tasks required to run your application like
 magic. Feel free to add more tasks in this area
-----------------------------------------------------------*/
gulp.task('sass', function () {
    gulp.src(['./app/scss/master.scss'])
        .pipe(sass({includePaths: ['scss']}))
        .pipe(gulp.dest('./app/css'))
        .pipe(concat('master.css'))
        .pipe(gulp.dest('./app/css/'));
});

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

/*-----------------------------------------------------------
 GULP : WATCH TASKS
-----------------------------------------------------------*/
gulp.task('default', ['sass', 'browser-sync'], function () {
    gulp.watch("app/scss/*.scss", ['sass']);
});

gulpfile.js

gulp [or] gulp taskname

Tasks -

Run Tasks -

Automate and enhance your workflow

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.,

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.,

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 :)

Enough of theory, it's showtime!

Features

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.

Source

Node Plugin - https://www.npmjs.com/package/generator-smacss

Github Repository - https://github.com/FuelFrontend/generator-smacss

Fork the github project

Make your feature addition or bug fix

Send a pull request

Contributions

Active Contributors

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