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 - Second Edition

Book Description

Leverage the features of Less to write better, reusable, and maintainable CSS code

In Detail

Less is a preprocessor for CSS that uses less.js for real-time compilation, unlike other preprocessors. Building responsive websites with advanced features such as gradients and animations makes your CSS code complex. Less helps you to write clean, reusable, and maintainable CSS.

Starting off with the fundamental concepts of Less and CSS, you are taken on a tour of how to improve your web development skills with Less.

Next, you get to grips with mixins and variables in Less, which help you to avoid code duplication and write reusable code. Then, you venture into the concepts of nested rules, operations, and built-in functions, which help you in the dynamic creation of CSS properties and help you to create shorter and effective style sheets.

By the end of the book, you will be able to develop code faster and reduce the maintenance time for your web development projects.

What You Will Learn

  • Discover how to debug your code effectively by setting up an automatic build process with Grunt and Gulp
  • Explore the concepts of mixins and variables in Less to script reusable CSS code
  • Use postprocessors to autoprefix, compress, and optimize your CSS code
  • Create complex relationships between properties and use the built-in functions of Less to write your own functions
  • Build a responsive grid with Less to ensure a logical and formal structure for designs
  • Develop web applications with Less and integrate it with your WordPress themes using other CSS frameworks and grid systems

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 Second Edition
    1. Table of Contents
    2. Less Web Development Essentials Second Edition
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. 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. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    8. 1. Improving Web Development with Less
      1. Using CSS3 for styling your HTML
        1. Using the 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
        4. Plugins
      3. Your first layout in Less
        1. Vendor-specific rules
          1. Autoprefixing
          2. The -prefix-free library
        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. Using CSS source maps for debugging
        2. Plugins
        3. Compressing and minimizing your CSS
        4. Compiling your Less code into CSS automatically
        5. Graphical user interfaces
      8. The OOCSS, SMACSS, and BEM methodologies
      9. Summary
    9. 2. Using Variables and Mixins
      1. Using comments in Less
        1. Nested comments
        2. Special comments
      2. Using 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. Variable interpolation
      4. Escaping values
      5. Using mixins
        1. Basic mixins
        2. Parametric mixins
          1. Default values
        3. Naming and calling your mixins
        4. Using mixins with multiple parameters
        5. More complex mixins for linear gradient backgrounds
          1. The @arguments and @rest special variables
          2. Passing rulesets as arguments
        6. Return values
        7. Changing the behavior of a mixin
          1. Switches
          2. Argument matching
          3. Guarded mixins
          4. CSS guards
          5. Using guards and argument matching to construct loops
          6. Using mixins to loop through a set of values
        8. The !important keyword
      6. Summary
    10. 3. Nested Rules, Operations, and Built-in Functions
      1. The navigation structure
      2. Working with nested rules
        1. Using mixins and classes
        2. Variables
        3. Classes and namespaces
      3. Referencing the parent selector with the & symbol
        1. Guards nesting and the & usage
      4. Passing rulesets to mixins
      5. Operating on numbers, colors, and variables
      6. Property merging
      7. Built-in functions
        1. JavaScript
        2. List functions
        3. Using the color functions
        4. The darken() and lighten() functions
        5. Manipulating colors
          1. Functions for color operations
        6. Color blending with Less
        7. Evaluating the type of an input value
        8. Extending Less with custom functions
      8. The box-shadow mixin
      9. Summary
    11. 4. Testing Your Code and Using Prebuilt Mixins Libraries
      1. Revisiting the CSS 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. Creating gradients and layouts with Less Elements
        2. Using the comprehensive Less Hat library
          1. The lesshat mixin for the less.js plugin
        3. Using the 3L library of prebuilt mixins
          1. SEO and HTML debugging
        4. Using the Clearless library of prebuilt mixins
        5. Using Preboot's prebuilt mixins for your project
        6. Using the more-or-less library
        7. The Less-bidi library
      4. Integrating other techniques into your projects using Less
        1. Creating animations with Less
        2. Using iconic fonts
        3. Retina.js
      5. Summary
    12. 5. Integrating Less in Your Own Projects
      1. Importing CSS into Less
        1. Using the @import rule
      2. Migrating your project to Less
        1. Organizing your files
        2. Converting the CSS code to the Less code
      3. Media queries and responsive design
        1. Elastic measurement units in media queries
        2. Making your layout fluid
          1. Testing your layouts on a mobile phone
          2. Coding first for mobile
      4. Using grids in your designs and workflow
        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
          1. Using the display inline-box
          2. Flexbox 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 the grid classes for the small grid
        2. Applying the small grid on your semantic code
      8. Summary
    13. 6. Using the Bootstrap 3 Frontend Framework
      1. Introduction to Bootstrap
        1. The Bootstrap grid
          1. Grid variables and mixins
        2. Working with Bootstrap's Less files
          1. Building a Bootstrap project with Grunt
          2. Autoprefixing your code
          3. Compiling your Less files
        3. Bootstrap Less plugin
          1. Diving into Bootstrap's Less files
          2. Creating a custom button with Less
          3. Customizing Bootstrap's navbar with Less
          4. Bootstrap classes and mixins
            1. Theming Bootstrap with Less
          5. The a11y theme for Bootstrap
          6. Color schemes with 1pxdeep
      2. Summary
    14. 7. Less with External Applications and Frameworks
      1. Cardinal CSS
        1. The Less Cardinal plugin
      2. Using Semantic UI with Less
      3. Deploying Ionic with Less
        1. Using Ionic's build chain with Less
      4. Frameworks for building your grids with Less
        1. The Semantic Grid System
        2. Skeleton's responsive boilerplate
      5. WordPress and Less
        1. Using the Sage theme by Roots with Less
        2. JBST with a built-in Less compiler
        3. The Semantic UI WordPress theme
        4. WordPress plugins and Less
          1. The WP Less to CSS plugin
      6. Using Less with the Play framework
        1. Using Bootstrap with the Play framework
      7. AngularJS and Less
        1. The ngBoilerplate system
      8. Meteor and Less
      9. Ruby on rails and Less
      10. Alternative compilers for compiling your Less code
        1. The Less.php compiler
        2. The .less compiler for .NET apps
      11. Summary
    15. Index