Less Web Development Essentials电子书

Less Web Development Essentials

Table of Contents

Less Web Development Essentials

Credits

Foreword

About the Author

Acknowledgments

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

Errata

Piracy

Questions

1. Improving Web Development with Less

Using CSS3 for styling your HTML

Using 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

Example code used in this book

Your first layout in Less

Vendor-specific rules

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

Compressing and minimizing your CSS

Graphical user interfaces

Summary

2. Using Variables and Mixins

Comments

Nested comments

Special comments

Variables

Organizing your files

Naming your variables

Using a variable

Organizing variables

The last declaration wins

Variable declaration is not static

Lazy loading

Escaping values

Mixins

Basic mixins

Parametric mixins

Default values

Naming and calling

Multiple parameters

More complex mixins for linear gradient backgrounds

Special variables – @arguments and @rest

Return values

Changing the behavior of a mixin

Switches

Argument matching

Guarded mixins

Using guards and argument matching to construct loops

The !important keyword

Summary

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

The navigation structure

Nested rules

Mixins and classes

Variables

Classes and namespaces

Operating on numbers, colors, and variables

The & symbol

Property merging

Built-in functions

JavaScript

List functions

Using color functions

The darken() and lighten() functions

Color manipulation

Color operations

Color blending with Less

Type functions

The box-shadow mixin

Summary

4. Avoid Reinventing the Wheel

Revisiting 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

Using single-line declarations for vendor-specific rules with Less Elements

Less Hat – a comprehensive library of mixins

Using the 3L library of prebuilt mixins

SEO and HTML debugging

ClearLess – another library of prebuilt mixins

Using Preboot's prebuilt mixins for your project

Integrating other techniques into your projects using Less

Using iconic fonts

Retina.js

Summary

5. Integrate Less in Your Own Projects

Importing CSS into Less

Using the @import rule

Migrating your project

Organizing your files

Converting CSS code to Less code

Media queries and responsive design

Making your layout fluid

Testing your layouts on a mobile phone

Coding first for mobile

Using grids in your designs and work flow

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

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 grid classes for the small grid

Applying the small grid on your semantic code

Summary

6. Bootstrap 3, WordPress, and Other Applications

Bootstrap 3

Working with Bootstrap's Less files

Building a Bootstrap project with Grunt

Compiling your Less files

Dive 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

Using Bootstrap's customizer to build your own version

Semantic UI – another Less framework

Automatic prefixing of vendor-specific rules

Other frameworks to build your grid with Less

Using the Golden Grid System to build your grids

The Semantic Grid System

WordPress and Less

Using the Roots theme with Less

JBST with a built-in Less compiler

The Semantic UI WordPress theme

WordPress plugins and Less

Theme WooCommerce with Less

The WP Less to CSS plugin

Alternative compilers for compiling your Less code

The Less.php compiler

The .less compiler for .NET apps

List of tools to develop Less

Summary

Index