Menu icon Foundation
Am I creating Semantic Grids wrong?

So Im trying to create a semantic layout grid for a new site.

All seems to be working fine but the CSS output is pretty large, amd I doing this right as there seems to be a lot of repeat padding and media queries going on?

Below is the live scss example and the output css.

.container{
    @include grid-row;
    }

.book{
    @include grid-col;
    	
	@include breakpoint(medium){
		@include grid-col(8);
		}
	@include breakpoint(large){
		@include grid-col(4);
		color: green;
		}
	}
            

         

The CSS output from above

      .container {
  max-width: 71.25rem;
  margin-left: auto;
  margin-right: auto; }
  .container::before, .container::after {
    content: ' ';
    display: table; }
  .container::after {
    clear: both; }


.book {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  width: 100%;
  float: left; }
  
  @media screen and (min-width: 40em) {
    .book {
      padding-left: 1.25rem;
      padding-right: 1.25rem; } }
      
  @media screen and (min-width: 64em) {
    .book {
      padding-left: 2.8125rem;
      padding-right: 2.8125rem; } }
  .book:last-child:not(:first-child) {
    float: right; }
    
  @media screen and (min-width: 40em) {
    .book {
      padding-left: 0.625rem;
      padding-right: 0.625rem;
      width: 66.6666666667%;
      float: left; } }
      
  @media screen and (min-width: 40em) and (min-width: 40em) {
    .book {
      padding-left: 1.25rem;
      padding-right: 1.25rem; } }
      
  @media screen and (min-width: 40em) and (min-width: 64em) {
    .book {
      padding-left: 2.8125rem;
      padding-right: 2.8125rem; } }
      
  @media screen and (min-width: 40em) {
      .book:last-child:not(:first-child) {
        float: right; } }
        
  @media screen and (min-width: 64em) {
    .book {
      padding-left: 0.625rem;
      padding-right: 0.625rem;
      width: 33.3333333333%;
      float: left;
      color: green; } }
      
  @media screen and (min-width: 64em) and (min-width: 40em) {
    .book {
      padding-left: 1.25rem;
      padding-right: 1.25rem; } }
      
  @media screen and (min-width: 64em) and (min-width: 64em) {
    .book {
      padding-left: 2.8125rem;
      padding-right: 2.8125rem; } }
      
  @media screen and (min-width: 64em) {
      .book:last-child:not(:first-child) {
        float: right; } }      

         

semantic

So Im trying to create a semantic layout grid for a new site.

All seems to be working fine but the CSS output is pretty large, amd I doing this right as there seems to be a lot of repeat padding and media queries going on?

Below is the live scss example and the output css.

.container{
    @include grid-row;
    }

.book{
    @include grid-col;
    	
	@include breakpoint(medium){
		@include grid-col(8);
		}
	@include breakpoint(large){
		@include grid-col(4);
		color: green;
		}
	}
            

         

The CSS output from above

      .container {
  max-width: 71.25rem;
  margin-left: auto;
  margin-right: auto; }
  .container::before, .container::after {
    content: ' ';
    display: table; }
  .container::after {
    clear: both; }


.book {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  width: 100%;
  float: left; }
  
  @media screen and (min-width: 40em) {
    .book {
      padding-left: 1.25rem;
      padding-right: 1.25rem; } }
      
  @media screen and (min-width: 64em) {
    .book {
      padding-left: 2.8125rem;
      padding-right: 2.8125rem; } }
  .book:last-child:not(:first-child) {
    float: right; }
    
  @media screen and (min-width: 40em) {
    .book {
      padding-left: 0.625rem;
      padding-right: 0.625rem;
      width: 66.6666666667%;
      float: left; } }
      
  @media screen and (min-width: 40em) and (min-width: 40em) {
    .book {
      padding-left: 1.25rem;
      padding-right: 1.25rem; } }
      
  @media screen and (min-width: 40em) and (min-width: 64em) {
    .book {
      padding-left: 2.8125rem;
      padding-right: 2.8125rem; } }
      
  @media screen and (min-width: 40em) {
      .book:last-child:not(:first-child) {
        float: right; } }
        
  @media screen and (min-width: 64em) {
    .book {
      padding-left: 0.625rem;
      padding-right: 0.625rem;
      width: 33.3333333333%;
      float: left;
      color: green; } }
      
  @media screen and (min-width: 64em) and (min-width: 40em) {
    .book {
      padding-left: 1.25rem;
      padding-right: 1.25rem; } }
      
  @media screen and (min-width: 64em) and (min-width: 64em) {
    .book {
      padding-left: 2.8125rem;
      padding-right: 2.8125rem; } }
      
  @media screen and (min-width: 64em) {
      .book:last-child:not(:first-child) {
        float: right; } }      

         
James Stone about 1 year ago

This is exactly how a float based grid system works. Since you have two media queries, it is essentially 3 grids.

The padding on each column is the gutter. The row handles the max width (the width of the grid) as well as clearing the floats.

David McDonald about 1 year ago

Could you do it much leaner with just CSS and all those different breakpoints? I agree with James above.

I don't think it's a big worry. In the end, it's minified, compressed etc. Another developer (or even Chrome Dev Tools) is only going to read or work with the source SCSS.

Brett Mason about 1 year ago

Rather than using @include grid-col(4) you can use @include grid-col-size(4);

I havent actually looked at the difference in css output, but I think that's the correct way to do it from the Zurb examples I've seen.

Bjarni Wark about 1 year ago

Hi Brett, yes by changing (adding "-size") eg

grid-col(4) = grid-col-size(4);

There was a reduction in CSS, by over 50%

Thanks, learnt something new today and the CSS out put is lighter now.

.book {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  width: 100%;
  float: left; }
  @media screen and (min-width: 40em) {
    .book {
      padding-left: 1.25rem;
      padding-right: 1.25rem; } }
  @media screen and (min-width: 64em) {
    .book {
      padding-left: 2.8125rem;
      padding-right: 2.8125rem; } }
  .book:last-child:not(:first-child) {
    float: right; }
  @media screen and (min-width: 40em) {
    .book {
      width: 66.6666666667%; } }
  @media screen and (min-width: 64em) {
    .book {
      width: 33.3333333333%;
      color: green; } }


David McDonald about 1 year ago

Nice one!