O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning Path : CSS Preprocessors-Less

Video Description

Use Less to level up your CSS skills

In Detail

It’s hard to build complex, industry-leading web and mobile experiences whilst only working with bare-metal CSS. Luckily, there are a wide range of new tools and techniques that can help you manage the transition to a more modular way of working. Make your front-end projects more maintainable and extendable with the power of Less in this CSS Learning Path.

Prerequisites: Requires a working knowledge of core CSS

Resources: Code downloads and errata:

  • Mastering CSS

  • Mastering CSS3 Selectors

  • Mastering CSS3 Colors

  • Rapid LESS

  • Learning LESS

  • This path navigates across the following products (in sequential order):

  • Mastering CSS (4h, 44m)

  • Mastering CSS3 Selectors (1h 44m)

  • Mastering CSS3 Colors (1h 1m)

  • Rapid LESS (1h 12m)

  • Learning LESS (1h 43m)

  • Photo Credit: ©iStockphoto.com/bing

    Table of Contents

    1. Chapter 1 : Mastering CSS
      1. The Course Overview 00:06:07
      2. The Anatomy of a Rule Set and the Three Types of Style Sheets 00:06:57
      3. The Box Model and Block versus Inline Elements 00:06:27
      4. Text Editors 00:06:52
      5. CSS Reset 00:07:52
      6. Chrome Dev Tools 00:04:57
      7. Renaming Elements: Classes and IDs 00:06:33
      8. Descendant Selectors 00:05:54
      9. Floats Introduction – Flowing Text around Images 00:05:08
      10. Creating a Multicolumn Layout 00:05:39
      11. Solving the Problems of Floats 00:07:24
      12. Creating Buttons with Modular CSS 00:05:17
      13. Multiple Classes 00:04:43
      14. Specificity Rules 00:07:42
      15. Transitions 00:06:45
      16. Transforms 00:07:01
      17. Styling a Call to Action Button 00:05:24
      18. Gradients 00:03:47
      19. Starting the Navigation 00:06:46
      20. Using Pseudo Classes 00:05:44
      21. Absolute Positioning 00:05:20
      22. Building the Drop-down 00:07:44
      23. CSS Animations (Part 1) 00:06:19
      24. CSS Animations (Part 2) 00:07:46
      25. Finalizing the Navigation 00:07:18
      26. Fluid Grid 00:11:14
      27. Flexible Images 00:08:18
      28. Media Queries 00:09:38
      29. Mobile Menu 00:10:54
      30. Viewport Meta Tag 00:03:23
      31. The @font-face Property 00:04:17
      32. Font Kits and Font Services 00:06:24
      33. Google Web Fonts 00:04:38
      34. Subscription Font Foundries 00:06:15
      35. Icon Fonts 00:10:41
      36. 2x Images 00:06:03
      37. The JavaScript Approach 00:07:14
      38. 1.5x Images 00:04:32
      39. Background Images 00:06:06
      40. SVG 00:10:09
      41. Next Steps 00:11:08
      42. Conclusion and Links 00:06:32
    2. Chapter 2 : Mastering CSS3 Selectors
      1. The Course Overview 00:01:25
      2. The Universal Selector 00:04:58
      3. Linking and Action Selectors 00:06:08
      4. CSS2 Attribute Selectors 00:14:08
      5. CSS3 Attribute Selectors 00:07:00
      6. Localizing Your Site with Language Selectors 00:11:50
      7. Working with the not CSS3 Selector 00:07:30
      8. Combining Logic with combinator Selectors 00:07:33
      9. Playing with the CSS3 UI Selectors 00:13:02
      10. Adding Dynamic Content Before or after an Element 00:04:28
      11. Manipulating Inner Content with Inner Content Selectors 00:04:58
      12. Focusing on a Target with CSS3 00:04:30
      13. Getting to Know the Structural Selectors 00:11:23
      14. Comparing Between only-child and only-of-type 00:05:54
    3. Chapter 3 : Mastering CSS3 Colors
      1. The Course Overview 00:01:43
      2. Exploring the Core Color Properties 00:04:58
      3. Understanding RGB 00:09:39
      4. Integrating an Alpha Channel 00:07:54
      5. Hue, Saturation, Lightness, and Alpha 00:11:07
      6. Finding Color Profiles 00:08:16
      7. Working with currentColor 00:04:52
      8. The Transparent Color 00:06:18
      9. CSS2 System Colors 00:02:43
      10. Color Accessibility 00:04:07
    4. Chapter 4 : Rapid LESS
      1. What Is LESS? 00:01:57
      2. Working with LESS 00:01:11
      3. Course File Structure 00:01:15
      4. Variable Syntax 00:01:41
      5. Working with Variables 00:06:13
      6. Strings as Variables 00:06:29
      7. What Is a Mixin? 00:01:35
      8. Working with Mixins 00:03:13
      9. Parametric Mixins 00:03:52
      10. What Do You Mean by Nesting? 00:02:00
      11. Writing a LESS Nested Rule 00:04:50
      12. Nondescendants and Nesting 00:04:30
      13. Advanced CSS and Pseudo-elements in LESS 00:03:43
      14. Math Operations 00:05:43
      15. Color Operations 00:03:56
      16. Color Functions 00:04:56
      17. Math Functions 00:03:37
      18. LESS for Performance 00:04:33
      19. LESS Frameworks and Templates 00:05:06
      20. LESS Resources and Additional Information 00:01:57
    5. Chapter 5 : Learning LESS
      1. The Course Overview 00:01:43
      2. What Is LESS? 00:03:14
      3. Woah! It's That Easy, Huh? 00:02:09
      4. LESS.js 00:05:02
      5. Using a Task Runner 00:06:08
      6. Using Third-party Software 00:08:18
      7. Using Our Code Editor 00:02:58
      8. What Is a Variable and How Does It Work? 00:05:59
      9. Advanced Variable Usage 00:02:35
      10. Basics: Nesting 00:03:12
      11. Advanced: Nesting 00:02:23
      12. The Anatomy of a Mixin 00:03:37
      13. Using Mixins for Cross-browser Compatibility 00:04:17
      14. Parametric Mixins 00:03:15
      15. Writing Your Own Mixins 00:02:24
      16. Writing LESS Code with Extends 00:04:17
      17. A Final Word on Organization 00:03:37
      18. Color Functions 00:03:46
      19. Advanced Color Functions 00:07:25
      20. Math Functions 00:04:11
      21. Image Tools and Other Available Functions 00:05:27
      22. Task Runners Such as Grunt or Gulp 00:04:00
      23. LESS Prefixer 00:02:10
      24. Emmet 00:05:03
      25. So, Where Do We Go from Here? 00:05:47