SASS grid system improvements

Question

I've got this own made grid system made in SASS:

@import "../mixins/cross-browser-elements/box";
$columns: 12 !default;
$gutter-width-px: 20px !default;
@function calculate-column-width($index) {
 @return percentage($index / $columns);
}
.row {
 overflow: hidden;
 max-width: 100%;
 .column {
 float: left;
 min-height: 1px;
 padding-left: ($gutter-width-px / 2);
 padding-right: ($gutter-width-px / 2);
 @include box-sizing(border-box);
 &:first-child {
 padding-left: 0;
 }
 &:last-child {
 padding-right: 0;
 }
 @for $index from 1 through $columns {
 &.size-#{$index} {
 width: calculate-column-width($index);
 }
 }
 }
}

It looks pretty good in my opinion, it works and has a working padding on each element.

The thing I worry about is when I want to make it responsive. Do I have to go in my stylesheet and give every column a width of 100% when it's below a certain screen size with the @media selector?

My HTML markup looks like this:

 <div class="row">
 <div class="column size-10"><p>column-size-10</p></div>
 <div class="column size-2"><p>column-size-2</p></div>
 </div>
 <div class="row">
 <div class="column size-1"><p>column-size-1</p></div>
 <div class="column size-1"><p>column-size-1</p></div>
 <div class="column size-1"><p>column-size-1</p></div>
 <div class="column size-1"><p>column-size-1</p></div>
 <div class="column size-1"><p>column-size-1</p></div>
 <div class="column size-1"><p>column-size-1</p></div>
 <div class="column size-1"><p>column-size-1</p></div>
 <div class="column size-1"><p>column-size-1</p></div>
 <div class="column size-1"><p>column-size-1</p></div>
 <div class="column size-1"><p>column-size-1</p></div>
 <div class="column size-1"><p>column-size-1</p></div>
 <div class="column size-1"><p>column-size-1</p></div>
 </div>

• aaronmallen: To answer your question no, using percentages alone will usually make your grid responsive for the most part. However you may want to look into breakpoints. I have a sass grid framework that utilizes four breakpoints via media query. This way you can tell the grid how to structure itself for the standards of phone, tablet, laptop, and desktop.

Answer 1

I'm unsure of your SCSS, because it doesn't seem to use media-queries, and isn't small-screen-first: but here are my HTML suggestions:

The columns would likely stack on small screens, and aren't really columns semantically in general. You can note that they are smaller pieces inside a container by calling them blocks or something, and then use floats in combination with @media queries. Giving them static classes like bootstrap does, describes style in HTML – when it should stay in the styles. You can use an inner .inner-w or something to emulate a 'main column' like most web pages.

<section class='container section-name'>
<div class='inner-w'>
 <div class='block block-name'>
 some block
 </div>
 <div class='block other-block-name'>
 some other block
 </div>
</div>
</section>

If you have an actual grid, it is a list, and should be described that way. Then you can style the list without adding classes to every li.

<section class='container section-name'>
<div class='inner-w'>
 <ul class='grid'>
 <li>
 grid item 1
 </li>
 <li>
 grid item 2
 </li>
 <li>
 grid item 3
 </li>
 <li>
 grid item 4
 </li>
 <li>
 grid item 5
 </li>
 <li>
 grid item 6
 </li>
 </ul>
</div>
</section>