Hey there! We're thoughtbot, a design and development consultancy that brings your digital product ideas to life. We also love to share what we learn.
This coding exercise comes from Upcase, the online learning platform we run. It's part of the Bourbon Smash course and is just one small sample of all the great material available on Upcase, so be sure to visit and check out the rest.
Use Neat to update our photo gallery to have a responsive grid.
To start, you'll want to clone and run the setup script for the repo
git clone git@github.com:thoughtbot-upcase-exercises/neat-grids.git
cd neat-grids
bin/setup
You can run the provided code with:
bundle exec middleman server
Your goal is to implement a responsive grid, approximately matching the provided example. You'll need to define your grid settings, use Neat's mixins to establish the grid, and use media queries to alter the layout for various device widths. (You can use 1200px for the overall max-width, and 700px and 900px for the break points)
Note You should not need to alter the provided HTML to implement the grid (how nice and semantic!)
Be sure to revisit the Neat Introduction video in the Bourbon Smash trail, as well as the Neat docs for reference. You may also want to check out the Weekly Iteration episode on responsive design.
Check out the featured solution branch to see the approach we recommend for this exercise.
If you find yourself stuck, be sure to check out the associated Upcase Forum discussion for this exercise to see what other folks have said.
When you've finished the exercise, head on back to the Bourbon Smash course to find the next exercise, or explore any of the other great content on Upcase.
neat-grids is Copyright © 2015-2018 thoughtbot, inc. It is free software, and may be redistributed under the terms specified in the LICENSE file.
This exercise is maintained and funded by thoughtbot, inc.
The names and logos for Upcase and thoughtbot are registered trademarks of thoughtbot, inc.