Join Ray Villalobos for an in-depth discussion in this video Using a split layout, part of Building a Responsive Single-Page Design with Sass.
In the last video, we created the mixins so…that we could accurately place the photos on certain backgrounds.…Now, I need to finish up the rest of this layout because this doesn't look…particularly good.…So, we're in the events.scss that is in components Sass modules and right there.…So, I'm going to modify this a little bit to actually take care of the layout and…already got the events ID there.…But one thing you'll notice is that by default,…all these elements will automatically pad a little bit.…
So, either to the top or to the left or whatever.…So, we need to go ahead and clear that out.…I'll set the padding to zero.…And then I'm going to add an event class because these items are tagged as events.…And I'm going to set the position of these elements to a relative.…That's because I'm going to want to position the different elements next to…each other in certain instances.…Because we're going to want the notes in here to actually move to the bottom.…So we're going to need to position these in an absolute manner aligned to…
- 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.