Menu icon Foundation

My Posts

  • 2
    Replies
  • Multiple Grids on the same page?

    By John Brumbaugh

    grid

    I don't know if this is possible, but I am curious if I can have a single web page with multiple grids on it.  What I am trying to do is an article view with comments.  The top of the page would be the article view which using the standard ... (continued)

    Last Reply by John Brumbaugh over 3 years ago


My Comments

John Brumbaugh commented on John Brumbaugh's post over 3 years

Sorry for not responding sooner, I got pulled into another part of the project.  I assume people know how that goes.
 
So I have two sections of the page, set up like so:
 
<section class="story">
<div class="row">
<div class="small-12 columns">
<h1 class="s_title">TITLE</h1>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<img src="featured_image.jpg" /><br />
</div>
</div>
<div class="row story_contents">
<div class="small-2 columns">
<div class="callout">
Author Callout
</div>
</div>
<div class="small-10 columns">
<p>Article Body</p>
</div>
</div>
</section>
<section class="comments">
<div class="row">
<div class="small-24 columns">
My Comment
</div>
</div>
<div class="row">
<div class="small-23 small-offset-1 columns">
My Comment
</div>
</div>
<div class="row">
<div class="small-22 small-offset-2 columns">
My Comment
</div>
</div>
</section>
And what I am trying to do here is have the indentation level of the comments be smaller than the typical row blocks so I can fit a few more levels on the screen.  I was thinking the best way to do this would be to have two different grid types with a larger column size for the comments versus the article contents which fits in perfect with the 12 column standards.
I am 100% sure I am doing the SASS code wrong here to align things, but here it is based on what I could translate from the documentation:
 
.story {
@include grid-row(12);
}

.comments {
margin-top: 20px;
@include grid-row(24);
}
But then when I run this, the CSS changes all rows to be 24, and the sections don't line up since the code is set up to handle 12 columns in a row on the top and 24 on the bottom.
Any help / ideas would be appreciated! Thanks.  I am sure it something simple that I am missing as I read the documentation.

Posts Followed

No Content

Following

    No Content

Followers

My Posts


My Comments

You commented on John Brumbaugh's post over 3 years

Sorry for not responding sooner, I got pulled into another part of the project.  I assume people know how that goes.
 
So I have two sections of the page, set up like so:
 
<section class="story">
<div class="row">
<div class="small-12 columns">
<h1 class="s_title">TITLE</h1>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<img src="featured_image.jpg" /><br />
</div>
</div>
<div class="row story_contents">
<div class="small-2 columns">
<div class="callout">
Author Callout
</div>
</div>
<div class="small-10 columns">
<p>Article Body</p>
</div>
</div>
</section>
<section class="comments">
<div class="row">
<div class="small-24 columns">
My Comment
</div>
</div>
<div class="row">
<div class="small-23 small-offset-1 columns">
My Comment
</div>
</div>
<div class="row">
<div class="small-22 small-offset-2 columns">
My Comment
</div>
</div>
</section>
And what I am trying to do here is have the indentation level of the comments be smaller than the typical row blocks so I can fit a few more levels on the screen.  I was thinking the best way to do this would be to have two different grid types with a larger column size for the comments versus the article contents which fits in perfect with the 12 column standards.
I am 100% sure I am doing the SASS code wrong here to align things, but here it is based on what I could translate from the documentation:
 
.story {
@include grid-row(12);
}

.comments {
margin-top: 20px;
@include grid-row(24);
}
But then when I run this, the CSS changes all rows to be 24, and the sections don't line up since the code is set up to handle 12 columns in a row on the top and 24 on the bottom.
Any help / ideas would be appreciated! Thanks.  I am sure it something simple that I am missing as I read the documentation.

Posts Followed

No Content

Following

  • No Content

Followers