Join Ray Villalobos for an in-depth discussion in this video Creating basic styles, part of Building a Responsive Single-Page Design with Sass.
So now we have our templates and variables.…Let's start writing some code.…We'll start out with a couple of basic Sass pieces and…check out how the workflow takes care of our Sass processing for us.…So here is our folder with all our files.…We need to start the automation and…we do that by going to Terminal and typing in the gulp command.…When you run that command, you should see something like this and…remember that it gives you this URL which you need to put in your browser.…And I've already got that right here.…So let me go ahead and reload.…Make sure we get the latest one.…
And that'll show you a preview of your page.…As we update things in our template, you'll see the changes happen.…Sometimes it takes a little bit of time, but it should happen pretty quickly.…Let's go ahead and go into Components and Sass.…And we're going to start with the Base.scss file.…And this is where you put the base styles for your entire website.…And normally here,…you would put things like the body maybe some headings that kind of stuff.…
- 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 Advanced
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.