Fonts

Primary Mixin
@include global-fonts
Related Mixin
@include font-face
Variabiles
$google-fonts-family $font-face-map
Function for font-face

.selector {
    font-family: font($nth-key-font-face-map);
}

    Typography

    Primary Mixins
    @include headers-style @include paragraph-style
    Related Mixin
    @include headers-style-bp @include foundation-text-alignment @include text-transform-classes
    Variabiles
    $header-styles
    Info
    Go to hover or tap on any "header" to display all the information for font family, font size, line height and letter spacing.
    h1 & .h1

    Header.

    h2 & .h2

    Header.

    h3 & .h3

    Header.

    h4 & .h4

    Header.

    h5 & .h5
    Header.

    h6 & .h6
    Header.

    p & a

    Cupcake ipsum dolor sit amet chupa chups liquorice donut pie. Brownie gingerbread sesame snaps toffee chupa chups sweet roll. Bonbon wafer ice cream gummies chocolate bar candy sweet roll apple pie. Chupa chups linked jelly-o candy canes toffee. Sugar plum brownie powder sweet roll chocolate bar gingerbread lemon drops pudding.

    Palette & Colors

    Primary Mixin
    @include colors-palette
    Related Mixin
    @include manage-palette
    Variabiles
    $palette-color
    Template classes
    .palette-color-$key-palette-color .background-color-$key-palette-color
    Info
    Click or tap on the "palette dots" for copy the HEX.
    In the key values ​​in $palette-color all HTML colors name are also accepted. You can find all HTML colors name in this page.
    To help the keys nomenclature of the map, you can use this online tool to find the most suitable name for the hexadecimal.
    Function for catch HEX
    
.selector {
    color: palette($key-palette-color);
}

      XY Grid

      Primary Mixin
      @include foundation-xy-grid-classes
      Related Mixin
      @include foundation-flex-classes
      Variabiles
      $global-flexbox: true $grid-margin-gutters $grid-container-padding
      Info
      Compared to the original Foundation grid, the "rem" conversion for the various gutters has been removed.
      For a complete documentation on the use of this grid system and mixins consult this page.
      1200px

      Flexbox Utils

      Primary Mixin
      @include fondation-flex-classes
      Variables
      $flex-source-ordering-count-enable $flex-source-ordering-count $flexbox-responsive-breakpoints
      Info
      If you set the variable: $global-flexbox to true in addition to the XY-Grid, there are flexbox utilities. They can be integrated with the XY-Grid as explained on this page.
      In addition to these classes, has been added the possibility to enable or not the source ordering. Here are some examples of use with the classes to be called in our templates.
      The classes in these examples were applied only to the parent container.
      child
      .flex-container .align-right
      child
      .flex-container .align-bottom
      child
      .flex-container .align-middle
      child
      .flex-container .align-center-middle

      Form

      Primary Mixin
      @include form-style
      Related mixin
      @include scss-normalize
      Variabiles
      $global-reset-input-appearance $what-input-outline-detect
      Input Checkbox & radio custom template classes
      .input-checkbox .input-radio
      Info
      The layout of the fields is just an example. It's necessary to create additional classes to create the desired effect. All configurations instead of fields are to be kept as a reference model.
      To maintain accessibility it was decided not to remove the basic outline of the fields, but to make it visible only if the event is intercepted by the keyboard thanks to this plugin.
      
<input id="custom-checkbox" type="checkbox">
<label for="custom-checkbox" class="input-checkbox">
    Text for my label
</label>