1. 06 | Using Bootstrap with Less
Jon Galloway | Technical Evangelist
Christopher Harrison | Content Developer

2. Outline Introduction to LESS LESS workflow with Bootstrap
Semantic HTML markup with Bootstrap
Advanced applications
Variables
Vendor Mixins
Utility Mixins

3. Introduction to LESS

4. LESS = CSS + Variables + Functions + Mixins
.a, #b { color: red; } .mixin-class { .a(); .mixin-id { #b();

5. Introduction to LESS

6. LESS Workflow with Bootstrap

7. Compilation Options Compiling with Grunt Compiling with Visual Studio
Compiling via ASP.NET Bundling

8. Compiling Bootstrap

9. Semantic HTML markup with Bootstrap

11. The problem: Bootstrap clutters up your HTML
What we want:
<div class="new-albums"></div>
But with Bootstrap we get:
<div class="new-albums col-sm-3 col-md-4 col-lg-6"></div>

12. The solution: LESS Mixins
HTML:
<div class="new-albums"></div>
LESS:
.new-albums {
.make-sm-column(3);
.make-md-column(4);
.make-lg-column(6); }

13. Semantic Bootstrap Markup

14. Advanced Applications

15. Advanced Applications
Variables
Vendor Mixins
Utility Mixins

16. LESS + Bootstrap Advanced Applications