11. Abstracting CSS Frameworks with Less | Learning less.js

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Learning less.js

By : Alex Libby

5 (2)

Learning less.js

5 (2)

By: Alex Libby

Overview of this book

If you are a designer or developer who wants to quickly learn how to harness the power of Less.js to write more efficient CSS styles that can be applied to a website of any size, then this book is for you. This book will help you master both the basic functions and advanced features of Less.js. It would be helpful to have some familiarity of writing CSS styles, although no prior experience of using CSS preprocessors is required.

Preface

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

Free Chapter

1. Introducing Less

1. Introducing Less

The role of HTML and CSS

The limitations of using CSS

The benefits of using CSS preprocessors

Introducing Less as a solution

Why you should use Less

Supporting CSS4 standards within Less

Summary

2. Building a Less Development Toolkit

2. Building a Less Development Toolkit

Choosing an IDE or editor

Compiling Less files with a standalone compiler

Compiling from the command line

Debugging Less in browsers

Other useful tools

Summary

3. Getting Started with Less

3. Getting Started with Less

Creating the foundation page

Downloading and installing Less

Installing Less on the client side

Installing Less on the server side

The dangers of using Less on the client side

Exploring the syntax used by Less

Compiling the code and viewing results

Using the command-line compiler

Watching for changes in Watch mode

Summary

4. Working with Variables, Mixins, and Functions

4. Working with Variables, Mixins, and Functions

Discovering variables in Less

Exploring mixins

Creating a web form

Adding basic mixins

Developing parametric mixins

Creating mixins as functions

Using external libraries

Introducing functions

Summary

5. Inheritance, Overriding, and Nesting in Less

5. Inheritance, Overriding, and Nesting in Less

Nesting styles in Less

Inheriting and overriding styles with extend

Namespacing in Less

Lazy loading of variables in Less

Importing style sheets into Less

Avoiding code bloat

Summary

6. Migrating Your Site to Less

6. Migrating Your Site to Less

Preparing for the initial jump

Creating the initial framework

Spotting low-hanging fruit

Identifying patterns in your CSS

Using prebuilt mixin libraries

Building a library of mixins

Working through a practical example

Viewing the finished article

Summary

7. Manipulating Fonts with Less

7. Manipulating Fonts with Less

Creating simple font mixins

Using @font-face with Less

Using a prebuilt library to handle fonts

Using variables to calculate sizes

Handling different weights

Working with @media in Less

Creating special effects using Less

Summary

8. Media Queries with Less

8. Media Queries with Less

Introducing media queries

The limitations of CSS

Setting client criteria

Exploring media queries

Exploring media features

Designing media queries

Using tools to resize the screen

Using prebuilt libraries

Summary

9. Working with Less in a CMS

9. Working with Less in a CMS

Introducing the WP theme structure

Preparing our environment

Creating a basic child theme

Adding support for Less in WordPress

Adding Less support using a plugin

Working with Less themes in WordPress

Automating WordPress development

Summary

10. Using Bootstrap with Less

10. Using Bootstrap with Less

Dissecting Bootstrap's Less file structure

Configuring Bootstrap for your site

Building a more realistic site

Compiling the Bootstrap CSS and JavaScript

Examining Bootstrap's mixins

Dissecting Bootstrap's mixins

Dissecting Bootstrap's theme mixins

Customizing our download

Developing a workflow for using Bootstrap

Summary

11. Abstracting CSS Frameworks with Less

11. Abstracting CSS Frameworks with Less

Discovering what's wrong with using frameworks

Diagnosing the problem

Fixing the code

Simplifying complex styles

Summary

12. Color Processing with Less

12. Color Processing with Less

Introducing color management in Less

Examining color spaces and formats

Working with color functions

Color blending

Introducing palettes

Summary

13. Animation with Less

13. Animation with Less

Introducing animations

Creating a good animation

How a CSS animation works

Introducing animation types

Simplifying the animation markup with Less

Creating animated menus

Libraries using Less

Using CSS or JavaScript

Improving the animation's performance

Summary

14. Extending and Contributing to Less

14. Extending and Contributing to Less

Locating the Less repositories

Finding and reporting issues in Less

Reporting bugs in the library

Contributing to the Less source

Contributing to the Less documentation

Working to coding guidelines

Summary

A. Color Functions in Less

A. Color Functions in Less

Defining color formats

Channeling colors using Less

Operating on colors

Color blending

Index

Index

Fixing the code

Before we get into editing any code, we first need to download a copy of the code that accompanies this book. Here, we will find an (unadulterated) copy of the Jumbotron theme, which we can use for the purpose of this exercise:

For the purposes of this exercise, I will assume you have extracted a copy of the code that accompanies this chapter and stored it in a folder called jumbotron, ready for editing. We also need a copy of the Bootstrap library, which we can get from the main site at http://getbootstrap.com/getting-started/#download and then by clicking on Download source against the Source code option.

Assuming we have everything in place, let's make a start:

Open the zip archive file we downloaded from the Bootstrap site, then extract the less folder, and copy it to our jumbotron folder.
In a separate file, add the following code, saving it as semantic.less in the css subfolder within the jumbotron folder:
```
@import "../less/variables.less";
@import "../less/mixins.less";...
```

Visually different images

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Learning less.js

Search

Your notes and bookmarks