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
Front-end developers have been at a disadvantage
- Browser inconsistencies were a major pain
- Stifled innovation
- CSS is "Easy"
- Bidding against "the nephew"
- Properties rather than programming
- Lack of variables, functions, objects
- Proliferation of devices
New Tools for New Challenges
- CSS Pre-processors
- Polyfill/compatibility libraries
- Responsive Development Tools
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
- Partials
- Variables
- Nested inheritance
- Extending Classes
- Functions/Mixins
- Operations
Cross-Browser Support
with Compass
Simplify Responsive Design
with 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!