Rating: 0 out of 5 stars
0 ratings
Ebook1,050 pages11 hours
Less Web Development Cookbook
By Bass Jobsen and Amin Meyghani
Rating: 0 out of 5 stars
()
About this ebook
About This Book
- Create and customize your website effectively and easily with Less Version 2
- Develop more efficient code, and decrease your investment in debugging complex code
- With implementation of the latest version Less.js V2, leverage Less separately from its node and browser and employ many other improvements, such as plugin support.
- Discover the dynamism of Less and manage your projects with efficiency and accuracy
Aimed at those who want to overcome the limitations of CSS, through this book you will begin to harness the efficiency of Less by building advanced, responsive, and modern websites. Experienced web developers, students, and even web designers will find this guide very useful as they enhance their CSS skills.
Read more from Bass Jobsen
Less Web Development Essentials - Second Edition Sass and Compass Designer's Cookbook Rating: 0 out of 5 stars0 ratingsBootstrap 4 Site Blueprints Rating: 5 out of 5 stars5/5Less Web Development Essentials Rating: 0 out of 5 stars0 ratings
Related to Less Web Development Cookbook
Related ebooks
Cinder Creative Coding Cookbook Rating: 0 out of 5 stars0 ratingsHTML5 Multimedia Development Cookbook Rating: 0 out of 5 stars0 ratingsHands-On UX Design for Developers: Design, prototype, and implement compelling user experiences from scratch. Rating: 0 out of 5 stars0 ratingsUX Tools Complete Self-Assessment Guide Rating: 0 out of 5 stars0 ratingsUX Personalization Standard Requirements Rating: 0 out of 5 stars0 ratingsUsability Requirements A Complete Guide - 2021 Edition Rating: 0 out of 5 stars0 ratingsUsability and User Experience Second Edition Rating: 0 out of 5 stars0 ratingsAngular 9 UI/UX Mastery Rating: 0 out of 5 stars0 ratingsMastering UI/UX Design: Theoretical Foundations and Practical Applications Rating: 0 out of 5 stars0 ratingsWebsite wireframe Third Edition Rating: 0 out of 5 stars0 ratingsDesigning UX: Prototyping: Because Modern Design is Never Static Rating: 0 out of 5 stars0 ratingsUX and UI Design, A Case Study On Approaches To User Experience And Interface Architecture Rating: 0 out of 5 stars0 ratingsCreating Dynamic UI with Android Fragments Rating: 0 out of 5 stars0 ratingsWhen I Grow up I Want to Be a UX Designer, Dad Rating: 0 out of 5 stars0 ratingsUX Standard Requirements Rating: 0 out of 5 stars0 ratingsCreative @ Work Rating: 0 out of 5 stars0 ratingsMotion Design A Complete Guide - 2021 Edition Rating: 0 out of 5 stars0 ratingsPractical Responsive Typography Rating: 0 out of 5 stars0 ratingsProject Management For UX Design Mastery: Navigating Project Management Rating: 0 out of 5 stars0 ratingsMethodological UX Design A Complete Guide - 2020 Edition Rating: 0 out of 5 stars0 ratingsBuilding Design Systems: Unify User Experiences through a Shared Design Language Rating: 0 out of 5 stars0 ratingsMethodological UX Design A Complete Guide Rating: 0 out of 5 stars0 ratingsImmersive Content and Usability Rating: 0 out of 5 stars0 ratingsVaadin 7 UI Design By Example: Beginners Guide Rating: 0 out of 5 stars0 ratingsDesign for Safety Rating: 4 out of 5 stars4/5UX Design A Complete Guide - 2020 Edition Rating: 0 out of 5 stars0 ratingsSelling Graphic and Web Design Rating: 0 out of 5 stars0 ratingsDiagrammatic Reasoning in AI Rating: 0 out of 5 stars0 ratingsDigital product design Third Edition Rating: 0 out of 5 stars0 ratingsInstruction set architecture A Complete Guide Rating: 0 out of 5 stars0 ratings
Operating Systems For You
Excel : The Ultimate Comprehensive Step-By-Step Guide to the Basics of Excel Programming: 1 Rating: 5 out of 5 stars5/5The Mac Terminal Reference and Scripting Primer Rating: 4 out of 5 stars4/5Linux: Learn in 24 Hours Rating: 5 out of 5 stars5/5Bash Command Line Pro Tips Rating: 5 out of 5 stars5/5Ubuntu Linux Bible Rating: 0 out of 5 stars0 ratingsiPhone Unlocked Rating: 0 out of 5 stars0 ratingsLinux Command-Line Tips & Tricks Rating: 0 out of 5 stars0 ratingsHacking : The Ultimate Comprehensive Step-By-Step Guide to the Basics of Ethical Hacking Rating: 5 out of 5 stars5/5Windows 11 For Dummies Rating: 0 out of 5 stars0 ratingsCompTIA Linux+ Study Guide: Exam XK0-004 Rating: 0 out of 5 stars0 ratingsMake Your PC Stable and Fast: What Microsoft Forgot to Tell You Rating: 4 out of 5 stars4/5The Windows Command Line Beginner's Guide: Second Edition Rating: 4 out of 5 stars4/5PowerShell: A Beginner's Guide to Windows PowerShell Rating: 4 out of 5 stars4/5Windows 11 For Seniors For Dummies Rating: 0 out of 5 stars0 ratingsIBM Mainframe Security: Beyond the BasicsA Practical Guide from a z/OS and RACF Perspective Rating: 4 out of 5 stars4/5The Linux Command Line Beginner's Guide Rating: 4 out of 5 stars4/5Mac Unlocked: Everything You Need to Know to Get Cracking in macOS Big Sur Rating: 0 out of 5 stars0 ratingsExploring Windows 11: The Illustrated, Practical Guide to Using Microsoft Windows Rating: 0 out of 5 stars0 ratingsNetworking for System Administrators: IT Mastery, #5 Rating: 5 out of 5 stars5/5macOS Sonoma For Dummies Rating: 0 out of 5 stars0 ratingsWindows 11 All-in-One For Dummies Rating: 5 out of 5 stars5/5Hacking for Beginners: Mastery Guide to Learn and Practice the Basics of Computer and Cyber Security Rating: 0 out of 5 stars0 ratingsiPhone For Dummies Rating: 0 out of 5 stars0 ratingsOneNote: The Ultimate Guide on How to Use Microsoft OneNote for Getting Things Done Rating: 1 out of 5 stars1/5Operating Systems DeMYSTiFieD Rating: 0 out of 5 stars0 ratingsLinux Command Line and Shell Scripting Bible Rating: 3 out of 5 stars3/5Mastering Windows PowerShell Scripting Rating: 4 out of 5 stars4/5Linux Bible Rating: 0 out of 5 stars0 ratings
Related podcast episodes
#12 Top 8 Ways ChatGPT Can Support UX Designers in Their Workflow 0% found this document usefulNodes of Design#92: Product Maker Mindset by Sheri Panabaker 0% found this document usefulEpisode 001 - An Updated Look at "Object Oriented UX," the Article 0% found this document usefulPsychology of fonts: Why we choose the fonts we do! 0% found this document useful265 | 9 Types Of Logos For Brand Design & Strategy 0% found this document usefulEp5. From Human-Centred to Planet-Centric Design with Samuel Huber 100% found this document useful80 Selling Over $1.4 Million in Website Templates with Elizabeth McCravy 0% found this document useful073: The Unstoppable Designer with Jeff Gothelf: Jeff Gothelf tells us how to be unstoppable designers. 0% found this document useful#47 Strategizing Success: Mastering OKRs with Jeff Gothelf 0% found this document usefulSam Ladner, PhD - Getting Better Insights Through Mixed Methods Research 0% found this document usefulUX Bites: Becoming a UX Leader with David Wenk 0% found this document useful
Related articles
Create Your Own Photography Website Photography WeekUNLIMITED
Create Your Own Photography Website
Jun 25, 2020
5 min readBizarre Beginnings To Complex Success MarketingUNLIMITED
Bizarre Beginnings To Complex Success
Aug 12, 2018
7 min readBringing Better Ux To Life NZ MarketingUNLIMITED
Bringing Better Ux To Life
Sep 11, 2020
3 min readThere Is No Better Time To Be A Designer Home & DecorUNLIMITED
There Is No Better Time To Be A Designer
Oct 24, 2019
Most Singaporeans know who JJ Lin is and many can probably sing his songs. Yet, few will have heard about the singer’s vision of shaping a creative and healing space that transcends the boundaries of art, design and music – and the fact that it was S
3 min readSuperposition TechLifeUNLIMITED
Superposition
Oct 21, 2019
2 min readFive Career Tips For Graphic Designers Starting Out Weekend Argus SaturdayUNLIMITED
Five Career Tips For Graphic Designers Starting Out
Dec 5, 2020
A CAREER in graphic design can unlock a world of opportunities, placing designers in the driver’s seat of creative brand design and visual communication. The industry is ever-changing, so those who see the world through a creative lens need to stay a
2 min readGoogle, By Design Fast CompanyUNLIMITED
Google, By Design
Aug 5, 2019
1 min readIncidental Graphics: To Design in and Through Documents C MagazineUNLIMITED
Incidental Graphics: To Design in and Through Documents
Mar 10, 2019
5 min readRage Against The Machine Peppermint MagazineUNLIMITED
Rage Against The Machine
Aug 23, 2023
5 min readFinding The Way Architectural Review Asia PacificUNLIMITED
Finding The Way
Oct 10, 2018
3 min readGraphic Design C MagazineUNLIMITED
Graphic Design
Mar 10, 2019
This issue of C Magazine ushers in a new visual design courtesy of Raf Rennie. Serendipitously, for this issue’s theme, we turn the lens to graphic design. This is a field which tends to be regarded as a prosthesis to art, a facet of commerce, an eff
3 min read5 Things We Learned from Sascha Lobe AZUREUNLIMITED
5 Things We Learned from Sascha Lobe
Feb 13, 2020
1 min readThe Cost Of Creativity Crisis Writing MagazineUNLIMITED
The Cost Of Creativity Crisis
Oct 6, 2022
With inflation at a forty-year high, we’re surrounded by rising prices. And when it comes to the business of writing, the cost of creativity is increasing, too. There’s also a growing trend in the software industry to move away from one-time purchase
6 min read17 Logos We Love EntrepreneurUNLIMITED
17 Logos We Love
Apr 1, 2014
4 min readMost Useful Websites Ever! ComputeractiveUNLIMITED
Most Useful Websites Ever!
Sep 6, 2021
Chrome or Edge, Brave or Vivaldi - no matter which browser you use, the most important thing is the websites you load on them. And with 1.88 billion websites at the last count (www.snipca.com/39278), there’s an awful lot of choice. Over the next few
1 min read5 Examples of Stellar Logo Design and Packaging EntrepreneurUNLIMITED
5 Examples of Stellar Logo Design and Packaging
Apr 1, 2015
4 min readGiving Voice To Apps Business TodayUNLIMITED
Giving Voice To Apps
Apr 15, 2019
1 min readConfessions Of A Technophobe NZBusiness and ManagementUNLIMITED
Confessions Of A Technophobe
Jul 20, 2022
Welcome to our 2022 ‘Technology Edition’, in which we explore new business technologies, their creators and their application. We trust you'll find our selection of tech-related stories useful. When it comes to technology, I must admit that I’m a bit
1 min readThe Girl And The Robot Peppermint MagazineUNLIMITED
The Girl And The Robot
May 24, 2023
6 min readYves Béhar Inc.UNLIMITED
Yves Béhar
Jun 29, 2016
1 min readBlender 3.5 3D WorldUNLIMITED
Blender 3.5
Jul 11, 2023
3 min readMachine Learning Unlocks Plant Gene ‘Treasure Chest’ FuturityUNLIMITED
Machine Learning Unlocks Plant Gene ‘Treasure Chest’
Feb 13, 2019
2 min readExperiential Planning And Design Facility ManagementUNLIMITED
Experiential Planning And Design
Aug 23, 2018
5 min readLearn How the Right Payment Processor Can Drive More Sales EntrepreneurUNLIMITED
Learn How the Right Payment Processor Can Drive More Sales
Jul 1, 2018
2 min read50 Best Workplaces for Innovators Fast CompanyUNLIMITED
50 Best Workplaces for Innovators
Aug 5, 2019
1 min readGoogle Ads: Effective, A Little Frustrating, Businesses Say AppleMagazineUNLIMITED
Google Ads: Effective, A Little Frustrating, Businesses Say
Sep 20, 2019
4 min readHow To Fine-tune Your Website’s Performance NZBusiness and ManagementUNLIMITED
How To Fine-tune Your Website’s Performance
Apr 20, 2022
The past two years have cemented search engine optimisation (SEO) as perhaps the most important aspect of any business’s digital marketing strategy. If implemented properly, appearing organically on the first page of Google for the terms your target
2 min readHow To Get Personal In An Increasingly Private World NZ MarketingUNLIMITED
How To Get Personal In An Increasingly Private World
Sep 22, 2021
2 min readWho Needs Design? Inc.UNLIMITED
Who Needs Design?
Jun 1, 2017
Design is an investment, not an expense. But it’s not uncommon to hear startups claim that they value design, but are going to wait to engage a design team later: “We need design, but we just can’t afford it right now.” “Maybe after we launch our M
2 min readWhat Is Digital Fashion, And Why Is It Important? KiplingerUNLIMITED
What Is Digital Fashion, And Why Is It Important?
Jul 7, 2022
From Big Tech boardrooms to podcasts and tweets, the metaverse hype is everywhere. However, as with many emerging technologies, excitement around the expected future impact often outshines its actual readiness for mainstream adoption. But even among
4 min read
Reviews for Less Web Development Cookbook
Rating: 0 out of 5 stars
0 ratings
0 ratings0 reviews
Book preview
Less Web Development Cookbook - Bass Jobsen
Table of Contents
Less Web Development Cookbook
Credits
Foreword
About the Author
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
Sections
Getting ready
How to do it…
How it works…
There's more…
See also
Conventions
Reader feedback
Customer support
Downloading the example code
Downloading the color images of this book
Errata
Piracy
Questions
1. Getting to Grips with the Basics of Less
Introduction
Downloading, installing, and integrating less.js
Getting ready
How to do it…
How it works…
There's more…
See also
Installing the lessc compiler with npm
Getting ready
How to do it…
How it works…
There's more…
See also
Using less.js with Rhino
Getting ready
How to do it…
How it works…
There's more…
Declaring variables with Less for commonly used values
Getting ready
How to do it…
How it works…
There's more…
See also
Setting the properties of CSS styles with mixins
Getting ready
How to do it…
How it works…
There's more…
Writing more intuitive code and making inheritance clear with nested rules
Getting ready
How to do it…
How it works…
There's more…
See also
Creating complex relationships between properties
Getting ready
How to do it…
How it works…
There's more…
See also
Using the built-in functions of Less
Getting ready
How to do it…
How it works…
There's more…
See also
Using namespaces to make your code reusable and portable
Getting ready
How to do it…
How it works…
2. Debugging and Documenting Your Less Code
Introduction
Debugging your code with less.js
Getting ready
How to do it…
How it works…
There's more…
See also
Using CSS source maps to debug your code
Getting ready
How to do it…
How it works…
There's more…
See also
Using Chrome Developer Tools to debug your code
Getting ready
How to do it…
How it works…
There's more…
See also
Commenting your code in Less
Getting ready
How to do it…
How it works…
There's more…
See also
Building style guides with tdcss.js
Getting ready
How to do it…
How it works…
See also
Building style guides with StyleDocco
Getting ready
How to do it…
How it works…
There's more…
See also
3. Using Variables and Mixins
Introduction
Deriving a set of variables from a single base variable
Getting ready
How to do it…
How it works…
See also
Value escaping with the ~value
syntax
Getting ready
How to do it…
How it works…
There's more…
See also
Using variable interpolation
Getting ready
How to do it…
How it works…
There's more…
See also
Redeclaring variables based on lazy loading
Getting ready
How to do it…
How it works…
There's more…
See also
Using mixins to set properties
Getting ready
How to do it…
How it works…
There's more…
See also
Declaring a class and mixin at once
Getting ready
How to do it…
How it works…
There's more…
See also
Using selectors inside mixins
Getting ready
How to do it…
How it works…
There's more…
See also
Using parametric mixins
Getting ready
How to do it…
How it works…
There's more…
See also
4. Leveraging the Less Built-in Functions
Introduction
Converting units with the convert() function
Getting ready
How to do it…
How it works…
There's more…
See also
Using the default() function
Getting ready
How to do it…
How it works…
There's more…
See also
Embedding images with data URIs
Getting ready
How to do it
How it works…
There's more…
See also
Formatting strings
Getting ready
How to do it…
How it works…
There's more…
Replacing a text within a string
Getting ready
How to do it…
How it works…
There's more…
See also
Working with lists
Getting ready
How to do it…
How it works…
There's more…
Using mathematical functions
Getting ready
How to do it…
How it works…
There's more…
See also
Using the color() function
Getting ready
How to do it…
How it works…
There's more…
See also
Evaluating the type of a value
Getting ready
How to do it…
How it works…
There's more…
Creating color objects with RGB values
Getting ready
How to do it…
How it works…
There's more…
See also
Getting information about a color
Getting ready
How to do it…
How it works…
See also
Creating a color variant with the darken() and lighten() functions
Getting ready
How to do it…
How it works…
There's more…
Creating overlays of two colors with Less
Getting ready
How to do it…
How it works…
There's more…
See also
5. Extending and Referencing
Introduction
Referencing parent selectors with the & operator
Getting ready
How to do it…
How it works…
There's more…
See also
Referencing to the parent selector more than once
Getting ready
How to do it…
How it works…
There's more…
See also
Changing the selecting order with the & operator
Getting ready
How to do it…
How it works…
There's more…
See also
Using extend to merge selectors
Getting ready
How to do it…
How it works…
There's more…
Using extend inside a ruleset
Getting ready
How to do it…
There's more…
See also
Extending with the all keyword
Getting ready
How to do it…
How it works…
There's more…
See also
Extending with media queries
Getting ready
How to do it…
How it works…
There's more…
See also
Using extend to reduce the compiled CSS size
Getting ready
How to do it…
How it works…
There's more…
See also
Using extend as an alternative for a mixin
Getting ready
How to do it…
How it works…
6. Advanced Less Coding
Introduction
Giving your rules importance with the !important statement
Getting ready
How to do it…
How it works…
There's more…
See also
Using mixins with multiple parameters
Getting ready
How to do it…
How it works…
There's more…
See also
Using duplicate mixin names
Getting ready
How to do it…
How it works…
There's more…
See also
Building a switch to leverage argument matching
Getting ready
How to do it…
How it works…
There's more…
See also
Avoiding individual parameters to leverage the @arguments variable
Getting ready
How to do it…
How it works…
There's more…
See also
Using the @rest... variable to use mixins with a variable number of arguments
Getting ready
How to do it…
How it works…
There's more…
Using mixins as functions
Getting ready
How to do it…
How it works…
There's more…
See also
Passing rulesets to mixins
Getting ready
How to do it…
How it works…
There's more…
See also
Using mixin guards (as an alternative for the if…else statements)
Getting ready
How to do it…
How it works…
There's more…
See also
Building loops leveraging mixin guards
Getting ready
How to do it…
How it works…
There's more…
See also
Applying guards to the CSS selectors
Getting ready
How to do it…
How it works…
There's more…
Creating color contrasts with Less
Getting ready
How to do it…
How it works…
There's more…
See also
Changing the background color dynamically
Getting ready
How to do it…
How it works…
There's more…
See also
Aggregating values under a single property
Getting ready
How to do it…
How it works…
There's more…
See also
7. Leveraging Libraries with Prebuilt Mixins
Introduction
Importing and downloading prebuilt mixin libraries
Getting ready
How to do it…
How it works…
There's more…
See also
Using namespacing with prebuilt libraries
Getting ready
How to do it…
How it works…
There's more…
See also
Creating background gradients
Getting ready
How to do it…
How it works…
There's more…
See also
Building unlimited gradients with Less Hat
Getting ready
How to do it…
How it works…
There's more…
See also
Building a layout with the CSS3 flexbox module
Getting ready
How to do it…
How it works…
There's more…
See also
Getting retina ready with Preboot
Getting ready
How to do it…
How it works…
There's more…
See also
Generating font-face declarations with Clearless
Getting ready
How to do it…
How it works…
There's more…
See also
Improving your website's SEO with 3L mixins
Getting ready
How to do it…
How it works…
There's more…
See also
Leveraging sprite images with Pre
Getting ready
How to do it…
How it works…
There's more…
See also
Creating bidirectional styling without code duplication
Getting ready
How to do it…
How it works
There's more…
See also
Creating animations with animations.css
Getting ready
How to do it…
How it works...
There's more…
See also
Creating animations with More.less
Getting ready
How to do it…
How it works…
There's more…
Building semantic grids with semantic.gs
Getting ready
How to do it...
How it works...
There's more
See also
Building an alternative for fluid grids with Frameless
Getting ready
How to do it…
How it works…
See also
Building a fluid responsive grid system
Getting ready
How to do it…
How it works…
There's more…
See also
8. Building a Layout with Less
Introduction
Using CSS Reset with Less
Getting ready
How to do it...
How it works...
There's more...
Using the box-sizing property with Less
See also
Importing and organizing your Less files
Getting ready
How to do it...
How it works...
There's more...
Importing files with the @import directive
Getting ready
How to do it...
How it works...
There's more...
See also
Building a grid with grid classes
Getting ready
How to do it...
How it works...
There's more...
See also
Creating responsive grids
Getting ready
How to do it...
How it works...
There's more...
See also
Building a semantic grid with mixins
Getting ready
How to do it...
How it works...
There's more...
See also
Applying the flexbox grid on your design
Getting ready
How to do it...
How it works...
There's more...
See also
Integrating a navigation menu in the layout
Getting ready
How to do it...
How it works...
There's more...
See also
Repositioning your content
Getting ready
How to do it...
How it works...
There's more...
See also
9. Using Bootstrap with Less
Introduction
Downloading and installing Bootstrap
Getting ready
How to do it...
How it works...
There's more...
See also
Customizing Bootstrap with variables
Getting ready
How to do it...
How it works...
There's more...
See also
Making custom buttons
Getting ready
How to do it...
How it works...
There's more...
See also
Making custom panels
Getting ready
How to do it...
How it works...
There's more...
See also
Making custom navigation bars
Getting ready
How to do it...
How it works...
There's more...
See also
Extending components using :extend
Getting ready
How to do it...
How it works...
There's more...
See also
Reusing Bootstrap's grid
Getting ready
How to do it...
How it works...
There's more...
See also
Using Bootstrap classes and mixins
Getting ready
How to do it...
How it works...
There's more...
Extending Bootstrap with your own mixins
Getting ready
How to do it...
How it works...
There's more...
See also
Making custom color schemes with 1pxdeep
Getting ready
How to do it...
How it works...
There's more...
See also
Autoprefixing Bootstrap's CSS
Getting ready
How to do it...
How it works...
There's more...
See also
10. Less and WordPress
Introduction
Installing WordPress
Getting Ready
How to do it…
How it works
There's more…
See also
Developing your WordPress theme with Less
Getting ready
How to do it…
How it works…
There's more…
See also
Integrating Bootstrap into your WordPress theme
Getting ready
How to do it…
How it works…
There's more…
See also
Using Semantic UI to theme your WordPress website
Getting Ready
How to do it…
How it works…
There's more…
See also
Customizing Roots.io with Less
Getting ready
How to do it…
How it works…
There's more…
See also
Building a WordPress website with the JBST theme
Getting ready
How to do it…
How it works…
There's more…
See also
11. Compiling Less Real Time for Development Using Grunt
Introduction
Installing Node and Grunt
Getting ready
How to do it...
How it works…
There's more...
Installing Grunt plugins
Getting ready
How to do it…
How it works...
There's more...
Utilizing the Gruntfile.js file
Getting ready
How to do it…
How it works...
Loading Grunt tasks
Getting ready
How to do it…
How it works...
Adding a configuration definition for a plugin
Getting ready
How to do it…
How it works...
See also
Adding the Less compiler task
Getting ready
How to do it…
How it works...
There's more...
Creating CSS source maps with the Less compiler task
Getting ready
How to do it…
How it works...
There's more...
Cleaning and minimizing your code
Getting ready
How to do it…
There's more...
Adding the watch task
Getting ready
How to do it…
How it works...
There's more...
Adding the connect and open task
Getting ready
How to do it…
How it works…
Adding the concurrent task
Getting ready
How to do it…
How it works…
Analyzing your code with CSS Lint
Getting ready
How to do it…
How it works...
There's more...
Removing unused CSS using Grunt
Getting ready
How to do it…
How it works...
See also
Compiling style guides with Grunt
Getting ready
How to do it…
Automatically prefix your code with Grunt
Getting ready
How to do it…
How it works…
There's more...
Installing the Grunt LiveReload plugin
Getting ready
How to do it…
How it works…
Index
Less Web Development Cookbook
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
Bass Jobsen
Amin Meyghani
Reviewers
Fahad Ibnay Heylaal
Dave Poon
Steve Workman
Commissioning Editor
Ashwin Nair
Acquisition Editors
Richard Brookes-Bland
Richard Harvey
Content Development Editor
Akashdeep Kundu
Technical Editors
Shashank Desai
Novina Kewalramani
Mrunmayee Patil
Rikita Poojari
Copy Editors
Gladson Monteiro
Sarang Chari
Project Coordinator
Milton Dsouza
Proofreaders
Lauren E. Harkins
Paul Hindle
Amy Johnson
Indexer
Monica Ajmera Mehta
Production Coordinator
Conidon Miranda
Cover Work
Conidon Miranda
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.
L uke 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.
Steve Workman is a frontend web engineer and an organizer of the London Web Standards group. He is a champion at creating high-performance sites with the latest web technologies and making developers' lives easier with tools and new languages.
I'd like to thank the whole Less community for creating this great language and my wife, Emily, for always being there.
www.PacktPub.com
Support files, eBooks, discount offers, and more
For support files and downloads related to your book, please visit www.PacktPub.com.
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.
https://www2.packtpub.com/books/subscription/packtlib
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read 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 a 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 9 entirely free books. Simply use your login credentials for immediate access.
Preface
CSS has dramatically changed since its very first emergence, and it is continuing to evolve. In particular, the emergence of CSS3 has added many new features to CSS, including gradients and animations. Along with this are many new opportunities to build websites using only CSS and HTML. Developers are no longer dependent on techniques such as Flash and other tricks to build interactive and fancy websites.
CSS3 has played an integral role in building responsive websites, where CSS media queries have made it possible to apply some styles dependent on the width of the browser's viewport only.
Despite this improvement, CSS is inherently, at its core, a simple style sheet language that lacks some fundamental programming features such as variables, functions, and operators. The need for more maintainable CSS, especially with the explosion of complex web apps, has made CSS preprocessors such as Less a necessity in enabling us to write more readable and manageable versions without breaking cross-browser compatibilities.
Although Less cannot magically change CSS, it certainly provides us with the tools to help structure, modularize, debug, and maintain small or large CSS projects more easily. By extending CSS with variables, functions, and mixins; nesting CSS selectors; and allowing you to follow the don't repeat yourself (DRY) principle of software programming, Less behaves more like a programming language in a way that CSS never was. Despite some of the programming characteristics of Less, you should not be put off by this; by being built as a superset of CSS, its features are implemented in the CSS way and it follows W3C standards where possible. Designers and developers who are familiar with CSS will find coding in Less very natural. Because Less fixes these shortcomings of CSS, the best time to start using Less is now!
In this book, you are going to explore the Less preprocessor, most of its core, and some of its less frequently used features. Through these very easy-to-follow and practical recipes, you will learn how to write more maintainable and scalable CSS. You will explore making components and structures through reusable mixins and extends. We will also learn about frameworks that are based on Less, exploring their features and how they can be seamlessly integrated into your own projects. In addition, you will learn how to use prebuilt mixin libraries for your current or upcoming projects. Finally, you will look at debugging techniques that have been available for other preprocessors and are now available to Less through source maps. By the end of this book, you will have an extended knowledge and a good understanding of the power of Less, its libraries, and the important features it has to offer to make writing your CSS more natural, productive, and intuitive.
What this book covers
Chapter 1, Getting to Grips with the Basics of Less, shows you how to install the Less compiler for client- and server-side usage. After the installation, you will be shown how to make use of the basic features of Less: using variables, mixins, operations, built-in functions, and namespaces; how to nest your rules will also be on the menu here!
Chapter 2, Debugging and Documenting Your Less Code, shows you how to debug your Less code using your CSS source maps and browser developer tools. You will also be introduced to style guides and learn how to properly comment your code.
Chapter 3, Using Variables and Mixins, covers the advanced usage of variables and mixins in Less. After reading this chapter, you will
Enjoying the preview?
Page 1 of 1