Menu icon Foundation

Coder

My Posts


My Comments

Fyro commented on Joel Sjöström's post over 3 years

I think you are looking for these standard grid-mixins (instead of flexbox):
http://foundation.zurb.com/sites/docs/grid.html#building-semantically
 
Rows
Use the grid-row() mixin to create a row.

Copy
.container {
@include grid-row;
}
Columns
Use the grid-column() mixin to create a column. There are a number of ways to define the width of the column.

Copy
.main-content {
// Use the full column count (100%)
@include grid-column;

// Use a column count (33%);
@include grid-column(4);

// Use a percentage (15%)
@include grid-column(15%);

// Use a custom fraction (20%)
@include grid-column(1 of 5);
}
 Otherwise, classes like "text-align-center" just use in CSS
text-align: center;

Fyro commented on Jason kalawe's post over 3 years

Definitely interested in this as well

Fyro commented on Fyro's post almost 4 years

Thanks, works perfectly!
http://codepen.io/Fyro/pen/vNyQwp

Posts Followed

  • 1
    Reply
  • Mixins in Foundation 6

    By Joel Sjöström

    mixinssemanticflex-grid

    I'm having trouble finding some mixins that I hope is a part of Foundation. I want to use mixins instead of classes as much as possible and I cant seem to find any mixins than these in the documentation that is related to the grid: @include flex-gr... (continued)

    Last Reply by Fyro over 3 years ago



Following

    No Content

Followers

My Posts


My Comments

You commented on Joel Sjöström's post over 3 years

I think you are looking for these standard grid-mixins (instead of flexbox):
http://foundation.zurb.com/sites/docs/grid.html#building-semantically
 
Rows
Use the grid-row() mixin to create a row.

Copy
.container {
@include grid-row;
}
Columns
Use the grid-column() mixin to create a column. There are a number of ways to define the width of the column.

Copy
.main-content {
// Use the full column count (100%)
@include grid-column;

// Use a column count (33%);
@include grid-column(4);

// Use a percentage (15%)
@include grid-column(15%);

// Use a custom fraction (20%)
@include grid-column(1 of 5);
}
 Otherwise, classes like "text-align-center" just use in CSS
text-align: center;

You commented on Jason kalawe's post over 3 years

Definitely interested in this as well

You commented on Fyro's post almost 4 years

Thanks, works perfectly!
http://codepen.io/Fyro/pen/vNyQwp

Posts Followed


Following

  • No Content

Followers

  • No Content