Join Ray Villalobos for an in-depth discussion in this video Installing and updating Ruby, part of Building a Responsive Single-Page Design with Sass.
- View Offline
- Exercise Files
In order to use Sass,…we're going to need a copy of Ruby installed on your workstation.…Now if you're on a Mac, it comes pre-installed with the operating system.…But on a PC, you need to go to this website and download and…run the installations.…I'm going to click on this button.…And the latest install is usually fine.…I'll hit the Run button here and go through the rest of the prompts.…Once you've installed Ruby, you're…going to need to install a few other packages.…
So I've got the GitBash application running over here in the left side and…to make sure we have a version of Ruby installed, you can…run the ruby minus minus version command and you should get something like this.…Sass is a language that allows you to write a better version of…CSS with features like variables.…Functions which are called mix-ins ins SASS plus nesting partials, et cetera,…like the website says, it's like running CSS with superpowers.…Now if you're familiar with CSS, Sass is going to be really easy to pick up.…
Although we're going to be using Sass in this course,…
- Compass, whose Sass mixins help you leverage CSS3 features like Flexbox
- Susy 2, the framework that "subtracts" the math from responsive grid design
- ScrollMagic, for adding "magical" scroll effects
- Breakpoint, which makes writing media queries in Sass a snap
But this course isn't just about the tools. It's a realistic project that epitomizes many of the design challenges website developers face in the real world. Start watching now and learn how to use HTML, jQuery, and CSS to build your own dynamic, deeply responsive designs.
- Analyzing the project before you begin
- Creating basic styles
- Building your own Sass mixins
- Coding the navigation
- Making the navigation responsive, with grids
- Using a split layout
- Creating tween animations
- Controlling scenes with scrolling
Skill Level Intermediate
1. Getting Started
2. Organizing Your Sass
3. Creating Responsive Grids with Susy
4. Animating Your Layouts
Next steps1m 38s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.