Menu icon Foundation

Developer

My Posts

  • 2
    Replies
  • column:last-child float right. Why?

    By Keith Burgie

    grid

    This has always struck me as a pretty opinionated style and I'm wondering if there's a practical reason for it. I often end up fighting against it. Why is the last column floated right by default, and what would be a best practice for a column layout that... (continued)

    Last Reply by ritariya about 1 year ago


  • 2
    Replies
  • data-toggle a selector besides ID

    By Keith Burgie

    toggle

    I'm trying to toggle a dropdown and don't have the option of using an ID. (We use a system that will remove my ID and create its own.) It's not working to target a class. Any suggestions? <!-- Code that doesn't work --> <a class="button" data-t... (continued)

    Last Reply by Rafi Benkual over 2 years ago



  • 1
    Reply
  • Using Sass Mixins?

    By Keith Burgie

    scssSassmixins

    I'm trying to make some semantic components using mixins but can't wrap my head around how the @include works. Example:  @include card-container($background, $color, $margin, $border, $radius, $shadow); Without modifying _settings.scss, how... (continued)

    Last Reply by Keith Burgie almost 3 years ago


My Comments

Keith Burgie commented on Adam Sherman's post over 2 years

If you're using the Sass version you can create a custom/semantic class for this case. Don't uncomment the flex-grid include from settings or it will affect your other rows.
http://foundation.zurb.com/sites/docs/flex-grid.html
.flex-row {
@include flex-grid-row();

> .column {
@include flex-grid-column();
}
}
You can also use display: table; for vertical alignment.
.table-row {
display: table;

> .column {
display: table-cell;
vertical-align: middle;
}
}

Keith Burgie commented on Jakob Degler's post over 2 years

Hi Jakob,
I see two different page templates here. One for the index page (Photo 1) and one for the individual site (Photo 2).
There are lots of ways to go about this.

A custom 20% width column class for the index page.
Offsets, pushes and pulls.
Card components...

For the individual site you just need a nested grid.
<div class="row">

<div class="column"></div> <!-- 20% -->

<div class="column"> <!-- 80% -->
<div class="row">
<div class="column"> <!-- 100% -->
<h1>Gesand & Musiktheater</h1>
<h2> ..... </h2>
</div>
</div>
<div class="row">
<div class="column"> <!-- 100% -->
<h3>Kurzbiographie</h3>
<p> ..... </p>
</div>
</div>
</div>

</div>

Keith Burgie commented on Alex Carm's post over 2 years

