The Intro Slide
• Me: Nick Hehr
• Job: Front-End Dev & Product Designer
• Interests: Sass, JavaScript, Sketch
Slide 3
Slide 3 text
Neat
The Topic
Slide 4
Slide 4 text
The Points
• Origins
• Why It’s Awesome For You
• Why It Might Not Be Awesome For You
• Using Neat
• The Future
Slide 5
Slide 5 text
Origins
Slide 6
Slide 6 text
Bourbon
Thoughtbot Trifecta
Slide 7
Slide 7 text
Bitters
Thoughtbot Trifecta
Slide 8
Slide 8 text
Grids Are Pretty Great
• Separates layout concerns from visual styles
• Gives control over layout as a whole
• Keeps the design consistent
Slide 9
Slide 9 text
But It Wasn’t First…
Slide 10
Slide 10 text
– neat.bourbon.io
“Because we are not happy with other
frameworks. We built Neat with the aim of
promoting clean and semantic markup”
Slide 11
Slide 11 text
Sounds Pretty Nice!
Slide 12
Slide 12 text
Why It’s Awesome
For You
Slide 13
Slide 13 text
Uber Lightweight
Slide 14
Slide 14 text
Neat Docs
Nothing to it
Slide 15
Slide 15 text
Super Semantic
Slide 16
Slide 16 text
Litter-Free HTML
Just look at that Sass
Slide 17
Slide 17 text
Don’t Forget Flexible
Slide 18
Slide 18 text
Customize With Variables
Make it your own
Slide 19
Slide 19 text
Easy to Debug
Slide 20
Slide 20 text
Just Show The Grid
No more guess and checks
Slide 21
Slide 21 text
Why It Might Not Be
Awesome For You
Slide 22
Slide 22 text
Dependent
Slide 23
Slide 23 text
Relies on Bourbon
But that’s not so bad
Slide 24
Slide 24 text
Anti-Bootstrappy
Slide 25
Slide 25 text
Pick and Choose
A simple solution
Slide 26
Slide 26 text
Using Neat
Slide 27
Slide 27 text
The Basics
The quickest way to start
Slide 28
Slide 28 text
http://sassmeister.com/gist/
ad143f982510f5297e77
Slide 29
Slide 29 text
How about some real-
world examples?
Slide 30
Slide 30 text
Classic Dribbble
Grid of Blocks
Slide 31
Slide 31 text
http://sassmeister.com/gist/
2c3ba40d182cfa846440
Slide 32
Slide 32 text
Twitter Cards
The epitome of cards
Slide 33
Slide 33 text
http://sassmeister.com/gist/
328bfd78bf9a423f70de
Slide 34
Slide 34 text
The Future
Slide 35
Slide 35 text
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
Slide 36
Slide 36 text
Current Support
• Version 1.6.0 (with 1.7.0 coming soon)
• LibSass with v1.5.1
• Installed Through
• RubyGems - neat
• Bower - neat