Less Web Development Cookbook

Over 110 practical recipes to help you write leaner, more efficient CSS code
Preview in Mapt

Less Web Development Cookbook

Bass Jobsen, Amin Meyghani

1 customer reviews
Over 110 practical recipes to help you write leaner, more efficient CSS code
Mapt Subscription
FREE
$29.99/m after trial
eBook
$21.00
RRP $29.99
Save 29%
Print + eBook
$49.99
RRP $49.99
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$21.00
$49.99
$29.99p/m after trial
RRP $29.99
RRP $49.99
Subscription
eBook
Print + eBook
Start 30 Day Trial

Frequently bought together


Less Web Development Cookbook Book Cover
Less Web Development Cookbook
$ 29.99
$ 21.00
Less Web Development Essentials - Second Edition Book Cover
Less Web Development Essentials - Second Edition
$ 20.99
$ 14.70
Buy 2 for $32.20
Save $18.78
Add to Cart
Subscribe and access every Packt eBook & Video.
 
  • 5,000+ eBooks & Videos
  • 50+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 

Book Details

ISBN 139781783981489
Paperback394 pages

Book Description

Less is a dynamic style sheet language to help you make your CSS code more maintainable, readable, and reusable. It provides impressive features to enhance your web development skills with complex code techniques necessary for responsive websites.

This book contains more than 110 practical recipes to help you develop efficient projects through CSS extensions including variables, mixins, and functions. Optimize your projects by debugging code to create style guides, build responsive grids, and integrate Less into your WordPress development workflow.

This book includes Less v2 code and covers powerful tools such as Bootstrap and a wide-range of additional prebuilt mixin libraries, allowing you to set up a powerful development environment with Node.js and Grunt.

Table of Contents

Chapter 1: Getting to Grips with the Basics of Less
Introduction
Downloading, installing, and integrating less.js
Installing the lessc compiler with npm
Using less.js with Rhino
Declaring variables with Less for commonly used values
Setting the properties of CSS styles with mixins
Writing more intuitive code and making inheritance clear with nested rules
Creating complex relationships between properties
Using the built-in functions of Less
Using namespaces to make your code reusable and portable
Chapter 2: Debugging and Documenting Your Less Code
Introduction
Debugging your code with less.js
Using CSS source maps to debug your code
Using Chrome Developer Tools to debug your code
Commenting your code in Less
Building style guides with tdcss.js
Building style guides with StyleDocco
Chapter 3: Using Variables and Mixins
Introduction
Deriving a set of variables from a single base variable
Value escaping with the ~"value" syntax
Using variable interpolation
Redeclaring variables based on lazy loading
Using mixins to set properties
Declaring a class and mixin at once
Using selectors inside mixins
Using parametric mixins
Chapter 4: Leveraging the Less Built-in Functions
Introduction
Converting units with the convert() function
Using the default() function
Embedding images with data URIs
Formatting strings
Replacing a text within a string
Working with lists
Using mathematical functions
Using the color() function
Evaluating the type of a value
Creating color objects with RGB values
Getting information about a color
Creating a color variant with the darken() and lighten() functions
Creating overlays of two colors with Less
Chapter 5: Extending and Referencing
Introduction
Referencing parent selectors with the & operator
Referencing to the parent selector more than once
Changing the selecting order with the & operator
Using extend to merge selectors
Using extend inside a ruleset
Extending with the all keyword
Extending with media queries
Using extend to reduce the compiled CSS size
Using extend as an alternative for a mixin
Chapter 6: Advanced Less Coding
Introduction
Giving your rules importance with the !important statement
Using mixins with multiple parameters
Using duplicate mixin names
Building a switch to leverage argument matching
Avoiding individual parameters to leverage the @arguments variable
Using the @rest... variable to use mixins with a variable number of arguments
Using mixins as functions
Passing rulesets to mixins
Using mixin guards (as an alternative for the if…else statements)
Building loops leveraging mixin guards
Applying guards to the CSS selectors
Creating color contrasts with Less
Changing the background color dynamically
Aggregating values under a single property
Chapter 7: Leveraging Libraries with Prebuilt Mixins
Introduction
Importing and downloading prebuilt mixin libraries
Using namespacing with prebuilt libraries
Creating background gradients
Building unlimited gradients with Less Hat
Building a layout with the CSS3 flexbox module
Getting retina ready with Preboot
Generating font-face declarations with Clearless
Improving your website's SEO with 3L mixins
Leveraging sprite images with Pre
Creating bidirectional styling without code duplication
Creating animations with animations.css
Creating animations with More.less
Building semantic grids with semantic.gs
Building an alternative for fluid grids with Frameless
Building a fluid responsive grid system
Chapter 8: Building a Layout with Less
Introduction
Using CSS Reset with Less
Importing and organizing your Less files
Importing files with the @import directive
Building a grid with grid classes
Creating responsive grids
Building a semantic grid with mixins
Applying the flexbox grid on your design
Integrating a navigation menu in the layout
Repositioning your content
Chapter 9: Using Bootstrap with Less
Introduction
Downloading and installing Bootstrap
Customizing Bootstrap with variables
Making custom buttons
Making custom panels
Making custom navigation bars
Extending components using :extend
Reusing Bootstrap's grid
Using Bootstrap classes and mixins
Extending Bootstrap with your own mixins
Making custom color schemes with 1pxdeep
Autoprefixing Bootstrap's CSS
Chapter 10: Less and WordPress
Introduction
Installing WordPress
Developing your WordPress theme with Less
Integrating Bootstrap into your WordPress theme
Using Semantic UI to theme your WordPress website
Customizing Roots.io with Less
Building a WordPress website with the JBST theme
Chapter 11: Compiling Less Real Time for Development Using Grunt
Introduction
Installing Node and Grunt
Installing Grunt plugins
Utilizing the Gruntfile.js file
Loading Grunt tasks
Adding a configuration definition for a plugin
Adding the Less compiler task
Creating CSS source maps with the Less compiler task
Cleaning and minimizing your code
Adding the watch task
Adding the connect and open task
Adding the concurrent task
Analyzing your code with CSS Lint
Removing unused CSS using Grunt
Compiling style guides with Grunt
Automatically prefix your code with Grunt
Installing the Grunt LiveReload plugin

