Another huge advantage of sass is that we can create variables for…commonly used CSS elements.…Now it lets us have a central place where we can control the look and…feel of our projects.…They're pretty easy to do.…So let's go ahead and set ours for this project.…So I'm going to go into components, sass, and open up the variables_scss file.…Of course, right now it's empty.…And the first thing I want to do is bring in some fonts from Google Web Fonts.…So to do that, I'm going to go to this URL,…which is google.com/fonts and I'm going to find a font.…
The one I'll use for this project is called exo.…So I'm going to type that in.…And what I want to do is add actually this Exo 2.…It's pretty cool.…I'm going to click on add to collection.…And it has a lot of weights, which is what I like about it.…So I'm going to click here on use.…You can see that there's a ton of weights.…And what you want to do is make sure that you pick as few weights as possible,…just the ones you need for your projects because it does affect the page load time.…
Author
Released
9/23/2014- 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 Advanced
Duration
Views
Related Courses
-
JavaScript and AJAX: Integration Techniques
with Ray Villalobos1h 12m Intermediate
-
Introduction
-
Welcome1m 21s
-
Using the exercise files6m 35s
-
-
1. Getting Started
-
Analyzing our project7m 13s
-
Installing and updating Ruby3m 41s
-
Downloading dependencies9m 58s
-
Analyzing our workflow11m 7s
-
Examining your HTML14m 36s
-
-
2. Organizing Your Sass
-
Organizing your Sass7m 47s
-
Preparing your variables11m 50s
-
Creating basic styles9m 58s
-
Building your own mixins7m 8s
-
Preparing your header11m 34s
-
Coding the navigation15m 47s
-
3. Creating Responsive Grids with Susy
-
Using the Susy Gallery mixin14m 26s
-
Adjusting your layouts8m 44s
-
Padding elements with Susy10m 42s
-
Using a split layout7m 36s
-
Finishing your layouts6m 16s
-
Adding a footer4m 12s
-
4. Animating Your Layouts
-
Creating a tween animation15m 17s
-
Controlling scenes by scrolling10m 52s
-
Adjusting for touch devices3m 43s
-
Deploying to production2m 43s
-
-
Conclusion
-
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.
CancelTake 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.
Share this video
Embed this video
Video: Preparing your variables