Learning Less.js

Book description

Develop attractive CSS styles efficiently, using the Less CSS preprocessor

In Detail

Writing CSS styles can be very tedious?how many times have you written CSS styles that become difficult to read and manage, and frequently have to be duplicated? Less gives you a solid toolkit that can help streamline your code when developing styles for any website of any size, with a significant reduction in the amount of time and effort required.

Learning Less.js helps you maximize your experience with the Less library by breaking down each of its main features. This book walks you through examples that progressively build upon your knowledge, taking you from beginner to advanced usage in a series of easy-to-follow steps. We begin with exploring the library, and will learn about the tricks it uses to help us save development time when creating and managing styles, right through to using Less.js in some practical, real-world scenarios.

What You Will Learn

  • Explore the different features of the Less library
  • Build an effective toolkit that helps in your development workflow, using different tools in Less
  • Streamline the effort required when constructing themes for content management systems, such as WordPress, using Less
  • Discover how you can use Less to make frameworks work for you in an effective way
  • Enhance the use of Less when working with color, one of the key elements of website design
  • Work with Less to reduce the effort required to construct responsive websites
  • Add flair to your website or online application with animation effects using Less

Table of contents

  1. Learning Less.js
    1. Table of Contents
    2. Learning Less.js
    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
      7. Downloading the example code
      8. Errata
      9. Piracy
      10. Questions
    8. 1. Introducing Less
      1. The role of HTML and CSS
      2. The limitations of using CSS
      3. The benefits of using CSS preprocessors
        1. Why not just write normal CSS?
      4. Introducing Less as a solution
      5. Why you should use Less
        1. Reducing redundancy with variables
          1. Understanding the syntax of variables
          2. Creating reusable blocks of code
        2. Generating values automatically
        3. Forgetting about vendor prefixes
        4. Creating media queries and animation the simple way
        5. Reusing code across multiple projects
        6. Compressing CSS automatically for faster websites
      6. Supporting CSS4 standards within Less
        1. Supporting future CSS standards within Less
      7. Summary
    9. 2. Building a Less Development Toolkit
      1. Choosing an IDE or editor
        1. Installing Sublime Text 2
        2. Adding Less syntax support
      2. Compiling Less files with a standalone compiler
        1. WinLess
        2. SimpLESS
        3. Koala
        4. Installing Crunch!
      3. Compiling from the command line
        1. Watching for changes to Less files
        2. Compiling Less files directly from text editors
        3. Installing the compilation support via a package
      4. Debugging Less in browsers
        1. Debugging the Less code using Firefox
        2. Debugging the Less code in Chrome
        3. Installing WampServer
      5. Other useful tools
      6. Summary
    10. 3. Getting Started with Less
      1. Creating the foundation page
      2. Downloading and installing Less
      3. Installing Less on the client side
        1. Using a CDN
      4. Installing Less on the server side
        1. Installing Less using Node
        2. Installing Less using Bower
          1. Using the Bower package
      5. The dangers of using Less on the client side
      6. Exploring the syntax used by Less
        1. Working with variables
        2. Changing variables programmatically
        3. Creating mixins
        4. Nesting styles in Less
        5. Calculating values using operations
        6. Extending existing styles in Less
      7. Compiling the code and viewing results
        1. Using a standalone compiler
      8. Using the command-line compiler
        1. Compiling Less files using the command line
      9. Watching for changes in Watch mode
      10. Summary
    11. 4. Working with Variables, Mixins, and Functions
      1. Discovering variables in Less
        1. Creating Polaroid images
        2. Loading variables and setting the scope
      2. Exploring mixins
      3. Creating a web form
      4. Adding basic mixins
        1. Hiding the original mixin
        2. Using the !important keyword
      5. Developing parametric mixins
        1. Passing multiple parameters
        2. Applying conditions to mixins
        3. Using special keywords
      6. Creating mixins as functions
      7. Using external libraries
      8. Introducing functions
        1. Creating column-based layouts
        2. Moving calculations to a mixin
        3. Working with the data-uri function
          1. Using the data-uri function – some words of caution
      9. Summary
    12. 5. Inheritance, Overriding, and Nesting in Less
      1. Nesting styles in Less
        1. Creating a business card
        2. Examining the process in detail
      2. Inheriting and overriding styles with extend
        1. Using extend to create information alerts
        2. Extending using the all keyword
      3. Namespacing in Less
      4. Lazy loading of variables in Less
      5. Importing style sheets into Less
      6. Avoiding code bloat
      7. Summary
    13. 6. Migrating Your Site to Less
      1. Preparing for the initial jump
      2. Creating the initial framework
        1. Mixing Less with plain CSS
      3. Spotting low-hanging fruit
      4. Identifying patterns in your CSS
      5. Using prebuilt mixin libraries
      6. Building a library of mixins
      7. Working through a practical example
        1. Introducing the CSS
        2. Identifying the changes to be made
        3. Making the changes
        4. Using the CSS3 mixins
        5. Creating variables for fonts
        6. Creating variables for colors
        7. Switching to using nesting
        8. Incorporating our own mixins
        9. Importing images into style sheets – a bonus
      8. Viewing the finished article
      9. Summary
    14. 7. Manipulating Fonts with Less
      1. Creating simple font mixins
        1. Extending the mixin
      2. Using @font-face with Less
        1. Downloading the font files
        2. Embedding the font into our demo
      3. Using a prebuilt library to handle fonts
      4. Using variables to calculate sizes
        1. Moving with the times
      5. Handling different weights
      6. Working with @media in Less
        1. Creating a basic media query
        2. Examining the Less file
      7. Creating special effects using Less
        1. Taking effects further
      8. Summary
    15. 8. Media Queries with Less
      1. Introducing media queries
      2. The limitations of CSS
      3. Setting client criteria
      4. Exploring media queries
        1. Defining media types
      5. Exploring media features
        1. Using logical operators
      6. Designing media queries
        1. Creating a simple example
      7. Using tools to resize the screen
        1. Building responsive pages
        2. Building the basic page
        3. Adding responsive queries
        4. Adding responsive images
        5. Incorporating retina support for images
      8. Using prebuilt libraries
      9. Summary
    16. 9. Working with Less in a CMS
      1. Introducing the WP theme structure
      2. Preparing our environment
      3. Creating a basic child theme
      4. Adding support for Less in WordPress
        1. Showing Less style sheets to specific users
      5. Adding Less support using a plugin
      6. Working with Less themes in WordPress
        1. Converting themes to use Less
        2. Creating our own theme
        3. Taking construction further
        4. Using a prebuilt Less theme
      7. Automating WordPress development
        1. Using Grunt in WordPress development
      8. Summary
    17. 10. Using Bootstrap with Less
      1. Dissecting Bootstrap's Less file structure
        1. Downloading the library
      2. Configuring Bootstrap for your site
        1. Using Internet Explorer 8 or below
      3. Building a more realistic site
      4. Compiling the Bootstrap CSS and JavaScript
      5. Examining Bootstrap's mixins
      6. Dissecting Bootstrap's mixins
        1. Core variables and mixins
        2. Reset and dependencies
        3. Core CSS styles
        4. Components
        5. Utility classes
      7. Dissecting Bootstrap's theme mixins
        1. Utilities
        2. Components
        3. Skins
        4. Layout
      8. Customizing our download
        1. Changing the values in our download
      9. Developing a workflow for using Bootstrap
      10. Summary
    18. 11. Abstracting CSS Frameworks with Less
      1. Discovering what's wrong with using frameworks
      2. Diagnosing the problem
        1. Keeping HTML code clean
      3. Fixing the code
        1. Exploring our solution
      4. Simplifying complex styles
      5. Summary
    19. 12. Color Processing with Less
      1. Introducing color management in Less
      2. Examining color spaces and formats
        1. Working with arithmetic operators
      3. Working with color functions
        1. Defining color formats
          1. Converting colors from HEX to RGBA
        2. Channeling colors using Less
          1. Creating alert boxes
        3. Operating on colors
          1. Making text darker or lighter in color
      4. Color blending
        1. Comparing Less with Photoshop
      5. Introducing palettes
        1. Analyzing color palette examples
        2. Choosing our colors
        3. Using a photo as our source
        4. Creating a color palette using Less
        5. Ditching old habits
        6. Working with W3C and WCAG standards
        7. Overcoming blocks on access to a site
        8. Introducing WCAG
        9. Making a site useable
      6. Summary
    20. 13. Animation with Less
      1. Introducing animations
      2. Creating a good animation
      3. How a CSS animation works
      4. Introducing animation types
        1. Animating content
        2. Transitioning elements
        3. Transforming elements
        4. Supporting animations in browsers
      5. Simplifying the animation markup with Less
      6. Creating animated menus
      7. Libraries using Less
        1. Converting from other libraries
        2. Using vendor prefixes – a warning
      8. Using CSS or JavaScript
      9. Improving the animation's performance
        1. Forcing hardware acceleration for a CSS animation
      10. Summary
    21. 14. Extending and Contributing to Less
      1. Locating the Less repositories
      2. Finding and reporting issues in Less
      3. Reporting bugs in the library
      4. Contributing to the Less source
        1. Getting prepared
        2. Submitting feature requests
        3. Creating pull requests
          1. Using GUIs with Git
        4. Testing your submissions
      5. Contributing to the Less documentation
        1. Installing the documentation locally
      6. Working to coding guidelines
      7. Summary
    22. A. Color Functions in Less
      1. Defining color formats
      2. Channeling colors using Less
      3. Operating on colors
      4. Color blending
    23. Index

Product information

  • Title: Learning Less.js
  • Author(s): Alex Libby
  • Release date: October 2014
  • Publisher(s): Packt Publishing
  • ISBN: 9781782160663