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

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