What is Workflow?

A sequence of processes (step) through which a piece of work passes from initiation to completion

To optimise workflow, one needs to optimize each individual process involved in workflow

And a process can be optimized by

• Automation
• Verification/ Audit
• Templatizing 
• Guides (How-to's and Play books)

Style Guides

CSS Framework

• 960 Grid
• Hartija - Print CSS
• BlueTrip

CSS, HTML & JS Framework

• Bootstrap
• Foundation
• PureCSS

UI Patterns Library

• UI Patterns
• Pttrns
• Mobile Patterns
• Zurb PatternTap
• Patternry
• Yahoo Patterns

Style Guide

• MailChimp
• SalesForce
• Other Example

What is Style Guide

• Writing
• Pattern Libraries
• Code
• Voice and Tone
• Design Language
• Brand Identity

Frameworks for building Style Guide

• Style Guide Boilerplate
• Component Style Guide
• PatternLab
• Others

Resource Aggregator for Style Guide

• http://styleguides.io/

Development Steps

• Scaffolding
• Code Completion
• Snippets
• Quality
• Testing
• Guidelines

Scafolding

• Solution, Project, File - Templates
• T4 Templates - T4 Toolbox
• Yeoman
• Lineman

Code Completion & Snippets

• Code Completion Plugins
• Vendor and Community Snippets 

Testing

• Unit Testing
• Functional Testing
• Scenario Testing

Quality

• Syntax Checker - Linter, Build Process
• Best Practices - Linter
• Code Complexity - Static Code Analysis
• Testing Quality - Test Coverage 

Guidelines

• Coding Guidelines
  • https://github.com/necolas/idiomatic-css
  • https://github.com/rwaldron/idiomatic.js
  • https://github.com/necolas/idiomatic-html
• SCM Guidelines
  • http://chris.beams.io/posts/git-commit/
  • https://www.lullabot.com/articles/git-best-practices-workflow-guidelines
• Folder Structure Guidelines
  • http://www.johnpapa.net/angular-app-structuring-guidelines/
  • https://scotch.io/tutorials/angularjs-best-practices-directory-structure​
• Packaging Guidelines

Packaging

• Pre-Processing
• Dev-Processing
• Post-Processing

Pre-Processing

sudo-language

• Style Sheet
  • Sass
  • Less
  • Stylus
  • Rework
  • Myth
• JavaScript
  • CoffeeScript
  • LiveScript
  • TypeScript
  • IcedCoffeeScript

Pre-Processing

sudo-language

• HTML
  • Templating - Handlebar, Underscore
  • Templating - Jade, CSHTML
• XAML

Transpillers

JavaScript

• Babel
• ES-Module-Transpiler

Dev-Processing

• Debugging
  • During Development
  • During Deployment Testing
• Instant Update - Live Reload
• Multiple Browser View - Browser Sync
• Test Runner
• Quality Inspection

Post-Processing

• Verification
  • Test Runner
  • Quality Inspection
• Asset Optimization
  • Minification
  • Combining
• Security
  • obfuscation
• Modifications
  • String Replacement
  • Additions - based on standards

Tools - Task Runner

• Grunt
• Gulp
• Bower
• NPM
• Nuget Package Manager
• Build Tasks