Less Web Development Essentials. Use CSS preprocessing to streamline the development and maintenance of your web applications

Less Web Development Essentials. Use CSS preprocessing to streamline the development and maintenance of your web applications - Opis

Less is a CSS preprocessor that essentially improves the functionality of simple CSS with the addition of several features. The book begins by teaching you how Less facilitates the process of web development. You will quickly then move on to actually creating your first layout using Less and compiling your very first Less code.Next, you will learn about variables and mixins and how they will help in building robust CSS code. In addition, you'll learn how to keep your code clean and test it by using style guides. We will then move on to the concept of Bootstrapping and the strength of using Less with Twitter Bootstrap. Going one step further, you will be able to customize Twitter's Bootstrap 3 using Less.Finally, you will learn how to integrate Less into your WordPress themes and explore other web apps that use Less. By leveraging this powerful CSS preprocessor, you will be able to consistently produce amazing web applications while making CSS code development an enjoyable experience. Spis treści:
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 (...) więcej 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
Chromes 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 O autorze: Bass Jobsen, tworzy strony WWW od 1995 roku i używał przy tym chyba wszystkich możliwych języków programowania. Zawsze wypracowuje jak najbardziej funkcjonalny interfejs użytkownika. Właściwie codziennie korzysta z Less, w tym także przy tworzeniu motywów WordPressa, a przede wszystkim w pracy nad wspaniałym projektem StreetArt.nl. Jest znany z gotowości do dzielenia się swoją wiedzą z mniej doświadczonymi kolegami. mniej