What You Will Learn

  • Integrate Less into your projects to boost efficiency
  • Spend less time debugging
  • Compile Less code into readable and maintainable CSS
  • Write reusable and portable code and avoid duplication
  • Make use of prebuilt and proven code
  • Reduce the development and maintenance time of your projects
  • Set up a development environment with Grunt

Authors

Table of Contents

Chapter 1: Getting to Grips with the Basics of Less
Introduction
Downloading, installing, and integrating less.js
Installing the lessc compiler with npm
Using less.js with Rhino
Declaring variables with Less for commonly used values
Setting the properties of CSS styles with mixins
Writing more intuitive code and making inheritance clear with nested rules
Creating complex relationships between properties
Using the built-in functions of Less
Using namespaces to make your code reusable and portable
Chapter 2: Debugging and Documenting Your Less Code
Introduction
Debugging your code with less.js
Using CSS source maps to debug your code
Using Chrome Developer Tools to debug your code
Commenting your code in Less
Building style guides with tdcss.js
Building style guides with StyleDocco
Chapter 3: Using Variables and Mixins
Introduction
Deriving a set of variables from a single base variable
Value escaping with the ~"value" syntax
Using variable interpolation
Redeclaring variables based on lazy loading
Using mixins to set properties
Declaring a class and mixin at once
Using selectors inside mixins
Using parametric mixins
Chapter 4: Leveraging the Less Built-in Functions
Introduction
Converting units with the convert() function
Using the default() function
Embedding images with data URIs
Formatting strings
Replacing a text within a string
Working with lists
Using mathematical functions
Using the color() function
Evaluating the type of a value
Creating color objects with RGB values
Getting information about a color
Creating a color variant with the darken() and lighten() functions
Creating overlays of two colors with Less
Chapter 5: Extending and Referencing
Introduction
Referencing parent selectors with the & operator
Referencing to the parent selector more than once
Changing the selecting order with the & operator
Using extend to merge selectors
Using extend inside a ruleset
Extending with the all keyword
Extending with media queries
Using extend to reduce the compiled CSS size
Using extend as an alternative for a mixin
Chapter 6: Advanced Less Coding
Introduction
Giving your rules importance with the !important statement
Using mixins with multiple parameters
Using duplicate mixin names
Building a switch to leverage argument matching
Avoiding individual parameters to leverage the @arguments variable
Using the @rest... variable to use mixins with a variable number of arguments
Using mixins as functions
Passing rulesets to mixins
Using mixin guards (as an alternative for the if…else statements)
Building loops leveraging mixin guards
Applying guards to the CSS selectors
Creating color contrasts with Less
Changing the background color dynamically
Aggregating values under a single property
Chapter 7: Leveraging Libraries with Prebuilt Mixins
Introduction
Importing and downloading prebuilt mixin libraries
Using namespacing with prebuilt libraries
Creating background gradients
Building unlimited gradients with Less Hat
Building a layout with the CSS3 flexbox module
Getting retina ready with Preboot
Generating font-face declarations with Clearless
Improving your website's SEO with 3L mixins
Leveraging sprite images with Pre
Creating bidirectional styling without code duplication
Creating animations with animations.css
Creating animations with More.less
Building semantic grids with semantic.gs
Building an alternative for fluid grids with Frameless
Building a fluid responsive grid system
Chapter 8: Building a Layout with Less
Introduction
Using CSS Reset with Less
Importing and organizing your Less files
Importing files with the @import directive
Building a grid with grid classes
Creating responsive grids
Building a semantic grid with mixins
Applying the flexbox grid on your design
Integrating a navigation menu in the layout
Repositioning your content
Chapter 9: Using Bootstrap with Less
Introduction
Downloading and installing Bootstrap
Customizing Bootstrap with variables
Making custom buttons
Making custom panels
Making custom navigation bars
Extending components using :extend
Reusing Bootstrap's grid
Using Bootstrap classes and mixins
Extending Bootstrap with your own mixins
Making custom color schemes with 1pxdeep
Autoprefixing Bootstrap's CSS
Chapter 10: Less and WordPress
Introduction
Installing WordPress
Developing your WordPress theme with Less
Integrating Bootstrap into your WordPress theme
Using Semantic UI to theme your WordPress website
Customizing Roots.io with Less
Building a WordPress website with the JBST theme
Chapter 11: Compiling Less Real Time for Development Using Grunt
Introduction
Installing Node and Grunt
Installing Grunt plugins
Utilizing the Gruntfile.js file
Loading Grunt tasks
Adding a configuration definition for a plugin
Adding the Less compiler task
Creating CSS source maps with the Less compiler task
Cleaning and minimizing your code
Adding the watch task
Adding the connect and open task
Adding the concurrent task
Analyzing your code with CSS Lint
Removing unused CSS using Grunt
Compiling style guides with Grunt
Automatically prefix your code with Grunt
Installing the Grunt LiveReload plugin

Book Details

ISBN 139781783981489
Paperback394 pages
Read More
From 1 reviews

Read More Reviews

Recommended for You

Mastering Web Application Development with AngularJS Book Cover
Mastering Web Application Development with AngularJS
$ 26.99
$ 5.40
Responsive Web Design with HTML5 and CSS3 Book Cover
Responsive Web Design with HTML5 and CSS3
$ 23.99
$ 4.80
Bootstrap Site Blueprints Book Cover
Bootstrap Site Blueprints
$ 26.99
$ 18.90
JavaScript and JSON Essentials Book Cover
JavaScript and JSON Essentials
$ 17.99
$ 12.60
AngularJS Web Application Development Blueprints Book Cover
AngularJS Web Application Development Blueprints
$ 29.99
$ 21.00
MEAN Web Development Book Cover
MEAN Web Development
$ 29.99
$ 3.00