Join Ray Villalobos for an in-depth discussion in this video Making your navigation responsive, part of Building a Responsive Single-Page Design with Sass.
Designing websites usually involves laying out the content in a certain way with CSS.…And then modifying the look of that content depending on the size of…the device.…Now to do this, there's a few different approaches.…You can use a framework like Bootstrap to take care of the heavy lifting for you.…But the problem with this framework is that it adds a bunch of…layout code in your HTML.…So if you come here and you go to the CSS section and you take a look at…the grid system, you know that in order to do things to bootstrap,…we add the different classes that are called like, COLMD1 and…you have COLXSSM and that identifies the different break point,…as well as the containers in a 12 column system that they provide.…
And that's great, but it does add a lot of…mark up that is unnecessary to your HTML and you might not want to have that,…because if it's a layout that you want to change your mind on, or if perhaps, you…weren't thinking about doing a 12 column layout, it's not as easy to deal with.…So I think a better approach is to handle all of the layout in CSS.…
- 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.