Modern Tools for Front-End Development – Front-end developers have been at a disadvantage

Modern Tools for Front-End Development

Who Am I?

• Aaron Froehlich
• Drupal Developer, ILR School
• Formerly worked for Singlebrook and Mindspace
• a-fro on GitHub, Drupal.org
• Co-Organizer of the Ithaca Drupal Meetup

New Tools for New Challenges

• Sass and Less

• Modernizr and Compass

• Firebug, Web Developer Toolbar and LiveReload

Installing Sass

There are a number of 3rd party apps to support CSS preprocessors

• Code Kit
• Compass.app
• Less.app
• Development IDE's like Coda and PhpStorm

We're going to use Ruby

Using Ruby Gems

$ gem install bundler
          

Gemfile:

source "https://rubygems.org"

gem 'guard-sass'
gem 'compass'
gem 'guard-livereload'
          

$ bundle install
          

Using Drupal Streamline

• Includes Sass, Compass and LiveReload
• Leverages Guard

# More info at https://github.com/guard/guard#readme

guard 'sass',
  :input => 'docroot/sites/all/themes/wscu_theme/scss',
  :output => 'docroot/sites/all/themes/wscu_theme/css',
  :compass => true,
  :style => :compressed
          

Sass Features

Cross-Browser Supportwith Compass

Simplify Responsive Designwith LiveReload

• LiveReload.app
• Javascript version (provided in example by Drupal Streamline)
• Thanks to Sass, you can choose your favorite grid system, such as Zurb Foundation or Bootstrap, or even roll your own

Thanks!

Questions?