Menu icon Foundation
Mixins in Foundation 6

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-grid-row();

@include flex-grid-column();

Classes like align-center, are they available as mixins?

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-grid-row();

@include flex-grid-column();

Classes like align-center, are they available as mixins?

Fyro over 3 years ago

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;