Less Web Development Essentials
By Bass Jobsen
()
About this ebook
If you use CSS(3) in your web development tasks and would love to learn how to create maintainable and reusable code with Less, this book is ideal for you. Although you need to have some experience in web development, even beginners will find that this book is useful.
Read more from Bass Jobsen
Less Web Development Essentials - Second Edition Rating: 0 out of 5 stars0 ratingsSass and Compass Designer's Cookbook Rating: 0 out of 5 stars0 ratingsBootstrap 4 Site Blueprints Rating: 5 out of 5 stars5/5Less Web Development Cookbook Rating: 0 out of 5 stars0 ratings
Related to Less Web Development Essentials
Related ebooks
Learning Less.js Rating: 0 out of 5 stars0 ratingsResponsive Web Design with HTML5 and CSS3 Rating: 4 out of 5 stars4/5Enduring CSS Rating: 0 out of 5 stars0 ratingsSass and Compass for Designers Rating: 0 out of 5 stars0 ratingsMastering PostCSS for Web Design Rating: 0 out of 5 stars0 ratingsResponsive Media in HTML5 Rating: 0 out of 5 stars0 ratingsYour First Week With Bootstrap Rating: 0 out of 5 stars0 ratingsHTML5 and CSS3: Building Responsive Websites Rating: 0 out of 5 stars0 ratingsMastering Sass Rating: 0 out of 5 stars0 ratingsResponsive Web Design by Example : Beginner's Guide - Second Edition Rating: 0 out of 5 stars0 ratingsMastering Responsive Web Design with HTML5 and CSS3 Rating: 0 out of 5 stars0 ratingsThe Web Designer's Idea Book, Volume 3: Inspiration from Today's Best Web Design Trends, Themes and Styles Rating: 0 out of 5 stars0 ratingsPrimefaces Theme development: Create, package, and customize stunning themes using PrimeFaces Rating: 0 out of 5 stars0 ratingsRedash v5 Quick Start Guide: Create and share interactive dashboards using Redash Rating: 0 out of 5 stars0 ratingsPractical Responsive Typography Rating: 0 out of 5 stars0 ratingsThe Missing Bootstrap 5 Guide: Customize and extend Bootstrap 5 with Sass and JavaScript to create unique website designs Rating: 0 out of 5 stars0 ratingsTools and Skills for .NET 8: Get the career you want with good practices and patterns to design, debug, and test your solutions Rating: 0 out of 5 stars0 ratingsInstant SASS CSS How-to Rating: 5 out of 5 stars5/5Getting Started with Zurb Foundation 5 Rating: 3 out of 5 stars3/5Responsive Web Design by Example: Embrace responsive design with HTML5, CSS3, JavaScript, jQuery and Bootstrap 4 Rating: 0 out of 5 stars0 ratingsInstant Responsive Web Design Rating: 5 out of 5 stars5/5WordPress 2.8 Theme Design Rating: 0 out of 5 stars0 ratingsBuilding Scalable Apps with Redis and Node.js Rating: 0 out of 5 stars0 ratingsProfessional CSS3 Rating: 5 out of 5 stars5/5Responsive Web Design with HTML5 and CSS: Build future-proof responsive websites using the latest HTML5 and CSS techniques Rating: 0 out of 5 stars0 ratingsBootstrap Site Blueprints Rating: 0 out of 5 stars0 ratingsImplementing DevOps on AWS Rating: 0 out of 5 stars0 ratings
Programming For You
Coding All-in-One For Dummies Rating: 4 out of 5 stars4/5Spies, Lies, and Algorithms: The History and Future of American Intelligence Rating: 4 out of 5 stars4/5SQL QuickStart Guide: The Simplified Beginner's Guide to Managing, Analyzing, and Manipulating Data With SQL Rating: 4 out of 5 stars4/5C# Programming from Zero to Proficiency (Beginner): C# from Zero to Proficiency, #2 Rating: 0 out of 5 stars0 ratingsAssembly Programming:Simple, Short, And Straightforward Way Of Learning Assembly Language Rating: 5 out of 5 stars5/5Python Programming : How to Code Python Fast In Just 24 Hours With 7 Simple Steps Rating: 4 out of 5 stars4/5HTML & CSS: Learn the Fundaments in 7 Days Rating: 4 out of 5 stars4/5Learn to Code. Get a Job. The Ultimate Guide to Learning and Getting Hired as a Developer. Rating: 5 out of 5 stars5/5Grokking Algorithms: An illustrated guide for programmers and other curious people Rating: 4 out of 5 stars4/5JavaScript All-in-One For Dummies Rating: 5 out of 5 stars5/5Linux: Learn in 24 Hours Rating: 5 out of 5 stars5/5HTML in 30 Pages Rating: 5 out of 5 stars5/5Python QuickStart Guide: The Simplified Beginner's Guide to Python Programming Using Hands-On Projects and Real-World Applications Rating: 0 out of 5 stars0 ratingsExcel : The Ultimate Comprehensive Step-By-Step Guide to the Basics of Excel Programming: 1 Rating: 5 out of 5 stars5/5Excel 101: A Beginner's & Intermediate's Guide for Mastering the Quintessence of Microsoft Excel (2010-2019 & 365) in no time! Rating: 0 out of 5 stars0 ratingsC++ Learn in 24 Hours Rating: 0 out of 5 stars0 ratingsLearn PowerShell in a Month of Lunches, Fourth Edition: Covers Windows, Linux, and macOS Rating: 5 out of 5 stars5/5Python Games from Zero to Proficiency (Beginner): Python Games From Zero to Proficiency, #1 Rating: 0 out of 5 stars0 ratings
Reviews for Less Web Development Essentials
0 ratings0 reviews
Book preview
Less Web Development Essentials - Bass Jobsen
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
Less Web Development Essentials
Less Web Development Essentials
Copyright © 2014 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 preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: April 2014
Production Reference: 1170414
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78398-146-5
www.packtpub.com
Cover Image by Faiz J. Fattohi (<faizfattohi@gmail.com>)
Credits
Author
Bass Jobsen
Reviewers
Marcus Bointon
Simone Deponti
Austin Pickett
Commissioning Editor
Ashwin Nair
Acquisition Editor
Richard Harvey
Content Development Editor
Sruthi Kutty
Technical Editors
Kapil Hemnani
Faisal Siddiqui
Project Coordinator
Sageer Parkar
Proofreaders
Maria Gould
Paul Hindle
Indexer
Tejal Soni
Graphics
Ronak Dhruv
Production Coordinator
Arvindkumar Gupta
Cover Work
Arvindkumar Gupta
Copy Editor
Karuna Narayanan
Foreword
Before you dive into this book, let me give you a little bit of background. In the summer of 2009, I was writing CSS for a project of mine and had developed a habit of questioning every piece of technology I used. I enjoyed CSS for the most part, but one thing bothered me: I couldn't experiment like I wanted to. I was designing a lot back then, and I strongly believed in designing directly in the browser. This meant being able to change the overall tone and style of the page quickly to try different ideas. With the usual way of organizing CSS, this can be difficult. You have to keep classes small and composable
, shifting the burden to the HTML. CSS is great when you need to translate an existing, final design to the Web. However, that's not how things work very often. More and more designers are jumping straight into CSS, closing the gap between design and implementation, and they need a tool that they can use all the way through, from ideation to finished product.
I started thinking of workarounds such as separating colors from other properties so that all classes that were of the same color would be defined together. However, I wanted colors to depend on other colors; I wanted to describe the theme as relationships
between colors, not static values. I wanted to turn a knob and have the page change from one look to another. This was plainly impossible with the CSS of 2009. I looked for solutions in the form of preprocessors and found a few, but most of them were doing too much; they were fixing things that weren't broken, such as the core syntax of the language that I happened to like.
So, I decided to put something together that would do what I wanted; the first version of Less was born. It was quickly apparent that I wasn't the only one looking for something like this. The idea was simple, but it was a step in the right direction.
Five years later, looking back at this is interesting. If I had run into these problems with the experience I have today, would I have followed the same path? I think my intuition was correct, but never could I have predicted how difficult it is to get something like this right. It's one thing to design something for yourself; it's a completely different thing when it has to work for everyone. This has made me appreciate the quality of the work that went into the CSS specification all the more, as well as the working group's cautiousness in moving forward.
It's important to remember that Less is an extension of CSS, and much of the power of Less comes from its support for plain CSS. It's easy to forget when you have access to all the extra capabilities. However, those who know when and how to use both technologies will enjoy the greatest flexibility and control over their creations.
Alexis Sellier
@cloudhead
Creator of Less
About the Author
Bass Jobsen has been programming for the Web since 1995, from C to PHP, always looking for the most accessible interfaces. He has a special interest in the process between a designer and programmer. He believes that interfaces should work independent of a device or browser. For these reasons, working with grids and meta languages in designs makes him happy. He always looks forward to new opportunities in the Semantic and Responsive Web.
He uses Less in his daily job for web design tasks and WordPress theme development as well as other Twitter Bootstrap apps.
He is always happy to help you. He can be reached at http://stackoverflow.com/users/1596547/bass-jobsen.
Currently, he writes a blog (http://bassjobsen.weblogs.fm/), programs LBS for mobile devices (http://www.gizzing.nl), makes cool websites (such as http://www.streetart.nl/), and counsels Jamedo Websites (http://www.jamedowebsite.nl/) in setting up the technical environment and requirements for their business.
You can also check out his Bootstrap WordPress Starters Theme (JBST) and other projects at GitHub at https://github.com/bassjobsen.
Acknowledgments
This book is for Colinda, Kiki, Dries, Wolf, and Leny.
Recently, I reviewed Getting Started with Zurb Foundation 4 by Andrew D. Patterson and Learning Zurb Foundation by Kevin Horek. After finishing this book, I will start writing Less Web Development Cookbook for Packt Publishing.
Although I have written many blogs and technical project requirements in the past years, this is the first book I have written to be published. Writing this book wasn't possible without the support of my family, Caroliene, and the people of Vivent. Richard Harvey was a patient and excellent motivator and critical reader. Sruthi Kutty helped me dot the i's and cross the t's. Finally, I will thank the reviewers of this book, Simone Deponti, Austin Pickett, and Marcus Bointon, for their critical and valuable suggestions, which make this book even better.
About the Reviewers
Marcus Bointon has been a Less committer for the last couple of years, having developed a taste for Less during the early versions of Twitter Bootstrap. He has a Bachelor's degree in Computer Science from the University of London and a Master's degree from Loughborough University of Technology. He's been involved in computing since 1981 and developing for the Web since 1993. He has extensive experience in many development languages (mainly PHP), Linux and OpenBSD server admin, MySQL database design and admin, e-mail infrastructure, network design, and much more. He is the maintainer of the very popular PHPMailer e-mail sending library.
Marcus is the co-founder and technical director of Synchromedia Limited, a UK-based company behind the smartmessages.net e-mail marketing service, and a UK partner for the 1CRM open source CRM system.
He lives with his wife and two kids in the French Alps, where he can indulge his passion for skiing and mountain biking.
Simone Deponti is a web developer from Milan, Italy. He has eight years of experience in the field, primarily in CMSes, and has contributed to some open source projects, most notably the Plone CMS. He is also the author of a small debugging tool for Less and FireLess, and he wrote the initial debugging support in the Less compiler.
He works for Abstract, a web technology agency based in Italy and Germany, as a developer and project manager. You can find him at events around the world, focusing on Python, JavaScript, and CMSes.
Austin Pickett is a freelance web developer based out of Boston, MA. He has been interested in programming since he was a child and is never seen without a computer nearby. As a self-taught designer and developer, he has worked with several of his own clients to turn their websites or applications into a reality.
Austin has his own freelance career in which he works closely with clients to create their applications. He has worked with a wide array of clients from The National Academy of Best-selling Authors and vacation property owners to web design firms.
Thanks go out to my father, Shawn Pickett, for without him I would have never been interested in computers, and to my best friend and rival, Talasan Nicholson, for without him I would have no local competition or a buddy to ping at 2 AM.
www.PacktPub.com
Support files, eBooks, discount offers and more
You might want to visit www.PacktPub.com for support files and downloads related to your book.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
http://PacktLib.PacktPub.com
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books.
Why Subscribe?
Fully searchable across every book published by Packt
Copy and paste, print and bookmark content
On demand and accessible via web browser
Free Access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.
Preface
After the introduction of HTML 4.01 in 1999, the Web changed fast. Many new devices such as tablets and mobile phones saw the light of day. Mobile Internet became faster, cheaper, and more