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.

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