About

This site is dedicated to the workshop organized by MetaRefresh (12-15 Feb, 2014) - The Design Superheroes who use Modern Design Workflows by Brajeshwar.

This workshop will take you through design workflows and tools that will make you a designer to be reckon with. This will introduce you to tools such as Yeoman, Bower, Grunt, Jekyll and make your life easier with processes such as CSS Linting, CSS compression, Javascript Uglification, Automatic Image optimization, complete with testing your design codes on the way.

To take full advantage of the workship, here are the prerequisites;

• A web designer already familiar with coding in HTML/CSS.
• Is ready to experiment with command-line tools and commands.
• Willing and eager to learn more.

Modules

The workshop will have two broad modules;

1. Smarter way of writing CSS with a CSS Preprocessor.
   • Sass
   • Compass
2. Workflow Automation.
   • Yeoman
   • Grunt
   • Bower

Tools

You're advised to download and setup the following. Make sure they're working.

• Text Editor (required)

  • An IDE of your choice or Sublime Text 3

• Modules, Libraries & Utilities (required)

  • Install Ruby (use Ruby Installer for windows).
  • Install NodeJS (choose the right installer for your OS).
  • Install Sass and Compass.
  • Install Yeoman.

• Good to Have (optional)

  • Sass/Compass GUI Apps (choose one)

    • Scout (open source)
    • CodeKit (paid)
    • Hammer (paid)
    • Compass.app (paid, open source)
    • Kaola (open source)
    • Mixture (paid)
    • Prepros (free, paid)

  • Utilities

    • LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed.

If you need help with installation or have any issues, feel free to contact me.