Menu icon Foundation

Developer

My Posts





My Comments

Roy Six commented on Dan Clayton's post 15 days

Agreed, I noticed this variance when I made the switch from Everything to Custom recently. Even the Max-Width property is smaller on Custom (62.5 rem) vs Everything (75 rem)... 
Rafi et all, is it possible to try and standardize the downloads so that they use the same colors/properties? I would personally agree with Dan that the colors and properties you are currently using in Everything look the best.

Roy Six commented on Erin Struble's post 15 days

Hi, archive-grid seems to be a feature from a Foundation WordPress theme; I don't think it is in vanilla foundation-sites (I just wanted to mention that to avoid any confusion).
Since I don't have access to your code, I'm going to make a couple assumptions:

You think it's weird that your second "row" thumbnail is starting from the right side (not the left side)
Your row is 12 columns wide
Each thumbnail gets a large-3 / medium-4 / small-12 class applied to it

If that is incorrect, you can stop reading here and clarify.
Now, if you end up having four thumbnails, on large screens they can all fit on one row (4 * 3 = 12). But on medium you'll have a problem because you've now gone above the 12 columns (4 * 4 = 16).
In reality, you don't really have a second row being made -- everything is still contained in that one row div you've defined, so foundation will "wrap" the next item (thumbnail) that can't fit on the bottom. It therefore appears like it's a second row, but it's now floating to the right. Actually, Foundation does just that for the last column child of a row: 
.column:last-child:not(:first-child), .columns:last-child:not(:first-child) {
float: right;
}
So, foundation is doing exactly what it is being told to do. But you probably didn't mean that, so you kind of have to reword it in another way foundation understands.
It may be that you want there to be 4 thumbnails per row on large screens, 2 thumbs on medium, and maybe just 1 thumb per row on small screens. If so, I'd recommend you to use Foundation's Block Grid classes (large-up, medium-up, and small-up) so you can specify how many thumbnails you want in each row.

Roy Six commented on Roy Hinkley's post 25 days

I think you've basically run into the double margin problem with the grid-margin-x/y classes. Looking at the codepen and this block specifically:
<div class="grid-container text-center">
<div class="grid-x grid-margin-x grid-margin-y grid-padding-y">
<div class="medium-6 large-3 cell view">12/6/3</div>
<div class="medium-6 large-3 cell view">12/6/3</div>
<div class="medium-6 large-3 cell view">12/6/3</div>
<div class="medium-6 large-3 cell view">12/6/3</div>
</div>
</div>
 
By default, each grid goes up to 12 cells. On large, it's good: 3 + 3 + 3 + 3 = 12. But on medium, there's a problem: 6 + 6 + 6 + 6 = 24. Thus, the last two medium cells are forced to wrap below the first two (since the first two already take up 12). Since each cell retains its margin-y properties (which gives a margin-top and margin-bottom to each cell), it visually produces a "double margin" when the last two cells are forced to go below the first two.
In this situation, as a quick and ugly fix, I think I'd forego using the grid-margin class and manually apply the margin-top to the grid-x and then apply the margin-bottom to each cell. I admit it's not a pretty solution. Also, I think I'd probably use the block-grid classes medium-up-2 and large-up-4. So, I'd replace the above with something like this:
<div class="grid-container text-center">
<div class="grid-x grid-margin-x grid-padding-y medium-up-2 large-up-4" style="margin-top: .9375rem;">
<div class="cell view" style="margin-bottom: .9375rem;">12/6/3</div>
<div class="cell view" style="margin-bottom: .9375rem;">12/6/3</div>
<div class="cell view" style="margin-bottom: .9375rem;">12/6/3</div>
<div class="cell view" style="margin-bottom: .9375rem;">12/6/3</div>
</div>
</div>
 

Roy Six commented on Yury Portnov's post about 1 month

