Menu icon Foundation
Semantic Grid

I am trying to build my site using the semantic grid but I am confused on how to do this. I thought the idea was to change all the medium-4 medium-push-2 etc and make it more semantic.

<div class="row">
     <div class="large-4 medium-4 medium-push-2 columns">
        <p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
     </div>
     <div class="large-4 medium-4 medium-pull-2 columns">
        <p><a href="https://twitter.com/ZURBfoundation">@zurbfoundation</a><br />Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).</p>
      </div>        
 </div>

 

For the above code, would I change it to 

.classname {
    @include grid-column(4);
    @include grid-col-pos(4);
}

.classname2 {
    @include grid-column(4);
    @include grid-col-pos(-4);
}
<div class="container">
    <div class="main-content classname">
        <p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
    </div>
    <div class="main-content classname2">
        <p><a href="https://twitter.com/ZURBfoundation">@zurbfoundation</a><br />Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).</p>
    </div>        
</div>

 

I have a feeling I am totally misunderstanding this. I have looked for an example html page for reference but have not been able to find one.

semanticfoundation 6grid

I am trying to build my site using the semantic grid but I am confused on how to do this. I thought the idea was to change all the medium-4 medium-push-2 etc and make it more semantic.

<div class="row">
     <div class="large-4 medium-4 medium-push-2 columns">
        <p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
     </div>
     <div class="large-4 medium-4 medium-pull-2 columns">
        <p><a href="https://twitter.com/ZURBfoundation">@zurbfoundation</a><br />Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).</p>
      </div>        
 </div>

 

For the above code, would I change it to 

.classname {
    @include grid-column(4);
    @include grid-col-pos(4);
}

.classname2 {
    @include grid-column(4);
    @include grid-col-pos(-4);
}
<div class="container">
    <div class="main-content classname">
        <p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
    </div>
    <div class="main-content classname2">
        <p><a href="https://twitter.com/ZURBfoundation">@zurbfoundation</a><br />Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).</p>
    </div>        
</div>

 

I have a feeling I am totally misunderstanding this. I have looked for an example html page for reference but have not been able to find one.

Dominik Pieper about 2 years ago

Hi,

i don't think your semantic code is the same like above. Try something like this:

.container {
  @include grid-row;
}

.classname {
  @include grid-column(4);
  @include grid-col-pos(2);
}

.classname2 {
  @include grid-column(4);
  @include grid-col-pos(-2);
}

 

Anna Callahan about 2 years ago

Thank you Dominik,

The main issue I am confused about is if replacing these types of classes

 large-4 medium-4 medium-push-2 columns

in the html with other class names is the way to make it more semantic?

Is a semantic grid one that doesn't use the above (generic) types of classes and instead embeds all the column information in the css instead of putting it in the html?

Thank you,

Anna

 

 

Dominik Pieper about 2 years ago

I use the semantic grid functions to use classes, which have an "meaning" in that context.

Instead of

<div class="large-4 medium-4 columns">
   ...
</div>

<div class="large-8 medium-8 columns">
   ...
</div>

you can use something like

<div class="product"></div>

<div class="details">
   ...
</div>

You can use classnames that that describe the content or component instead of the technical description "this thing is x grid units wide"

I don't know how to describe this better, I hope this helps a bit.

Anna Callahan about 2 years ago

That does help, thank you!

Are you aware of a foundation site online with a semantic structure so I could look at the code to better understand?

Dominik Pieper about 2 years ago

I don't have a good example, sorry.

Maybe someone else here?

Dominik Pieper about 2 years ago

I think you shouln't think to much about the semantic thing.

I don't know what's "best practice" with that. Use something that you think it's right and see what comes out. I don't think there's an right or wrong. It depends how you work and what's the content in that project. In the next one it's maybe totally different.

I use the grid mixins to describe "what" is in my site and not "how" it's positioned. I don't know it's right or wrong, but I can work with that.

Bjarni Wark over 1 year ago

 If you are still wanting an example I asked a similar question with the final example of how to do a semantic grid.

http://foundation.zurb.com/forum/posts/38265-am-i-creating-semantic-grids-wrong