Jen Kramer - Foundation: Incorporating Sass and Compass
Jen Kramer - Foundation: Incorporating Sass and Compass | 447MB
Duration: 2h 18m | Video: MPEG-4 960x540 (16:9) 30fps 1199kbps | Audio: AAC 48kHz stereo 160kbps
Released: 2013 | Genre: eLearning | Level: Beginner | Language: English
Duration: 2h 18m | Video: MPEG-4 960x540 (16:9) 30fps 1199kbps | Audio: AAC 48kHz stereo 160kbps
Released: 2013 | Genre: eLearning | Level: Beginner | Language: English
Foundation is one of the most popular responsive design frameworks—clean and simple. But much of Foundation's styling is accomplished via slightly more complex CSS: Compass and Sass. This course with Jen Kramer shows how to install Foundation, Compass, and Sass, and customize your own Foundation site. Learn how to start a new project, navigate the Sass file structure, and use the main _setting.scss file to style color, fonts, spacing, and more. Plus, learn about advanced features like functions, mixins, extended styles, and much more.
Introduction 1m 55s
Welcome 1m 2s
Using the exercise files 53s
1. Getting Started 20m 30s
Understanding Foundation, Sass, and Compass 4m 17s
Installing Sublime Text 2 3m 51s
Examining the website files and configuration 3m 1s
Installing and testing Ruby 4m 33s
Installing the Sass, Compass, and Foundation gems 4m 48s
2. Working with Sass 29m 51s
Starting a project with Compass, Sass, and Foundation 7m 40s
Examining the Sass structure and downloading Foundation Sass files 9m 47s
Compiling Sass files 6m 13s
Converting custom.css to Sass 6m 11s
3. Simple Sass Customizations 40m 11s
Foundation's Sass file structure 5m 19s
Changing variables with _settings.scss 9m 31s
Working with Google Fonts and Sass 5m 8s
Understanding the emCalc() function 5m 20s
Styling the nav bar 8m 31s
Challenge: Styling the panels 1m 22s
Solution: Styling the panels 5m 0s
4. Advanced Sass Customizations 44m 58s
Adjusting space between the top photo and right column 5m 1s
Styling the panel links by changing _panels.scss 12m 35s
Creating a custom button using mixins 9m 48s
Challenge: Styling tabs 1m 46s
Solution: Styling tabs 9m 21s
Launching your site 6m 27s
Conclusion 45s
Goodbye 45s
Welcome 1m 2s
Using the exercise files 53s
1. Getting Started 20m 30s
Understanding Foundation, Sass, and Compass 4m 17s
Installing Sublime Text 2 3m 51s
Examining the website files and configuration 3m 1s
Installing and testing Ruby 4m 33s
Installing the Sass, Compass, and Foundation gems 4m 48s
2. Working with Sass 29m 51s
Starting a project with Compass, Sass, and Foundation 7m 40s
Examining the Sass structure and downloading Foundation Sass files 9m 47s
Compiling Sass files 6m 13s
Converting custom.css to Sass 6m 11s
3. Simple Sass Customizations 40m 11s
Foundation's Sass file structure 5m 19s
Changing variables with _settings.scss 9m 31s
Working with Google Fonts and Sass 5m 8s
Understanding the emCalc() function 5m 20s
Styling the nav bar 8m 31s
Challenge: Styling the panels 1m 22s
Solution: Styling the panels 5m 0s
4. Advanced Sass Customizations 44m 58s
Adjusting space between the top photo and right column 5m 1s
Styling the panel links by changing _panels.scss 12m 35s
Creating a custom button using mixins 9m 48s
Challenge: Styling tabs 1m 46s
Solution: Styling tabs 9m 21s
Launching your site 6m 27s
Conclusion 45s
Goodbye 45s
Screenshots:
![Jen Kramer - Foundation: Incorporating Sass and Compass]()
![Jen Kramer - Foundation: Incorporating Sass and Compass]()
Jen Kramer - Foundation: Incorporating Sass and Compass
Jen Kramer - Foundation: Incorporating Sass and Compass