The grid is the same. (I don't know if it's all the same, but it's pretty much the same.) If you're using the pre-defined classes on your divs, it shouldn't break.
<!-- This works the same in F4 or F6 -->
<div class="row">
<div class="small-2 large-4 columns">...</div>
<div class="small-4 large-4 columns">...</div>
<div class="small-6 large-4 columns">...</div>
</div>
Try it out. Instead of over-writing the files, just put the new CSS and JS files in your assets folder, comment out your working script and CSS tags, and add the new ones.
<!-- <link rel="stylesheet" href="css/foundation-4.css"> -->
<link rel="stylesheet" href="css/foundation-6.css">
Obviously best to do this on a local or staging website if you've got site traffic, but it's pretty easy to change things back to your old files if everything breaks.

Keith Burgie commented on Christian Magill's post over 2 years

What have you tried and what issues are you having? You can set the width of any container to change at any breakpoint.

Keith Burgie commented on Keith Burgie's post over 2 years

I rolled my own for now with jQuery but still interested in a solution for using Foundation's JS.
$('.click-to-show').click(function() {
$('.show-on-click').toggleClass('is-open');
});

Keith Burgie commented on C MacDonald's post almost 3 years

You've got some table stylings in your demo and you've turned your column floats off.
.valign-middle {
display: table;
}
.valign-middle .columns {
display: table-cell;
vertical-align: middle;
}
.valign-middle .columns,
.valign-middle [class="column"] + [class="column"]:last-child {
float: none;
}
.topalign {display: table;} /* for the profile pics row */
.topalign .columns {
display: table-cell;
vertical-align: top;
}
display: table and table-cell are handy for vertical alignment, but table cell widths behave differently. If you comment out your float: none, the fifth column will drop down the way you want it to.

Keith Burgie commented on Keith Burgie's post almost 3 years

I realized that what I'm doing actually does work, it just doesn't change the font color.
.feed-card {
@include card-container(pink, white, 30px, 5px, 20px, 3px 3px);
}
All of the other styles do change.
So, follow-up question: What if I only want to customize the last parameter?

Posts Followed


  • 1
    Reply
  • Block grid - five columns

    By Jakob Degler

    5 columns

    Hello I have a Webdesign project, where I need 5 columns. There are 5 squares and 4 of them have photos, each of them a link to an individual site ( 1. photo). Now&nbsp;the content on the individual sites must be aligned with the "fiver" grid, but I hav... (continued)

    Last Reply by Keith Burgie over 2 years ago




  • 2
    Replies
  • grid wrapping in nested row

    By C MacDonald

    gridnested row

    Hi, I've set up a layout where I have a nested row, and in there I want to have a grid 4 items wide by however many deep. When I add a 5th item however, rather than go to the next line of the grid, it gets squished in at the end of the first 4. Here is... (continued)

    Last Reply by C MacDonald almost 3 years ago


Following

    No Content

Followers

My Posts





My Comments

You commented on Adam Sherman's post over 2 years

If you're using the Sass version you can create a custom/semantic class for this case. Don't uncomment the flex-grid include from settings or it will affect your other rows.
http://foundation.zurb.com/sites/docs/flex-grid.html
.flex-row {
@include flex-grid-row();

> .column {
@include flex-grid-column();
}
}
You can also use display: table; for vertical alignment.
.table-row {
display: table;

> .column {
display: table-cell;
vertical-align: middle;
}
}

You commented on Jakob Degler's post over 2 years

Hi Jakob,
I see two different page templates here. One for the index page (Photo 1) and one for the individual site (Photo 2).
There are lots of ways to go about this.

A custom 20% width column class for the index page.
Offsets, pushes and pulls.
Card components...

For the individual site you just need a nested grid.
<div class="row">

<div class="column"></div> <!-- 20% -->

<div class="column"> <!-- 80% -->
<div class="row">
<div class="column"> <!-- 100% -->
<h1>Gesand & Musiktheater</h1>
<h2> ..... </h2>
</div>
</div>
<div class="row">
<div class="column"> <!-- 100% -->
<h3>Kurzbiographie</h3>
<p> ..... </p>
</div>
</div>
</div>

</div>

You commented on Alex Carm's post over 2 years

The grid is the same. (I don't know if it's all the same, but it's pretty much the same.) If you're using the pre-defined classes on your divs, it shouldn't break.
<!-- This works the same in F4 or F6 -->
<div class="row">
<div class="small-2 large-4 columns">...</div>
<div class="small-4 large-4 columns">...</div>
<div class="small-6 large-4 columns">...</div>
</div>
Try it out. Instead of over-writing the files, just put the new CSS and JS files in your assets folder, comment out your working script and CSS tags, and add the new ones.
<!-- <link rel="stylesheet" href="css/foundation-4.css"> -->
<link rel="stylesheet" href="css/foundation-6.css">
Obviously best to do this on a local or staging website if you've got site traffic, but it's pretty easy to change things back to your old files if everything breaks.

You commented on Christian Magill's post over 2 years

What have you tried and what issues are you having? You can set the width of any container to change at any breakpoint.

You commented on Keith Burgie's post over 2 years

I rolled my own for now with jQuery but still interested in a solution for using Foundation's JS.
$('.click-to-show').click(function() {
$('.show-on-click').toggleClass('is-open');
});

You commented on C MacDonald's post almost 3 years

You've got some table stylings in your demo and you've turned your column floats off.
.valign-middle {
display: table;
}
.valign-middle .columns {
display: table-cell;
vertical-align: middle;
}
.valign-middle .columns,
.valign-middle [class="column"] + [class="column"]:last-child {
float: none;
}
.topalign {display: table;} /* for the profile pics row */
.topalign .columns {
display: table-cell;
vertical-align: top;
}
display: table and table-cell are handy for vertical alignment, but table cell widths behave differently. If you comment out your float: none, the fifth column will drop down the way you want it to.

You commented on Keith Burgie's post almost 3 years

I realized that what I'm doing actually does work, it just doesn't change the font color.
.feed-card {
@include card-container(pink, white, 30px, 5px, 20px, 3px 3px);
}
All of the other styles do change.
So, follow-up question: What if I only want to customize the last parameter?

Posts Followed

Following

  • No Content

Followers

  • No Content