My slides from Battle of the Grids Part 1
Some speaker notes can be found here: http://cl.ly/0c0Q023f0z2U
NeatA Semantic Grid Framework
View Slide
The Intro Slide• Me: Nick Hehr• Job: Front-End Dev & Product Designer• Interests: Sass, JavaScript, Sketch
NeatThe Topic
The Points• Origins• Why It’s Awesome For You• Why It Might Not Be Awesome For You• Using Neat• The Future
Origins
BourbonThoughtbot Trifecta
BittersThoughtbot Trifecta
Grids Are Pretty Great• Separates layout concerns from visual styles• Gives control over layout as a whole• Keeps the design consistent
But It Wasn’t First…
– neat.bourbon.io“Because we are not happy with otherframeworks. We built Neat with the aim ofpromoting clean and semantic markup”
Sounds Pretty Nice!
Why It’s AwesomeFor You
Uber Lightweight
Neat DocsNothing to it
Super Semantic
Litter-Free HTMLJust look at that Sass
Don’t Forget Flexible
Customize With VariablesMake it your own
Easy to Debug
Just Show The GridNo more guess and checks
Why It Might Not BeAwesome For You
Dependent
Relies on BourbonBut that’s not so bad
Anti-Bootstrappy
Pick and ChooseA simple solution
Using Neat
The BasicsThe quickest way to start
http://sassmeister.com/gist/ad143f982510f5297e77
How about some real-world examples?
Classic DribbbleGrid of Blocks
http://sassmeister.com/gist/2c3ba40d182cfa846440
Twitter CardsThe epitome of cards
http://sassmeister.com/gist/328bfd78bf9a423f70de
The Future
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
Current Support• Version 1.6.0 (with 1.7.0 coming soon)• LibSass with v1.5.1• Installed Through• RubyGems - neat• Bower - neat
Thank You
Links• http://neat.bourbon.io• http://bourbon.io• http://bitters.bourbon.io• http://refills.bourbon.io• https://github.com/thoughtbot/neat