2014
Lynda
Jen Kramer
1:36
English
Do more with LESS in Bootstrap. In this course, Jen Kramer shows you how to customize the look and feel of your Bootstrap site with LESS CSS, as well as LESS mixins and Bootstap's own customization screens. You'll learn how to configure Prepros, a LESS compiler; work within the LESS file structure; and start modifying fonts, color, spacing, and more with the variables.less file. Then LESS's mixins will allow you to make advanced customizations like custom buttons and tab styles. Just press Play to start learning.
Introduction
Welcome
Using the exercise files
Working with challenges
What are Bootstrap and LESS?
A few words on LESS, Sass, CSS preprocessors, and workflows
1. Getting Started
Downloading and installing Sublime Text 2
Downloading and installing Bootstrap
Download and install jQuery
Configuring and examining the starting Bootstrap website
Customizing Bootstrap using Bootstrap's customization screen
2. Working with LESS
Downloading, installing, and configuring the Prepros LESS compiler
Examining the LESS file structure
Compiling LESS with Prepros
Converting custom.css to LESS and compiling
3. Simple LESS Customizations
Understanding and changing variables with variables.less
Working with Google Fonts and LESS
Styling the JumboTron
Styling the nav bar
Challenge: Styling the panels
Solution: Styling the panels
4. Advanced LESS Customizations
Understanding mixins
Creating a custom button with mixins
Styling the tabs
Challenge: Creating different-sized buttons with mixins
Solution: Creating different-sized buttons with mixins
Conclusion
Minifying the CSS and launching your site
Next steps
Download File Size:420.14 MB