Yury, you're right and it's now a known issue with the Complete and Essential downloads (see github foundation-sites closed pull request #10406). Maybe Rafi can provide more details. In the mean time, you can download the latest foundation 6.4.1 CSS file from the CDN URL or download a "Custom" build from the website to get the flex and align classes.

Roy Six commented on Paula Hightower's post about 1 month

(Assuming I understand correctly) Yes, it's possible to do this with the new xy grid, as well as the legacy float grid. I think you want the footer "stuck" to the bottom when there isn't enough content, but you don't want the footer to always be "fixed" at the bottom whenever the content should cause it to be pushed further down.
Here's a codepen of a simple HTML skeleton using the 6.4.1 XY Grid and flex CSS. It's using the Foundation off-canvas-wrapper structure for the HTML and the footer is always on the bottom, but not "fixed" to the bottom.
https://codepen.io/sixs/pen/webBPv

Roy Six commented on Fabio Vaz's post about 1 month

Currently, the Foundation 6.4.1 Essential and Complete downloads don't have the align-center class defined in their CSS files. The Custom download and the CDN hosted version do have the align classes defined correctly in their CSS files. The fix that Martavis suggested is a great workaround for now, or you can just download the Custom or CDN versions.

Roy Six commented on Markus Lind's post about 1 month

You can use the new xy-grid's grid-containerclass. It's similar to the old "row" class in the legacy float grid. This will contain it with a max-width and center it:
 
.grid-container {
max-width: 75rem;
margin: 0 auto; }
 
Of course, you could also do it Jack's way if you want to define your own container with your own specs.

Roy Six commented on Rafi Benkual's post over 1 year

The anchor element that is popping up the modal should not have a href attribute or # at all or else the page will scroll to the top. This was a recent change with Foundation's Reveal.

So your anchor element should look something like this with no href attribute, or if you must have the href attribute, use a JavaScript void operator:

<a data-open="exampleModal1">Click me for a modal</a>

OR:

<a data-open="exampleModal1" href="javascript:void(0)">Click me for a modal</a>

http://foundation.zurb.com/sites/docs/reveal.html

Posts Followed





Following

    No Content

Followers

My Posts

My Comments

You commented on Dan Clayton's post 15 days

Agreed, I noticed this variance when I made the switch from Everything to Custom recently. Even the Max-Width property is smaller on Custom (62.5 rem) vs Everything (75 rem)... 
Rafi et all, is it possible to try and standardize the downloads so that they use the same colors/properties? I would personally agree with Dan that the colors and properties you are currently using in Everything look the best.

You commented on Erin Struble's post 15 days

Hi, archive-grid seems to be a feature from a Foundation WordPress theme; I don't think it is in vanilla foundation-sites (I just wanted to mention that to avoid any confusion).
Since I don't have access to your code, I'm going to make a couple assumptions:

You think it's weird that your second "row" thumbnail is starting from the right side (not the left side)
Your row is 12 columns wide
Each thumbnail gets a large-3 / medium-4 / small-12 class applied to it

If that is incorrect, you can stop reading here and clarify.
Now, if you end up having four thumbnails, on large screens they can all fit on one row (4 * 3 = 12). But on medium you'll have a problem because you've now gone above the 12 columns (4 * 4 = 16).
In reality, you don't really have a second row being made -- everything is still contained in that one row div you've defined, so foundation will "wrap" the next item (thumbnail) that can't fit on the bottom. It therefore appears like it's a second row, but it's now floating to the right. Actually, Foundation does just that for the last column child of a row: 
.column:last-child:not(:first-child), .columns:last-child:not(:first-child) {
float: right;
}
So, foundation is doing exactly what it is being told to do. But you probably didn't mean that, so you kind of have to reword it in another way foundation understands.
It may be that you want there to be 4 thumbnails per row on large screens, 2 thumbs on medium, and maybe just 1 thumb per row on small screens. If so, I'd recommend you to use Foundation's Block Grid classes (large-up, medium-up, and small-up) so you can specify how many thumbnails you want in each row.

You commented on Roy Hinkley's post 25 days

I think you've basically run into the double margin problem with the grid-margin-x/y classes. Looking at the codepen and this block specifically:
<div class="grid-container text-center">
<div class="grid-x grid-margin-x grid-margin-y grid-padding-y">
<div class="medium-6 large-3 cell view">12/6/3</div>
<div class="medium-6 large-3 cell view">12/6/3</div>
<div class="medium-6 large-3 cell view">12/6/3</div>
<div class="medium-6 large-3 cell view">12/6/3</div>
</div>
</div>
 
By default, each grid goes up to 12 cells. On large, it's good: 3 + 3 + 3 + 3 = 12. But on medium, there's a problem: 6 + 6 + 6 + 6 = 24. Thus, the last two medium cells are forced to wrap below the first two (since the first two already take up 12). Since each cell retains its margin-y properties (which gives a margin-top and margin-bottom to each cell), it visually produces a "double margin" when the last two cells are forced to go below the first two.
In this situation, as a quick and ugly fix, I think I'd forego using the grid-margin class and manually apply the margin-top to the grid-x and then apply the margin-bottom to each cell. I admit it's not a pretty solution. Also, I think I'd probably use the block-grid classes medium-up-2 and large-up-4. So, I'd replace the above with something like this:
<div class="grid-container text-center">
<div class="grid-x grid-margin-x grid-padding-y medium-up-2 large-up-4" style="margin-top: .9375rem;">
<div class="cell view" style="margin-bottom: .9375rem;">12/6/3</div>
<div class="cell view" style="margin-bottom: .9375rem;">12/6/3</div>
<div class="cell view" style="margin-bottom: .9375rem;">12/6/3</div>
<div class="cell view" style="margin-bottom: .9375rem;">12/6/3</div>
</div>
</div>
 

You commented on Yury Portnov's post about 1 month

Yury, you're right and it's now a known issue with the Complete and Essential downloads (see github foundation-sites closed pull request #10406). Maybe Rafi can provide more details. In the mean time, you can download the latest foundation 6.4.1 CSS file from the CDN URL or download a "Custom" build from the website to get the flex and align classes.

You commented on Paula Hightower's post about 1 month

(Assuming I understand correctly) Yes, it's possible to do this with the new xy grid, as well as the legacy float grid. I think you want the footer "stuck" to the bottom when there isn't enough content, but you don't want the footer to always be "fixed" at the bottom whenever the content should cause it to be pushed further down.
Here's a codepen of a simple HTML skeleton using the 6.4.1 XY Grid and flex CSS. It's using the Foundation off-canvas-wrapper structure for the HTML and the footer is always on the bottom, but not "fixed" to the bottom.
https://codepen.io/sixs/pen/webBPv

You commented on Fabio Vaz's post about 1 month

Currently, the Foundation 6.4.1 Essential and Complete downloads don't have the align-center class defined in their CSS files. The Custom download and the CDN hosted version do have the align classes defined correctly in their CSS files. The fix that Martavis suggested is a great workaround for now, or you can just download the Custom or CDN versions.

You commented on Markus Lind's post about 1 month

You can use the new xy-grid's grid-containerclass. It's similar to the old "row" class in the legacy float grid. This will contain it with a max-width and center it:
 
.grid-container {
max-width: 75rem;
margin: 0 auto; }
 
Of course, you could also do it Jack's way if you want to define your own container with your own specs.

You commented on Rafi Benkual's post over 1 year

The anchor element that is popping up the modal should not have a href attribute or # at all or else the page will scroll to the top. This was a recent change with Foundation's Reveal.

So your anchor element should look something like this with no href attribute, or if you must have the href attribute, use a JavaScript void operator:

<a data-open="exampleModal1">Click me for a modal</a>

OR:

<a data-open="exampleModal1" href="javascript:void(0)">Click me for a modal</a>

http://foundation.zurb.com/sites/docs/reveal.html

Posts Followed

Following

  • No Content

Followers

  • No Content