Less Web Development EssentialsPreface 1
Chapter 1: Improving Web Development with Less 9
Using CSS3 for styling your HTML 10
Using CSS Selectors to style your HTML 10
Specificity, Inheritance, and Cascade in CSS 11
How CSS specificity works 12
Building your layouts with flexible boxes 13
Compiling Less 14
Getting started with Less 15
Using the watch function for automatic reloading 17
Debugging your code 17
Example code used in this book 19
Your first layout in Less 20
Vendor-specific rules 21
Build rounded corners with border-radius 21
Preventing cross-browser issues with CSS resets 24
Creating background gradients 25
CSS transitions, transformations, and animations 27
Box-sizing 31
Server-side compiling 34
Compressing and minimizing your CSS 35
Graphical user interfaces 36
Summary 37
Chapter 2: Using Variables and Mixins 39
Comments 39
Nested comments 40
Special comments 40
Table of Contents
[ ii ]
Variables 41
Organizing your files 42
Naming your variables 43
Using a variable 44
Organizing variables 45
The last declaration wins 46
Variable declaration is not static 48
Lazy loading 48
Escaping values 49
Mixins 50
Basic mixins 51
Parametric mixins 52
Default values 52
Naming and calling 53
Multiple parameters 54
More complex mixins for linear gradient backgrounds 55
Special variables – @arguments and @rest 58
Return values 60
Changing the behavior of a mixin 61
Switches 61
Argument matching 61
Guarded mixins 62
Using guards and argument matching to construct loops 64
The !important keyword 65
Summary 66
Chapter 3: Nested Rules, Operations, and Built-in Functions 67
The navigation structure 67
Nested rules 68
Mixins and classes 70
Variables 73
Classes and namespaces 73
Operating on numbers, colors, and variables 76
The & symbol 77
Property merging 81
Built-in functions 81
JavaScript 82
List functions 82
Using color functions 85
The darken() and lighten() functions 86
Color manipulation 87
Color operations 87
Table of Contents
[ iii ]
Color blending with Less 88
Type functions 89
The box-shadow mixin 90
Summary 91
Chapter 4: Avoid Reinventing the Wheel 93
Revisiting background gradients 93
Unused code 94
Chrome's developer tools 94
Firebug CSS usage add-on 96
Testing your code 96
Understanding TDD 96
All about style guides 97
Building a style guide with StyleDocco 97
Testing your code with tdcss.js 99
Prebuilt mixins 100
Using single-line declarations for vendor-specific rules with
Less Elements 101
Less Hat – a comprehensive library of mixins 104
Using the 3L library of prebuilt mixins 105
SEO and HTML debugging 106
ClearLess – another library of prebuilt mixins 107
Using Preboot's prebuilt mixins for your project 109
Integrating other techniques into your projects using Less 110
Using iconic fonts 111
Retina.js 116
Summary 117
Chapter 5: Integrate Less in Your Own Projects 119
Importing CSS into Less 120
Using the @import rule 120
Migrating your project 122
Organizing your files 123
Converting CSS code to Less code 123
Media queries and responsive design 125
Making your layout fluid 125
Testing your layouts on a mobile phone 128
Coding first for mobile 128
Using grids in your designs and work flow 129
The role of CSS float in grids 129
Making your grid responsive 130
The role of the clearfix 132
Using a more semantic strategy 132
Table of Contents
[ iv ]
Building your layouts with grid classes 133
Building nested grids 135
Alternative grids 136
Building your project with a responsive grid 137
Using Preboot's grid system 137
Using the grid mixins to build a semantic layout 141
Extending your grids 144
Adding grid classes for the small grid 145
Applying the small grid on your semantic code 148
Summary 149
Chapter 6: Bootstrap 3, WordPress, and Other Applications 151
Bootstrap 3 151
Working with Bootstrap's Less files 153
Building a Bootstrap project with Grunt 153
Compiling your Less files 155
Dive into Bootstrap's Less files 155
Creating a custom button with Less 156
Customizing Bootstrap's navbar with Less 158
Bootstrap classes and mixins 161
Theming Bootstrap with Less 162
The a11y theme for Bootstrap 163
Color schemes with 1pxdeep 163
Using Bootstrap's customizer to build your own version 164
Semantic UI – another Less framework 164
Automatic prefixing of vendor-specific rules 165
Other frameworks to build your grid with Less 166
Using the Golden Grid System to build your grids 166
The Semantic Grid System 167
WordPress and Less 167
Using the Roots theme with Less 168
JBST with a built-in Less compiler 168
The Semantic UI WordPress theme 170
WordPress plugins and Less 170
Theme WooCommerce with Less 171
The WP Less to CSS plugin 171
Alternative compilers for compiling your Less code 171
The Less.php compiler 171
The .less compiler for .NET apps 172
List of tools to develop Less 172
Summary 173
Index 175