You might not need a CSS framework

@ladybenko

belen@mozilla.com

UX frameworks

• A collection of HTML, CSS and (sometimes) JS pieces to put together a website
• Most popular: Bootstrap, Foundation, etc.
• They provide a grid, UX components, typography, etc.
• Ideally you can just copy&paste UX bits

Why people use them?

• "It's quicker" belief
• "It's best practice" belief
• A design already implemented for you

Some of the problems…

• Unsemantic, bloated HTML code
• High % of CSS rules not being used
• Hard to override styles (they are too specific)
• Some questionable choices made for you

Layouts

Today: meet flexbox!

• It is easier to create layouts
• Holy Grail layout, vertical alignment, sticky footer… solved!
• Beware: it's 1-dimensional

Holy Grail with flexbox

<header class="main-header">Header</header>
<div class="row">
  <aside class="primary-sidebar">Sidebar (left)</aside>
  <main class="content">Main content goes here</main>
  <aside class="secondary-sidebar">Sidebar (right)</aside>
</div>
<footer class="main-footer">Footer</footer>

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.row { flex: 1 1 auto; }

.main-header, .main-footer {
  flex: 0 0 auto;
}

.row { display: flex; }

.primary-sidebar, .secondary-sidebar {
  flex: 0 0 auto;
  width: 250px;
}

.content {
  flex: 1 1 auto;
  min-width: 400px;
}

Can I use it?

How to use it?

• "Using CSS flexible boxes" at MDN
• Flexbox playground

Tomorrow: grid!

• Similar flexbox, but 2-dimensional
• It allows you to fully define a grid to position your elements in

Holy Grail with grid

<header class="main-header">Header</header>
<main class="content">Main content goes here</main>
<aside class="primary-sidebar">Sidebar (left)</aside>
<aside class="secondary-sidebar">Sidebar (right)</aside>
<footer class="main-footer">Footer</footer>

body {
  height: 100vh;
  display: grid;
  grid-template-columns: 250px 1fr 250px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "h h h"
    "l c r"
    "f f f";
}

.main-header { grid-area: h; }
.main-footer { grid-area: f; }
.primary-sidebar { grid-area: l; }
.secondary-sidebar { grid-area: r; }
.content { grid-area: c; }

How to use it?

• Lots of snippets in Grid by example
• Article at Hacks blog
• Start to tinker with it now in Firefox Nightly / Dev Edition

If you just need a grid

You don't need a whole UX framework

UI components

If you have a custom design…

Wouldn't it be better to implement it from scratch?

• You don't need to overwrite existing CSS
• You won't have unused CSS
• You will be aware of all the values being used (i.e. margins, etc.)

If you just need a few UI components…

• Does it make sense to add a whole framework for this?
• Can you just grab the components you need?
• Can you use a single, 3rd-party component?

If you have a big, complex project

• You are better off crafting your own style guide
• Must-read article by Anna Debenham

Thanks!

Questions?