Join Ray Villalobos for an in-depth discussion in this video Adding a footer, part of Building a Responsive Single-Page Design with Sass.
Our site is looking pretty good, and…we finished pretty much all of the layouts except for…this little footer section, not much to that.…Let's take a look first at the HTML, just a simple footer with a class of scene and…a little article with a class of content, and…then a div with an id of social media, and this is just a list.…Since you have icons there is actual images here,…and each of the images has a class of icon as well.…So, not much HTML there lets fire up the SASS file,…which is of course in the footer.sess document that is in…component SASS modules, and we'll start off by targeting the footer.…
And then using include to get the container mix in and…make sure that this is the full width of the device at all times.…And then we'll create a background color and let's do a lighten of dark.…So we're going to do, like, a grey here of 20 points.…Let's just go ahead and save this and make sure that we have everything running.…As usual I need to go to the terminal,…make sure GULP is running, that fires up our adamation.…
- 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.