Training material for Advanced RWD with Sass+Compass.
CSS JavaScript HTML Shell Ruby PHP
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 121 commits ahead, 1 commit behind fourkitchens:gh-pages.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
ansible
challenge-answers
css
js/vendor
recipe
sample_subtheme
sass
slides
.editorconfig
.gitignore
.gitmodules
DEV_ENVIRONMENT.md
Gemfile
Gemfile.lock
README.md
Vagrantfile
config.rb
index.html
vagrant-halt.command
vagrant-ssh.command
vagrant-up.command

README.md

Responsive, Mobile-First Development with Sass and Compass (All Day)

Responsive Web Design is on everyone's mind at the moment, and for good reason. The old techniques we have used to create pixel perfect sites for desktop audiences have already become a thing of the past as mobile usage accelerates. This session will explore the latest tools, techniques, and best practices of frontend development for responsive design, including Sass (a CSS preprocessor), Compass (a Sass framwork), and Singularity (a new kind of grid system which offers incredible flexibility). These tools can ease much of the hard work related to building truly awesome responsive websites.

In this course we will learn to:

  • Change the "visual order" of content at different media queries without changing the "source order" using Singularity.
  • Write content-focused grid systems which can use different layouts at different media queries using Singularity.
  • Write Media Queries easily and efficiently using Breakpoint to focus on the needs of the content, including automatic output of CSS-only fallbacks for legacy browsers which don't support media queries.
  • Synchronize Ruby Gem versions across teams within projects to avoid code conflicts and output problems using Bundler.
  • Look at best practices and convenience tips for a mobile-first development workflow.

We will also review:

  • The basics of Sass, a CSS preprocessor to write CSS more efficiently.
  • Usage of Compass, a Sass Framework, which contains many convenience features, including mixins for CSS3 vendor prefixes and selector generation functions.

This workshop will be hands-on to familiarize everyone with these tools. We are going to jump right into coding. It would be best to have some pre-existing knowledge of Sass and Compass going into this workshop as well as a working knowledge of Responsive Web Design.

The tools, examples, samples, and slides used for this training are all 100% open source and will be shared throughout the course.

Made with love by @tsmith512, @patrickocoffeyo as well as @Snugug, @rupl, and @iamcarrico.