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

Less Web Development Essentials

Book Description

Less is a powerful CSS preprocessor that extends the language with more features, and this book will tell you all you need to know to make the most of it. More capable, more robust CSS is just a user-friendly tutorial away.

In Detail

Less is a CSS preprocessor that essentially improves the functionality of simple CSS with the addition of several features. The book begins by teaching you how Less facilitates the process of web development. You will quickly then move on to actually creating your first layout using Less and compiling your very first Less code.

Next, you will learn about variables and mixins and how they will help in building robust CSS code. In addition, you'll learn how to keep your code clean and test it by using style guides. We will then move on to the concept of Bootstrapping and the strength of using Less with Twitter Bootstrap. Going one step further, you will be able to customize Twitter's Bootstrap 3 using Less.

Finally, you will learn how to integrate Less into your WordPress themes and explore other web apps that use Less. By leveraging this powerful CSS preprocessor, you will be able to consistently produce amazing web applications while making CSS code development an enjoyable experience.

What You Will Learn

  • Compile Less code into readable and maintainable CSS
  • Integrate Less into your own projects
  • Reuse your code to prevent code duplications
  • Reduce the development and maintenance time of your projects
  • Use variables and mixins to write reusable and portable code
  • Build a responsive grid with Less to create beautifully responsive site layouts
  • Customize Twitter's Bootstrap 3 with Less

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. Less Web Development Essentials
    1. Table of Contents
    2. Less Web Development Essentials
    3. Credits
    4. Foreword
    5. About the Author
    6. Acknowledgments
    7. About the Reviewers
    8. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    9. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    10. 1. Improving Web Development with Less
      1. Using CSS3 for styling your HTML
        1. Using CSS Selectors to style your HTML
        2. Specificity, Inheritance, and Cascade in CSS
          1. How CSS specificity works
        3. Building your layouts with flexible boxes
      2. Compiling Less
        1. Getting started with Less
        2. Using the watch function for automatic reloading
        3. Debugging your code
          1. Example code used in this book
      3. Your first layout in Less
        1. Vendor-specific rules
        2. Build rounded corners with border-radius
      4. Preventing cross-browser issues with CSS resets
        1. Creating background gradients
      5. CSS transitions, transformations, and animations
      6. Box-sizing
      7. Server-side compiling
        1. Compressing and minimizing your CSS
        2. Graphical user interfaces
      8. Summary
    11. 2. Using Variables and Mixins
        1. Nested comments
        2. Special comments
      2. Variables
        1. Organizing your files
        2. Naming your variables
        3. Using a variable
        4. Organizing variables
        5. The last declaration wins
        6. Variable declaration is not static
        7. Lazy loading
      3. Escaping values
      4. Mixins
        1. Basic mixins
        2. Parametric mixins
          1. Default values
        3. Naming and calling
        4. Multiple parameters
        5. More complex mixins for linear gradient backgrounds
        6. Special variables – @arguments and @rest
        7. Return values
        8. Changing the behavior of a mixin
          1. Switches
          2. Argument matching
          3. Guarded mixins
          4. Using guards and argument matching to construct loops
        9. The !important keyword
      5. Summary
    12. 3. Nested Rules, Operations, and Built-in Functions
      1. The navigation structure
      2. Nested rules
        1. Mixins and classes
        2. Variables
        3. Classes and namespaces
      3. Operating on numbers, colors, and variables
      4. The & symbol
      5. Property merging
      6. Built-in functions
        1. JavaScript
        2. List functions
        3. Using color functions
        4. The darken() and lighten() functions
        5. Color manipulation
          1. Color operations
        6. Color blending with Less
        7. Type functions
      7. The box-shadow mixin
      8. Summary
    13. 4. Avoid Reinventing the Wheel
      1. Revisiting background gradients
        1. Unused code
          1. Chrome's developer tools
          2. Firebug CSS usage add-on
      2. Testing your code
        1. Understanding TDD
        2. All about style guides
          1. Building a style guide with StyleDocco
          2. Testing your code with tdcss.js
      3. Prebuilt mixins
        1. Using single-line declarations for vendor-specific rules with Less Elements
        2. Less Hat – a comprehensive library of mixins
        3. Using the 3L library of prebuilt mixins
          1. SEO and HTML debugging
        4. ClearLess – another library of prebuilt mixins
        5. Using Preboot's prebuilt mixins for your project
      4. Integrating other techniques into your projects using Less
        1. Using iconic fonts
        2. Retina.js
      5. Summary
    14. 5. Integrate Less in Your Own Projects
      1. Importing CSS into Less
        1. Using the @import rule
      2. Migrating your project
        1. Organizing your files
        2. Converting CSS code to Less code
      3. Media queries and responsive design
        1. Making your layout fluid
          1. Testing your layouts on a mobile phone
          2. Coding first for mobile
      4. Using grids in your designs and work flow
        1. The role of CSS float in grids
          1. Making your grid responsive
          2. The role of the clearfix
        2. Using a more semantic strategy
        3. Building your layouts with grid classes
        4. Building nested grids
        5. Alternative grids
      5. Building your project with a responsive grid
        1. Using Preboot's grid system
      6. Using the grid mixins to build a semantic layout
      7. Extending your grids
        1. Adding grid classes for the small grid
        2. Applying the small grid on your semantic code
      8. Summary
    15. 6. Bootstrap 3, WordPress, and Other Applications
      1. Bootstrap 3
        1. Working with Bootstrap's Less files
          1. Building a Bootstrap project with Grunt
          2. Compiling your Less files
          3. Dive into Bootstrap's Less files
          4. Creating a custom button with Less
          5. Customizing Bootstrap's navbar with Less
          6. Bootstrap classes and mixins
          7. Theming Bootstrap with Less
          8. The a11y theme for Bootstrap
          9. Color schemes with 1pxdeep
        2. Using Bootstrap's customizer to build your own version
      2. Semantic UI – another Less framework
        1. Automatic prefixing of vendor-specific rules
      3. Other frameworks to build your grid with Less
        1. Using the Golden Grid System to build your grids
        2. The Semantic Grid System
      4. WordPress and Less
        1. Using the Roots theme with Less
        2. JBST with a built-in Less compiler
        3. The Semantic UI WordPress theme
        4. WordPress plugins and Less
          1. Theme WooCommerce with Less
          2. The WP Less to CSS plugin
      5. Alternative compilers for compiling your Less code
        1. The Less.php compiler
        2. The .less compiler for .NET apps
        3. List of tools to develop Less
      6. Summary
    16. Index