Join Ray Villalobos for an in-depth discussion in this video Using the Susy Gallery mixin, part of Building a Responsive Single-Page Design with Sass.
Galleries are a big part of the web.…To align up the grid to make them responsive can be a challenge though.…Suzy makes that easy by providing a gallery mixin.…Let's go ahead and code our next section, which is this welcome section right here.…Has a bunch of images.…We're going to put those in a gallery using this Susy mixin and…show you how to code the rest of this right here.…So, to do that,…I want to show you first the index.html page and go to this section right here.…And this begins kind of our main section and that main section begins sort…of all the pieces of content that fall within the navigation icons right here.…
And the first one is this div with an ID of welcome.…All these sections have a class of scene, so…these are all kind of like pages, but I just happened to call them scenes,…because obviously, in a single page layout they're not technically pages.…So the way that I code these is whenever I have a div like this,…I usually have an article and that article allows me to…put things within a container off whatever size I want.…
- 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.