Less Web Development Cookbook

394 Pages·2015·3.136 MB·English

by  Bass Jobsen, Amin Meyghani

Less Web Development
Cookbook
Over 110 practical recipes to help you write leaner,
more efficient CSS code
Bass Jobsen
Amin Meyghani
BIRMINGHAM - MUMBAI
Less Web Development Cookbook
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 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 authors, 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 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: January 2015
Production reference: 1250115
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78398-148-9
www.packtpub.com
Credits
Authors Copy Editors
Bass Jobsen Gladson Monteiro
Amin Meyghani Sarang Chari
Reviewers Project Coordinator
Fahad Ibnay Heylaal Milton Dsouza
Dave Poon
Proofreaders
Steve Workman
Lauren E. Harkins
Commissioning Editor Paul Hindle
Ashwin Nair Amy Johnson
Acquisition Editors Indexer
Richard Brookes-Bland Monica Ajmera Mehta
Richard Harvey
Production Coordinator
Content Development Editor Conidon Miranda
Akashdeep Kundu
Cover Work
Technical Editors Conidon Miranda
Shashank Desai
Novina Kewalramani
Mrunmayee Patil
Rikita Poojari

Foreword
I became interested in Less after starting work on a project to expand a complex web
application that had just two large CSS files (one went over IE's limit for a number of selectors
in a file), and it used a regex replacement for theme variables—it was a nightmare. There was
no link between colors that were clearly visually linked and numbers that were clearly related,
and the connection was not obvious and copy/pasted blocks of CSS, scattered throughout
the file. At first, it looked manageable, but then as we made changes and fixed bugs, we found
that changing something at one place meant having to find several other places where change
was required. What was worse, perhaps, was that developers were just adding yet another
more complex selector to override another specific place—ad infinitum—until there were older,
simpler selectors that weren't even used anywhere. I thought there must be a better way
and found Less, which is a superset of CSS, focused on fixing these kind of maintainability
problems by making CSS more declarative. I started off with my involvement by porting
Less.js to dotless and then became an integral part of the team, taking over from Alexis in
maintaining and expanding Less.js to keep up with the demands of the ever-evolving WWW,
third-party library usage, and new ideas for CSS management.
I still consider that the primary job of Less is to allow the web developer to have maintainable
CSS in their project. For this, abstraction of variables, splitting them up into separate files,
and abstraction of common selectors and properties is the most important task (though a
long way from what Less can do). We do not implement every feature request but instead
try and choose those that have the biggest impact. We are generally against a feature that
just provides a different way of doing something. Sometimes this means the solution to
problems is not the most obvious one. I hope this will encourage developers to create code
with consistent patterns, and I would urge them to try and keep their Less code simple
and consistent and ensure it follows the same kind of generally accepted maintainability
approaches that are applied to more traditional programming languages. Where common
problems would be better served with new Less features, I hope we identify them and always
welcome input, discussions, and help to our Github repository. However, it was a recent aim
of the project to enable plugins for Less so that projects that need it can implement their own
extensions without burdening the core project with support, for instance, functions for 10
different color models.
One plugin I would really like to push people to use is Less-plugin-autoprefixer. In the future,
older browsers will not be in use and old polyfills (such as SVG Gradient backgrounds) and
prefixed properties will be, if not a thing of the past, a less common occurrence. By using this
plugin, you can write your CSS in a forward-thinking way and do not have to bloat it with mixins
for polyfills that will be repeated across every project you will work on.
The features most asked for, which I've implemented over the last couple of years, have
tended to focus on using libraries. I think this reflects the rise of people using CSS frameworks
such as Bootstrap to get a head start at the beginning of a project in order to avoid
reimplementing the bare bones. This I think is very positive as it promotes reuse and reduces
the number of ways in which fundamentals are done. The biggest problem that remains with
libraries is around picking out the bits you want to keep and customizing the library into a
project's particular need. Hopefully, Less' import reference feature, not Sass-like extension
will help us with this.
As with any language, problems always present themselves out of nowhere, and it always
helps to get a head start on good solutions. So keep your solutions maintainable and elegant
and enjoy reading this book.
Luke Page
Technical Lead Developer, Scott Logic Ltd. (http://uk.linkedin.com/pub/luke-
page/35/81b/3b6)
About the Author
Bass Jobsen has been programming for the Web since 1995, covering everything from
C to PHP, and is always on the hunt to find the most accessible interfaces. Based in Orthen,
the Netherlands, he has also written Less Web Development Essentials, Packt Publishing,
which is a fast-paced tutorial that covers the fundamentals of Less (Leaner CSS) when used
in web development.
Bass uses Less in his daily job for web design tasks, WordPress theme development,
and other Twitter Bootstrap apps.
He is always happy to help those with questions (http://stackoverflow.com/
users/1596547/bass-jobsen), and he writes a blog you can find at
http://bassjobsen.weblogs.fm/.
Also, check out his Bootstrap WordPress starters theme (JBST) and other projects at GitHub
(https://github.com/bassjobsen).
This book is for Colinda, Kiki, Dries, Wolf, and Leny.
Writing this book wasn't possible without the support of my family,
Caroliene, and the people of Vivent. Richard Harvey is a patient and
excellent motivator and critical reader. Akashdeep Kundu helped me to
dot the i's and cross the t's. I'd also like to thank the reviewers of this
book, Dave Poon, Steve Workman, and Fahad Heylaal, for their critical
and valuable suggestions that made this book even better.
Last but not least, I should not forget to thank the Less core Team:
Alexis Sellier (@cloudhead), Jon Schlinkert (@jonschlinkert),
Luke Page (@lukeapage), Marcus Bointon (@Synchro),
Mária Jurčovičová (@sommeri), Matthew Dean (@matthew-dean),
Max Mikhailov (@seven-phases-max), and all the other contributors
who have made coding Less possible in the first place.
Amin Meyghani is a designer and developer currently working at HD MADE
(http://hdmade.com/), making automation tools, websites, and apps. He is also a lead
developer at Flitti (http://flitti.com/), leading the team to make next-generation
gamification apps. In addition to arts and technology, Amin has always been passionate about
teaching. He takes advantage of every opportunity to share his knowledge with the world
through books, blogs, or videos. You can find his works and blogs at http://meyghani.
com/. When Amin is not coding, he is either enjoying Persian food or mastering his Persian
calligraphy techniques.
I would like to thank my family for always supporting me and filling my life
with love and hope. I owe them this book, as they have always been there
for me even in the most difficult times.
About the Reviewers
Fahad Ibnay Heylaal is a developer who hails from Bangladesh and is currently living and
working in Amsterdam. Mostly known for being the creator of Croogo (a CMS based on the
CakePHP framework), he has progressed to become more of a frontend developer over the
last couple of years. If he isn't coding, chances are high that he will be seen cycling around
the beautiful canals of Amsterdam.
Dave Poon is a UX/UI designer, web developer, and entrepreneur based in Sydney. He
graduated from Central Queensland University with a degree in multimedia studies and a
master's degree in IT. He began his career as a freelance graphics and web designer in
1998 and currently works with web development agencies and medium-sized enterprises.
He began his love affair with Drupal afterward and worked for a variety of companies
using Drupal. Now, he is evangelizing good user experience and interaction design practices
to start-ups and enterprises.
Currently, he is a design lead at Suncorp, one of the biggest financial institutions in Australia.
He is the cofounder of Erlango (http://erlango.com), a digital product development and
design startup located in Sydney and Hong Kong that creates user-centered digital products
for clients and users. He is also the cofounder of SpikeNode (http://spikenode.com)
which is, a platform for DevOps automation.
He is the author of Drupal 7 Fields/CCK Beginner's Guide, Packt Publishing.
Also, he is the technical reviewer of the books Drupal Intranets with Open Atrium, Advanced
Express Web Application Development, and Mastering Web Application Development
with Express, all by Packt Publishing.
I would like to thank my wife, Rita, for her endless patience and support.
Without her, whatever I do would be meaningless.
I would also like to thank my father for his continued encouragement.