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 npmjs.org. You can install using a single command.

Introduction

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. 

Methodology

SMACSS, BEM, OOCSS, ITCSS

Explanation about Node package, Bower package, Gulp & Grunt

Generator in action, Supported Application Types, Powerful Features

Agenda

Package Managers

Generator Smacss

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

Contribution

SMACSS (Pronounced as "Smacks")

Scalable and Modular Architecture for CSS

Base

Methodology - SMACSS

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

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

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

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

Methodology - ITCSS

Problem

Resolution

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

Node

- Packages from npmjs.org

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

Bower

- Packages from bower.io

npm install [or] bower install

DATA -

INSTALL -

- Backend, Node, File IO

- Frontend, jQuery, Bootstrap

Task Runner - Gulp

'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

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

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.

Contribution

Source

Fork the github project

Make your feature addition or bug fix

Send a pull request

Contributions

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

Thanks!

Questions / Suggestions?

Github/Twitter - @logeshpaul

Generator Smacss

By Logesh Paul

Generator Smacss

Yeoman generator for frontend projects

  • 584
Loading comments...

More from Logesh Paul