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

Neat - A Semantic Grid Framework

HipsterBrown
September 16, 2014

Neat - A Semantic Grid Framework

My slides from Battle of the Grids Part 1

Some speaker notes can be found here:
http://cl.ly/0c0Q023f0z2U

HipsterBrown

September 16, 2014
Tweet

More Decks by HipsterBrown

Other Decks in Design

Transcript

  1. Neat
    A Semantic Grid Framework

    View Slide

  2. The Intro Slide
    • Me: Nick Hehr
    • Job: Front-End Dev & Product Designer
    • Interests: Sass, JavaScript, Sketch

    View Slide

  3. Neat
    The Topic

    View Slide

  4. The Points
    • Origins
    • Why It’s Awesome For You
    • Why It Might Not Be Awesome For You
    • Using Neat
    • The Future

    View Slide

  5. Origins

    View Slide

  6. Bourbon
    Thoughtbot Trifecta

    View Slide

  7. Bitters
    Thoughtbot Trifecta

    View Slide

  8. Grids Are Pretty Great
    • Separates layout concerns from visual styles
    • Gives control over layout as a whole
    • Keeps the design consistent

    View Slide

  9. But It Wasn’t First…

    View Slide

  10. – neat.bourbon.io
    “Because we are not happy with other
    frameworks. We built Neat with the aim of
    promoting clean and semantic markup”

    View Slide

  11. Sounds Pretty Nice!

    View Slide

  12. Why It’s Awesome
    For You

    View Slide

  13. Uber Lightweight

    View Slide

  14. Neat Docs
    Nothing to it

    View Slide

  15. Super Semantic

    View Slide

  16. Litter-Free HTML
    Just look at that Sass

    View Slide

  17. Don’t Forget Flexible

    View Slide

  18. Customize With Variables
    Make it your own

    View Slide

  19. Easy to Debug

    View Slide

  20. Just Show The Grid
    No more guess and checks

    View Slide

  21. Why It Might Not Be
    Awesome For You

    View Slide

  22. Dependent

    View Slide

  23. Relies on Bourbon
    But that’s not so bad

    View Slide

  24. Anti-Bootstrappy

    View Slide

  25. Pick and Choose
    A simple solution

    View Slide

  26. Using Neat

    View Slide

  27. The Basics
    The quickest way to start

    View Slide

  28. http://sassmeister.com/gist/
    ad143f982510f5297e77

    View Slide

  29. How about some real-
    world examples?

    View Slide

  30. Classic Dribbble
    Grid of Blocks

    View Slide

  31. http://sassmeister.com/gist/
    2c3ba40d182cfa846440

    View Slide

  32. Twitter Cards
    The epitome of cards

    View Slide

  33. http://sassmeister.com/gist/
    328bfd78bf9a423f70de

    View Slide

  34. The Future

    View Slide

  35. What’s Next For Neat?
    • Official Flexbox Support
    • Fractions in @span-columns
    • Target multiple breakpoints in @media
    • Merge @span-columns & @omega
    • Support for multiple grids on one page

    View Slide

  36. Current Support
    • Version 1.6.0 (with 1.7.0 coming soon)
    • LibSass with v1.5.1
    • Installed Through
    • RubyGems - neat
    • Bower - neat

    View Slide

  37. Thank You

    View Slide

  38. Links
    • http://neat.bourbon.io
    • http://bourbon.io
    • http://bitters.bourbon.io
    • http://refills.bourbon.io
    • https://github.com/thoughtbot/neat

    View Slide