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

General Discussion

Posted by Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Looking for Feedback!

Hi, I have started to create a grid system that is generated through Sass that allows you to set the sizes and columns and it will produce the grid for you. See full read me on github link below. You will need Sass installed to try it out but would be very grateful for feedback good/bad as long as its constructive. Optional variables are there for styling elements before you start, with brand colors and other tweaks.

Full documentation is to follow but is mainly just a personal project to keep me learning.

github link

Some bugs are know about but as the read me states its less than 2 days old and just looking for other opinions for now. Maybe some collaboration if anyone thinks they could benefit from it.

Merry Christmas

2 Answers

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

Hi Adam, sounds like an interesting project. I'll have a look over it and get back to you.

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Ok thanks, its very basic atm but i think it has potential given the right amount of care, just noticed doing a mock up now the container has a blue background on the github version will update later so just change to none if you get it before then.

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

The only concern I have is the output CSS, see my comments in the code:

/* you output this */

.grid-1 {
  width: 5.10417em;
  padding: 0 0.625em;
  display: inline-block;
  box-sizing: border-box;
  float: left;
  min-height: 50px;
}

.grid-2 {
  width: 10.20833em;
  padding: 0 0.625em;
  display: inline-block;
  box-sizing: border-box;
  float: left;
  min-height: 50px;
}

.grid-3 {
  width: 15.3125em;
  padding: 0 0.625em;
  display: inline-block;
  box-sizing: border-box;
  float: left;
  min-height: 50px;
}

/* etc through however many columns */

/* the following properties are shared in all columns */

.grid-x {
  display: inline-block;
  box-sizing: border-box;
  float: left;
  min-height: 50px;
}

/* it would be neater to end up with something like: */

.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12 {
  display: inline-block;
  box-sizing: border-box;
  float: left;
  min-height: 50px;
}

.grid-1 {
  width: 5.10417em;
  padding: 0 0.625em;
}

.grid-2 {
  width: 10.20833em;
  padding: 0 0.625em;
}

/* etc */

I'm not really sure if this is a "problem" or not, the .scss files are easy to follow and well commented.

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Yeah this is something I was looking at myself. I will look at implementing these changes in the scss files and try to get it to output cleaner. Would you like to get involved in working on this to see what we can do, good working experience and practice.

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

Sure, I've done the Sass course recently and was wanting to actually contribute to something on Git rather than always watching. I was planning on doing the Treehouse Git course over the next few days.

I think we could use extends to help with the neatening everything.

e.g. I created a .grid class to hold the common styles and then used an extend to use those styles for all the grids that are created.

/* Sass */

//basic grid styles
.grid {
    display: inline-block;
    box-sizing: border-box;
    float: left;
    min-height: 50px; // For testing purposes to give some space.
}


// Creates the column classes
@for $i from 1 through $columns {
    .grid-#{$i} {
        @extend .grid;
        width: $singleColumn * $i;
        padding: 0 $gutterEm;
    }
}


/* outputted css */

.grid, .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 {
  display: inline-block;
  box-sizing: border-box;
  float: left;
  min-height: 50px;
}

.grid-1 {
  width: 5.10417em;
  padding: 0 0.625em;
}

.grid-2 {
  width: 10.20833em;
  padding: 0 0.625em;
}

/* etc */
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Yeah thats wicked. looks neater and fits in with DRY! Will add you to I have added you as a collaborator on the git page