Menu icon Foundation
Foundation 5 and Mixins

In Foundation 4 mixins were mentioned specifically in the docs for each component. The Foundation 5 docs don't seem to mention mixins at all.

Is mixin use being discouraged?
Are the mixins more-or-less the same as the F4 ones?
If mixins are available is documentation going to be made for them?

thanks,

Anita

mixinsstylingstylemix-ins

In Foundation 4 mixins were mentioned specifically in the docs for each component. The Foundation 5 docs don't seem to mention mixins at all.

Is mixin use being discouraged?
Are the mixins more-or-less the same as the F4 ones?
If mixins are available is documentation going to be made for them?

thanks,

Anita

Alok Jethanandani over 5 years ago

Hey Anita, are you trying to create a custom mixin for something? Check out http://foundation.zurb.com/docs/components/global.html for Foundation 5 Global Mixins. If you can describe what you are trying to make, I'd love to help!

Henrik Cederblad over 5 years ago

Alok: the page link you posted doesn't for example document @include grid-column. I was also confused seing that previous Foundation docs had a specific mixin section under Sass.

Currently, you have to delve through Foundation <=4 Docs to find out things like @include grid-column.

Or am I missing something?

Henrik Cederblad over 5 years ago

Sorry, I meant Foundation <=3.

George over 5 years ago

@Henrik Looking at the the grid mixins seems the main change to the grid-column is just the variable names

// Creates a column, should be used inside of a media query to control layouts
//
// $columns - The number of columns this should be
// $last-column - Is this the last column? Default: false.
// $center - Center these columns? Default: false.
// $offset - # of columns to offset. Default: false.
// $push - # of columns to push. Default: false.
// $pull - # of columns to pull. Default: false.
// $collapse - Get rid of gutter padding on column? Default: false.
// $float - Should this float? Default: true. Options: true, false, left, right.
@mixin grid-column(
  $columns:false, 
  $last-column:false, 
  $center:false, 
  $offset:false, 
  $push:false, 
  $pull:false, 
  $collapse:false, 
  $float:true) {
...
}

Alex Wright over 5 years ago

@Henrik & @Anita

I have also run into this issue.
If you look in your scss dir -> foundation -> components, you'll find the mixins, which also contains documentation for them, including syntax and proper usage.

Hope that helps!

-Alex

neil kanth over 5 years ago

Foundation 5 doesn't provide any Accordion mixin examples.
What would be comparable to the following F4 example?

.section-auto-sample-accordion {
  @include section-container($section-type:accordion);
  & > section { @include section($section-type:accordion, $title-selector:".title-sample", $content-selector:".content-sample", $title-padding: 10px 50px, $title-color:#000, $title-bg:pink, $title-bg-hover:darken(pink,5%), $title-bg-active: #fff, $title-color-active: darken(pink,10%)); }
}

Thanks in advance

Seth Hall over 5 years ago

As far as I can tell, Foundation 5 does provide mixins in the docs.

under "Semantic Markup with Sass" you will see the button mixin - http://foundation.zurb.com/docs/components/buttons.html

but under Accordion there are no mixins available - http://foundation.zurb.com/docs/components/accordion.html

I take this to mean some components have mixins and others don't.

The sass for the mixins are spread throughout the appropriate files within components directory.
ex. grid mixins are in _grid.scss, button mixins are in _buttons.scss etc...

Alexander Assimidis over 5 years ago

Here are some Mixin which i use sometimes hope this helps :)

@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    background-image: url($image);
    background-size: $width $height;
  }
}
@mixin breakpoint($point) {
  @if $point == small-only {
    @media #{$screen} and (max-width: #{upper-bound($small-range)})  { @content; }
  }
    @else if $point == medium-up {
    @media #{$screen} and (min-width: #{lower-bound($medium-range)}) { @content; }
  }
    @else if $point == medium-only {
    @media #{$screen} and (min-width: #{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})  { @content; }
  }
    @else if $point == large-up {
    @media #{$screen} and (min-width:#{lower-bound($large-range)})  { @content; }
  }
    @else if $point == large-only {
    @media #{$screen} and (min-width: #{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})  { @content; }
  }
    @else if $point == xlarge-up {
    @media #{$screen} and (min-width: #{lower-bound($xlarge-range)})  { @content; }
  }
    @else if $point == xlarge-only {
    @media #{$screen} and (min-width: #{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})  { @content; }
  }
    @else if $point == xxlarge-up {
    @media #{$screen} and (min-width:#{lower-bound($xxlarge-range)})  { @content; }
  }
    @else if $point == xxlarge-only {
    @media #{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})  { @content; }
  }
}
@mixin border-radius($radius) {
  -webkit-border-radius: $radius / $rem-base + rem;
     -moz-border-radius: $radius / $rem-base + rem;
      -ms-border-radius: $radius / $rem-base + rem;
       -o-border-radius: $radius / $rem-base + rem;
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius / $rem-base + rem; 
          border-radius: $radius;
}
@mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}
@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}
@mixin animation($animateText..) {
    $max: length($animate);
    $animations: '';

    @for $i from 1 through $max {
        $animations: #{$animations + nth($animate, $i)};

        @if $i < $max {
            $animations: #{$animations + ", "};
        }
    }
    -webkit-animation: $animations;
    -moz-animation:    $animations;
    -o-animation:      $animations;
    animation:         $animations;
}

@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        @content;
    }
    @-moz-keyframes #{$animationName} {
        @content;
    }
    @-o-keyframes #{$animationName} {
        @content;
    }
    @keyframes #{$animationName} {
        @content;
    }
}

Anita Graham about 5 years ago

Lots of useful replies there.
My basic issue is that I want to use markup which is different to the markup in the Zurb examples. I could do this in F4.

In the project I am working on I have preferred to use mixins to apply foundation styles to the markup I am working with, in preference to creating markup which conforms to the foundation expectation.

Tabs (which were sections in F4) are a case in point. Foundation now specifies that the tabs must be written as s. Mine are currently marked up as sections inside a div. Looking at the scss I can see that it explicitly looks for elements. Yes, I can, and probably will change that markup.

Block grids are another case where foundation's explicit requirement that block grids be built from lists seems unnecessarily strict. I have a full of s and I would like the block grid to work for them. I was/am planning to test a change to the block-grid scss which may allow this - BUT if using mixins to apply foundation styles to my own markup is not supported, then I will have to dig into a different system altogether to change the markup (and this markup seems perfectly reasonable).

What are Zurb's thoughts on allowing zurb styles to be applied to markup that is not the same as the example markup in the doc?