Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Build a Better Bootstrap (Øredev 2014)

timgthomas
November 05, 2014

Build a Better Bootstrap (Øredev 2014)

Need the power of Bootstrap without the bulk? Come see how to build your own CSS framework! We'll start with a solid CSS foundation, add on some component scaffolding for your most common use cases, and top it off by discussing how to share your new web framework with your team. Grab your hard hat and come learn how to build a better Bootstrap!

timgthomas

November 05, 2014
Tweet

More Decks by timgthomas

Other Decks in Design

Transcript

  1. Challenge: Complex Layouts Content Content Container .container { display: flex;

    flex-direction: column; } .content-3 { order: 2; } .content-2 { order: 3; } Content Content
  2. Standard API: Column Definitions with CSS .column { box-sizing: border-box;

    } .col-md-1 { width: 10%; } .col-md-2 { width: 20%; } .col-md-3 { width: 30%; } .col-md-4 { width: 40%; } .col-md-5 { width: 50%; } .col-md-6 { width: 60%; } .col-md-7 { width: 70%; } .col-md-8 { width: 80%; } .col-md-9 { width: 90%; }
  3. Standard API: Column Definitions with SASS $columns: 10; @for $col

    from 1 through ($columns - 1) { .col-md-#{$col} { width: (100% / $columns) * $col; } }