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

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

Introduction to LESS

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

Introduction to LESS

LESS Workflow with Bootstrap

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

Compiling Bootstrap

Semantic HTML markup with Bootstrap

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>

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); }

Semantic Bootstrap Markup

Advanced Applications

Advanced Applications Variables Vendor Mixins Utility Mixins

LESS + Bootstrap Advanced Applications