Less Web Development Essentials - Second Edition

Bass Jobsen

• Publisher: Packt Publishing
• Year: 2015
• ISBN:
  9781785286698
• Topic: Design
• Subtopic: Web Design

About This Book

• Meet the DRY (Don't Repeat Yourself) principle of software coding for your web development projects by avoiding code duplication
• Shorten the debugging time of complex CSS code with Less for specific devices and browsers
• A comprehensive, fast-paced guide that covers the essential concepts of Less through practical and well-explained code

Who This Book Is For

If you use CSS for web development tasks and want to learn how to create maintainable and reusable code, this is the book for you. Basic knowledge of web development would be helpful.

Less Web Development Essentials Second Edition

---

Table of Contents

Less Web Development Essentials Second Edition

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Improving Web Development with Less

Using CSS3 for styling your HTML

Using the CSS selectors to style your HTML

Specificity, inheritance, and cascade in CSS

How CSS specificity works

Building your layouts with flexible boxes

Compiling Less

Getting started with Less

Using the watch function for automatic reloading

Debugging your code

Plugins

Your first layout in Less

Vendor-specific rules

Autoprefixing

The -prefix-free library

Build rounded corners with border-radius

Preventing cross-browser issues with CSS resets

Creating background gradients

CSS transitions, transformations, and animations

Box-sizing

Server-side compiling

Using CSS source maps for debugging

Plugins

Compressing and minimizing your CSS

Compiling your Less code into CSS automatically

Graphical user interfaces

The OOCSS, SMACSS, and BEM methodologies

Summary

2. Using Variables and Mixins

Using comments in Less

Nested comments

Special comments

Using variables

Organizing your files

Naming your variables

Using a variable

Organizing variables

The last declaration wins!

Variable declaration is not static!

Lazy loading

Variable interpolation

Escaping values

Using mixins

Basic mixins

Parametric mixins

Default values

Naming and calling your mixins

Using mixins with multiple parameters

More complex mixins for linear gradient backgrounds

The @arguments and @rest special variables

Passing rulesets as arguments

Return values

Changing the behavior of a mixin

Switches

Argument matching

Guarded mixins

CSS guards

Using guards and argument matching to construct loops

Using mixins to loop through a set of values

The !important keyword

Summary

3. Nested Rules, Operations, and Built-in Functions

The navigation structure

Working with nested rules

Using mixins and classes

Variables

Classes and namespaces

Referencing the parent selector with the & symbol

Guards nesting and the & usage

Passing rulesets to mixins

Operating on numbers, colors, and variables

Property merging

Built-in functions

JavaScript

List functions

Using the color functions

The darken() and lighten() functions

Manipulating colors

Functions for color operations

Color blending with Less

Evaluating the type of an input value

Extending Less with custom functions

The box-shadow mixin

Summary

4. Testing Your Code and Using Prebuilt Mixins Libraries

Revisiting the CSS background gradients

Unused code

Chrome's developer tools

Firebug CSS usage add-on

Testing your code

Understanding TDD

All about style guides

Building a style guide with StyleDocco

Testing your code with tdcss.js

Prebuilt mixins

Creating gradients and layouts with Less Elements

Using the comprehensive Less Hat library

The lesshat mixin for the less.js plugin

Using the 3L library of prebuilt mixins

SEO and HTML debugging

Using the Clearless library of prebuilt mixins

Using Preboot's prebuilt mixins for your project

Using the more-or-less library

The Less-bidi library

Integrating other techniques into your projects using Less

Creating animations with Less

Using iconic fonts

Retina.js

Summary

5. Integrating Less in Your Own Projects

Importing CSS into Less

Using the @import rule

Migrating your project to Less

Organizing your files

Converting the CSS code to the Less code

Media queries and responsive design

Elastic measurement units in media queries

Making your layout fluid

Testing your layouts on a mobile phone

Coding first for mobile

Using grids in your designs and workflow

The role of CSS float in grids

Making your grid responsive

The role of the clearfix

Using a more semantic strategy

Building your layouts with grid classes

Building nested grids

Alternative grids

Using the display inline-box

Flexbox grids

Building your project with a responsive grid

Using Preboot's grid system

Using the grid mixins to build a semantic layout

Extending your grids

Adding the grid classes for the small grid

Applying the small grid on your semantic code

Summary

6. Using the Bootstrap 3 Frontend Framework

Introduction to Bootstrap

The Bootstrap grid

Grid variables and mixins

Working with Bootstrap's Less files

Building a Bootstrap project with Grunt

Autoprefixing your code

Compiling your Less files

Bootstrap Less plugin

Diving into Bootstrap's Less files

Creating a custom button with Less

Customizing Bootstrap's navbar with Less

Bootstrap classes and mixins

Theming Bootstrap with Less

The a11y theme for Bootstrap

Color schemes with 1pxdeep

Summary

7. Less with External Applications and Frameworks

Cardinal CSS

The Less Cardinal plugin

Using Semantic UI with Less

Deploying Ionic with Less

Using Ionic's build chain with Less

Frameworks for building your grids with Less

The Semantic Grid System

Skeleton's responsive boilerplate

WordPress and Less

Using the Sage theme by Roots with Less

JBST with a built-in Less compiler

The Semantic UI WordPress theme

WordPress plugins and Less

The WP Less to CSS plugin

Using Less with the Play framework

Using Bootstrap with the Play framework

AngularJS and Less

The ngBoilerplate system

Meteor and Less

Ruby on rails and Less

Alternative compilers for compiling your Less code

The Less.php compiler

The .less compiler for .NET apps

Summary

Index

Less Web Development Essentials Second Edition

Copyright © 2015 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparati...