Pink() Notes - Breakpoint


2012-08-02 by Les James (Meetup)

Pain Points

  • Fluid Layouts
  • Floats
  • Media Queries
  • Internet Explorer
  • something else was mentioned here...
  • Additional Markup
  • Grid Complexity
  • Many Different Resolutions
  • Print
  • Teams

Breakpoint Philosophies

  • fluid and fixed
    • fluid at low resolutions
    • snaps into one or more fixed layouts at higher resolutions
  • columns
    • once you go fixed, columns remain the same size
    • frameless grid - more screen equals more columns, but columns stay the same width
  • mobile first
    • start designing for low resolution devices first, then work up
  • uses inline-block to work magic
    • griddle
    • everything works nicer (than using float)
  • classes
    • non-semantic class names suck (.col-6 et cetera)
    • only three class names for grids (wrapper, grid, grid-cell)
  • stays out of your way
    • doesn't limit design, tries to get out of the way
    • tries to not make every site built with it look the same
  • internet explorer
    • non-javascript fallback
  • media query management
    • breakpoint calculates and writes all media queries for you
  • play nice with javascript
    • hooks for javascript to tell javascript which layout is active for responsive images

Class Names

  • .wrapper
    • snaps into fixed width layouts
    • centers itself on page
  • .grid
    • 100% fluid inside .wrapper
    • uses negative letter-spacing to remove extra space between .grid-cell
  • .grid-cell
    • must be only child of .grid (to compensate for negative letter-spacing)
  • .responsive-image
    • %img.responsive-image{:src => 'data-uri for 1x1 transparent gif', :data-mobile => '', :data-desktop => ''}
    • use %noscript for non-javascript fallback
    • use 1x1 transparent gif as initial source; data-uri may work to prevent additional requests


// _setup.sass
// internet explorer gets the nine column layout
//$ie-support: 9
// _structure.sass
@include breakpoint(6)
// $label sets font-family on %head (used for responsive image feature)
@include breakpoint(9, $label: desktop)
    // percentage based width
    width: fluid(6)
    // em based width
    //width: fixed(6)
    width: fluid(3)
    width: fluid(3)