Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Adam Sackfield
Courses Plus Student 19,663 PointsSassy Grids
Good morning,
I know there are thousands of grid systems out there but this is something I want to do myself for improve skills and pass some time on this rainy Saturday. What I am look at doing is creating a sass file where I can input container size, column count, gutter size and margin. Then use a variety of mixins and @for to create grid classes. Im a liitle stumped and could do with some guidance or a nod to the right direction. Here is a link to the file. Its a bit bare but my first question is how big is this task and also. I have it generating the classes but i need to find out how to increment the width on each grid number.
Not looking for this to be done for me just some advice and maybe a point to some resources that will help or other grids built with sass that i can reverse engineer and tweak for my use.
Thanks
2 Answers
Kevin Granger
20,332 Pointshi Adam, It's a good exercice :)
You should take a look to http://compass-style.org/reference/blueprint/grid/ and https://github.com/chriseppstein/compass/blob/stable/frameworks/blueprint/stylesheets/blueprint/_grid.scss
Adam Sackfield
Courses Plus Student 19,663 PointsUpdate:
Got started on this and have the basic functions down i think looking for a new set of eyes to preview it and give me some feedback download link to .scss file here
Up to now its got no responsiveness to it just started really and wanted to get some feedback before i progress. Atm it takes in the variables you input at the top in PX for container size, number of columns you desire, margin, gutter and asks you to set the base font size too.
It will then create the container center it and then creates the grids and applies padding (not got to margin on first and last child yet) changes display and floats them left.
Any feedback would be great good or bad.
Thanks in advance people
Adam Sackfield
Courses Plus Student 19,663 PointsAdam Sackfield
Courses Plus Student 19,663 PointsThanks for this Kevin. Yeah i thought if i could get my head around making a responsive grid then i can do anything.:)