Join Ray Villalobos for an in-depth discussion in this video Analyzing our workflow, part of Building a Responsive Single-Page Design with Sass.
This project uses a workflow management tool called http://gulp.js.com/.…Gulp allow you to use a workflow that takes care of things like compressing and…combining files to make them load faster on browsers.…Plus, processing languages like SASS, and…reloading pages automatically when you make a change to your site.…It takes care of doing this by running different modules.…Now, the list of modules is what we find in our package.json file.…Now these modules are installed into the node modules folder, but…the real work is done inside a file called gulpfile.js.…
Now, this is just a regular Java script file with some settings, and…commands for gulp.…Let's take a quick look at what's happening in our gulp file.…Now first you can see that we load all the different plug ins…into different variables.…That takes care of protecting the variables and…loading the plug-ins so they're available for the rest of the project.…Then we create some additional variables that keep track of our…different types of files.…So we're going to start a list, for example,…
- 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.