Introducing Bourbon Neat

Def5902fe210ca1cb5152621f1effc89?s=47 thoughtbot
October 24, 2012

Introducing Bourbon Neat

Deck used originally during the Seattle Sass Meetup in October 2012 to introduce Neat, a semantic grid framework built on top of Sass and Bourbon. Some slides have been slightly modified to provide more context for the online viewer.

Def5902fe210ca1cb5152621f1effc89?s=128

thoughtbot

October 24, 2012
Tweet

Transcript

  1. Bourbon NEAT by Reda Lemeden @kaishin Monday, November 5, 12

  2. We make beautiful Rails and mobile apps, with offices in

    Boston, San Francisco and Stockholm. Hi, we’re... Monday, November 5, 12
  3. 1999: Macromedia Flash and Adobe Photoshop 2012: Sassy grid frameworks.

    My name is... Reda Lemeden Monday, November 5, 12
  4. Grids A staple of modern Web Design Monday, November 5,

    12
  5. Grid frameworks everywhere Grid Frameworks Monday, November 5, 12

  6. Monday, November 5, 12

  7. Do we need more grids? Monday, November 5, 12

  8. No, we need better grids. Short answer... Monday, November 5,

    12
  9. We need grids that don't pollute our markup with presentational

    classes and extra wrapping divs. <div class="eight columns"> <div class="container"> <article class="span4 offset2 omfg7"> <div class="row-fluid"> r-fluid"> <aside class="container-responsive"> <span class="container-fluid"> /* <-- Seriously? */ Monday, November 5, 12
  10. <div class="eight columns"> <div class="span8"> <div class="semantic-class"> We need grids

    that are semantic. Monday, November 5, 12
  11. We need grids that are content-agnostic. Monday, November 5, 12

  12. We need grids that strike the right balance between ease

    of use... Monday, November 5, 12
  13. ...and power. Monday, November 5, 12

  14. Susy container() span-columns() omega() nth-omega() at-breakpoint() layout() set-container-width() with-grid-settings() border-box-sizing()

    prefix() suffix() pad() pre() post() squish() push() pull() reset-columns() remove-omega() remove-nth-omega() susy-grid-background() columns() gutter() space() Foundation outerRow() innerRow() innerRow(collapse) column(#) column(#, center) column(#, collapse) offsetBy(#) push(#) pull(#) mobileRow() mobileColumn(#) mobilePush(#) mobilePull(#) Neat outer-container() span-columns() row() shift() pad() omega() nth-omega() media() Keep it simple, stupid! Monday, November 5, 12
  15. Developers ❤ Bootstrap <div class="row"> <div class="span9"> Level 1 column

    <div class="row"> <div class="span6">Level 2</div> <div class="span3">Level 2</div> </div> </div> </div> Monday, November 5, 12
  16. FUUUUUUUUUUUUUUU <div class="row"> <div class="span9"> Level 1 column <div class="row">

    <div class="span6">Level 2</div> <div class="span3">Level 2</div> </div> </div> </div> Monday, November 5, 12
  17. <div class="row"> <div class="span9"> Level 1 column <div class="row"> <div

    class="span6">Level 2</div> <div class="span3">Level 2</div> </div> </div> </div> <section class="recipe"> <div class="content"> Level 1 column <aside>Level 2</aside> <article>Level 2</article> </div> </section> Developer Designer Monday, November 5, 12
  18. We wanted to to make this transition less painful. Monday,

    November 5, 12
  19. Demo Monday, November 5, 12

  20. Basic Monday, November 5, 12

  21. Nesting Monday, November 5, 12

  22. Automatic Rows Monday, November 5, 12

  23. @include omega(); // aka FIN Monday, November 5, 12