Join Ray Villalobos for an in-depth discussion in this video Using jQuery for full screen and Compass flexbox features, part of Building a Responsive Single-Page Design with Sass.
It's time to explore something other than what we've been doing in Sass.…Although it does have something to do with it.…So, what I want to do is on some of these images or some of these pages rather.…I want them to go full screen depending on the width and height of the window.…Now, we can try to do that with CSS but…it's a little wonky and it's not always going to work.…What I want to do is not just control the height of the first page.…But also the height of any elements with a certain class.…Now, if you remember from the index.html page,…you know that we have a class called fullheight.…
And what I want to do is anywhere where I've implemented that height,…which includes all these rooms right here.…I want them to be as tall as the browser window.…So, we're going to need the power of jQuery.…To get access to that, you're going to need to go to the Components folder and…find the Scripts folder.…And then look for this script.js file.…Now it's empty right now.…And there is another file that we have previously set to actually load jQuery and…
- 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.