Mixin for global palette classes.

This mixin generates 2 concordant CSS classes with all the $palette-color keys.

Ex. .palette-color-primary, .background-color-primary.

Mixin for shape classes.

Foundation Float Grid. No rem conversion for the gutters.

Mixin for importing Google Fonts and/or @font-face fonts globally.

Mixin for style all cross browsing inputs.

The configurable inputs are:

• input[type="email"],
• input[type="password"],
• input[type="search"],
• input[type="tel"],
• input[type="text"],
• input[type="url"]
• select,
• textarea

Checkbox radio classes

Output CSS classes for custom checkboxes and radios.

These classes are exclusive to label with the [for] attribute in agreement with id of the checkbox or radio input.

Accessibility classes mixin.

Clearfix classes.

Foundation flex flex classes

The ability to enable or disable flex-source-ordering has been added.

Float disposition classes.

Mixin for global @media print elements. From original HTML5 boilerplate.

Foundation visibilty clasess.

From original normalize.css v8.0.0.

Compared to the original normalize, the ability to disable or enable the default appearance for the various fields in the form, or for radio checkboxes has been added. Further reset for the typography have been added.

Mixin for global typography.

Foundation XY-grid. No rem conversion for the gutters.

Enable or disable the ability to have the default outline in focus in the checkbox or radio shapes.

Enables the possibility to preserve the outline in focus at the click or touch for the checkbox andradio shapes

And to enable it only if the event derives from the keyboard. The what-input plugins is required.

The default background-color selection for text and other elements.

If true the color will be applied based on the value of $selection-color of a selected element.

The color when an item is selected.

The tap highlight color for iOS devices.

Enable or disable the default outline in focus for links.

Enable or disable the default outline in focus for button,input,select,textarea.

This variable preserves the default outline for links or fields of a form if the event is intercepted by the keyboard so the basic outline is not shown in focus if the event is determined by a mouse or touch.

The installation of what-input js is required.

A list of named breakpoints. You can use these with the breakpoint() mixin to quickly create media queries.

The largest named breakpoint in which to include print as a media type

All of the names in this list will be output as classes in your CSS, like .small-12, .medium-6, and so on. Each value in this list must also be in the $breakpoints map.

Wraps a media query around the content you put inside the mixin. This mixin accepts a number of values:

• If a string is passed, the mixin will look for it in the $breakpoints map, and use a media query there.
• Unlike the Foundation default mixin every value is passed will not be converted to em values.

If multiple values are passed, the mixin will generate a media query for each of them as described above. Since the content is duplicated for each breakpoint, this mixin should only be used with properties that change across breakpoints.

If the breakpoint is "0px and larger", outputs the content as-is. Otherwise, outputs the content wrapped in a media query.

The only parameter has been added. Ex. @media only screen().

Default font family for checkbox-radio components.

Default font size for checkbox-radio components.

Default text transform for checkbo-radio components.

Default letter spacing for checkbox-radio components.

The color of the label for custom checkbox-radio component

The cursor of the label for custom checkbox-radio component.

The space between the label text and the shape of the custom checkbox-radio component.

If set to true the alignment of the checkbox-radio components will line up in the middle of the text.

The size the global dimension of the checkbox-radio components.

The background-color of the checkbox-radio shape.

The border-color for custom checkbox-radio component.

Enable or disable the ability to have a different border in hover on the checkbox or radio shape.

The border color in hover on the checkbox or radio shape.

The border-radius for custom checkbox component.

The thickness of the "arrow" shape for custom checkbox component.

The "mark" color of the checkbox shape for custom checkbox component.

The border-color of the checkbox shape when input[type="checkbox"] is :checked.

The border-color of the checkbox shape when input[type="checkbox"] is in :focus but not :checked.

The border-color when input[type="checkbox"] is in validation failed.

The background-color when input[type="checkbox"] is in validation failed.

The color of the radio mark.

The border-color of the checkbox shape when input[type="radio"] is :checked.

The border-color of the checkbox shape when input[type="radio"] is in :focus but not :checked.

The border-color when input[type="radio"] is in validation failed.

The background-color when input[type="radio"] is in validation failed.

Mixin for generate a checkbox shape input.

Mixin for generate all the attributes needed to agree with checkbox shape.

Mixin for generate all validation attributes needed to agree with checkbox shape.

Mixin for generate a radio shape input.

Mixin for generate all the attributes needed to agree with radio shape.

Mixin for generate all validation attributes needed to agree with radio shape.

Mixin for create the basic style for custom checkboxes & radios.

Global default palette color used by RenderKit.

To help the keys nomenclature of the map, you can use this online tool http://www.color-blindness.com/color-name-hue/ to find the most suitable name for the hexadecimal.

Each key of this map agrees with 2 classes to be used in the templates.

The default body background color.

The default body base color.

The global links color.

Function for catch HEX color in $palette-color map.

Mixin for mixin to intercept the primary key in $palette-color map. This mixin avoids having empty keys in $palette-color map.

Quickly disable/enable count of flexbox source ordering.

Default value for the count of source ordering.

Quickly disable/enable Responsive breakpoints for Vanilla Flex Helpers.

Vanilla flexbox classes.

Enables flexbox by adding display: flex to the element.

Horizontally or vertically aligns the items within a flex container.

Vertically align a single column within a flex row. Apply this mixin to a flex column.

Changes the source order of a flex child. Children with lower numbers appear first in the layout.

Change flex-direction

Calculates the width of a column based on a number of factors.

Creates a grid column.

Creates a grid column row. This is the equivalent of adding .row and .column to the same element.

Set the gutters on a column Spacing between columns, accepts multiple values:

• A single value will make the gutter that exact size.
• A breakpoint name will make the gutter the corresponding size in the $gutters map.
• "auto" will make the gutter responsive, using the $gutters map values.

Collapse the gutters on a column by removing the padding. Only use this mixin within a breakpoint. To collapse a column's gutters on all screen sizes, use the $gutter parameter of the grid-column() mixin instead.

Sets bottom margin on grid columns to match gutters

Sizes child elements so that $n number of items appear on each row.

Adds extra CSS to block grid children so the last items in the row center automatically. Apply this to the columns, not the row.

Reposition a column.

Reset a position definition.

Offsets a column to the right by $n columns.

Disable the default behavior of the last column in a row aligning to the opposite edge.

Change the behavior of columns defined inside this mixin to use a different column count.

Creates a grid row.

Inverts the margins of a row to nest it inside of a column.

Set a grid row size

Set the width of a grid column.

The maximum width of a row.

The default column count of a grid. Changing this value affects the logic of the grid mixins, and the number of CSS classes output.

The amount of space between columns at different screen sizes. To use just one size, set the variable to a number instead of a map.

If true, the last column in a row will align to the opposite edge of the row.

Selector used for an alias of column (with @extend). If false, no alias is created.

The highest number of .x-up classes available when using the block grid CSS.

The default font dir for catch all font file.

Quickly enable or disable the @font-face directive for load "font face" fonts.

If it is true the values ​​of the $font-face-map will be read.

The default $font-face-map used by RenderKit.

The parameters of the map are detailed below:

• MyFontFamily The font-family of your font.
• myfilename The file name of your font. If the files are in a folder you can simply edit the string by adding the correct path ex: pathtofile/myfilename
• normal The font style of your font.
• 400 The font weight of your font.
• eot woff woff2 ttf svg The available extensions of your font.

Quickly enable or disable the @import directive for load Google fonts.

The default Google Fonts used by by RenderKit.

$google-fonts-family accept the name of the font after string ?family=.

Function for catch font family in $font-face-map.

Mixin for generate a @font-face rule.

Variable that determines whether or not to enable a custom inputs autofill.

The color for the custom autofill.

The background-color for the custom autofill.

The initial height of the fields.

The font-family of the fields.

The font-size of the fields.

The letter-spacing of the fields.

The text-transform of the fields.

The background-color of the fields.

The color of the fields.

The border of the fields.

The border-radius of the fields.

The box-shadow of the fields.

The padding of the fields.

The global transition of the fields.

By default, the text-shadow property has been added to fix the :-moz-focusring for select in Firefox.

Variable that determines whether to have a different properties in :hover for all fields except fields with [disabled] attribute.

The background-color of the fields when they are in :hover.

The color of the border of the fields when they are in :hover.

The box-shadow of the fields when they are in :hover.

Variable that determines whether to have a different properties in focus for all fields.

The background-color of the fields when they are in :focus.

The color of the border of the fields when they are in :focus.

The box-shadow of the fields.

The class that will be applied to the label for the fields.

The class that will be applied to the label when validation has failed.

The font-family for the fields label element.

The font-size for the fields label element.

The letter-spacing for the fields label element.

The text-transform style for the fields label element.

The color for the fields label element.

The global margin for the fields label element.

The color for the label of the fields when it have a failed validation.

The font-family of the :placeholder of the fields.

The font-style of the :placeholder of the fields.

The text-transform style of the :placeholder of the fields.

The color of the :placeholder of the fields.

Variable that determines whether to hide or not, the :placeholder of the fields when they are in :focus.

The color of the :placeholder of the fields when they are in :focus.

The color for the :placeholder of the fields when they have a failed validation.

Variable that determines whether to render the "caret" shape for the select.

The "caret" color of the select.

The "caret" shape of the select.

The possible values ​​to pass are:

• 'arrow'
• 'triangle'
• 'empty'

The "caret" size of the select.

If $form-select-caret-shape-render is set to false it is possible to load a custom "caret" shape.

This variable determines the pat of the custom "shape" for the select.

The size of the custom "caret" shape

The global height of textarea.

Variable that determines whether to have the texarea resizeable or not.

Variable that determines the resize mode of the textarea.

It goes to act only if $form-textarea-resize is set to true.

The background-color for the fields when they have a failed validation.

The border-color for the fields when they have a failed validation.

The box-shadow for the fields when they have a failed validation.

The color for the fields when they have a failed validation.

Variable that determines whether to maintain the style of "error" even at the time of focus or less.

Mixin for styling up the :-webkit-autofill for the fields.

Mixin for style all cross browsing inputs wrapped in a configurable "box" class.

Mixin for style the label for the fields.

Mixin for style the ::placeholder for the fields.

Mixin for style the select for the forms.

Mixin for style the textarea for the forms.

Mixin for generate an "caret" for custom select without js added.

Mixin to apply the style of the fields with failed validation.

It will be applied to: input, select & textarea

Variable to determine if we want to include flexbox utilities in our layout and to include mixins such as foundation-xy-grid-classes and foundation-flex-classes.

If set to false the settings for the XY Grid & Flexbox Utilities will be ignored.

Global font size apply to html.

This value is valid only if $html-root-font-size is true.

The default font size applied to the body.

This value is valid only if $body-root-font-size is true.

Sets the text direction of the CSS. Can be either ltr or rtl.

If true the default appearance will be set to none.

If you decide to enable this rule it will be easier to cross-browse the select on the various browsers and iOS devices.

If true all the checkboxes and radios will be visually hidden in order to apply the mixin checkbox-radio-classess style.

Global disabled input color value.

The color of the fields when they have the disabled attribute.

Global disabled input opacity value.

This value is valid only if $global-select-reset-appearence is true.

Global disabled input cursor value.

The type of cursor when the fields have the disabled attribute.

The global class that is applied in the validation of the forms, usually via js.

This global class will be applied, if validation has failed to:

• input[type="email"],
• input[type="password"],
• input[type="search"],
• input[type="tel"],
• input[type="text"],
• input[type="url"]
• select,
• textarea

Enable or disable the default text-decoration for all links.

Global text rendering applied to body, button, input, select and textarea.

If true the $global-letter-spacing will be applied to body, button, input, select and textarea.

Global letter-spacing applied to body, button, input, select and textarea.

The font-feature-settings: 'liga','kern' rule is be applied to: body,button, input,select and textarea, which determines the "kering" between the various characters.

The default appearence for body,button, input,select and textarea it be set to none.

If you decide to enable this rule it will be easier to cross-browse the field styles on the various browsers and iOS devices.

If false the default search-cancel-button will be hidden in all type="search" inputs.

If true the all select it will be visually hidden in order to generate a select with custom options via js.

Applies the micro clearfix hack popularized by Nicolas Gallagher. Include this mixin on a container if its children are all floated, to give the container a proper height. The clearfix is augmented with specific styles to prevent borders in flexbox environments.

Mixin for create a "layer" position can be used for modals.

Mixin for simplify the syntax for iOS smooth scroll.

Counter Increment Mixin, create a numerated list. Include this on a child selector on ::before or ::after.

The parent selector need counter-reset: section;

Mixin for fix rules in Firefox. This mixin creates exclusive rules for Firefox.

Mixin for fix rules in very old IE browsers like IE6/7.

If true, all elements will have transparent backgrounds when printed, to save on ink.

If true, all link have black color when printed.

If true, all link show your href attribute when printed.

The global margin that a page can have when printed.

The size for "arrow" shape.

The color for "arrow" shape.

The thickness size for "arrow" shape.

The size for "checkmark" shape.

The color for "checkmark" shape.

The thickness size for "checkmark" shape.

The size for "cross" shape.

The color for "cross" shape.

The thickness size for "cross" shape.

Local map for all arrow shape directions.

Creates a CSS triangle, which can be used for dropdown arrows, dropdown pips, and more. Use this mixin inside a &::before or &::after selector, to attach the triangle to an existing element.

Creates a CSS arrow, which can be used for dropdown arrows, dropdown pips, and more. Use this mixin inside a &::before or &::after selector, to attach the arrow to an existing element.

Creates a CSS "cross" shape, which can be used for modals and more.

Sets the text direction of the CSS. Can be either ltr or rtl.

The basic font size ($global-font-size) will be applied to html.

The default body font family.

If it is true the basic font size ($global-body-font-size) will be applied to body.

The default font weight applied to the body.

The defaut body line-height.

Font family applied to the strong andb tags.

Font weight applied to the strong andb tags.

Styles for headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading styles.

The possible values to pass to the map are:

• font-size or fs
• line-height or lh
• letter-spacing or ls
• margin-top or mt
• margin-bottom or mb

Each value must obviously be comma separated. Only integers are accepted. Any value passed in rem or em will be ignored. The output will always be in px, except for the line-height property. Except for the line-height or lh value, in addition to integers, floats are also accepted.

The font-family applied on each headers.

The font-weight applied on each headers.

The line-height applied on each headers.

The text-transform applied on each headers.

The letter-spacing applied on each headers.

The color applied on each headers.

The color applied on each headers.

The font-family applied on each paragraphs.

The font-weight applied on each paragraphs.

The line-height applied on each paragraphs.

The letter-spacing applied on each paragraphs.

The text-transform applied on each paragraphs.

The color applied on each paragraphs.

The margin applied on each paragraphs.

Mixin for text alignment.

Mixin for global headers styles in breakpoints.

Mixin for global headers style

Each header has in association a class to invoke in the templates.

Mixin for set global paragraph style

Mixin for all text-transform values with helper classes.

Mixin for no text shown.

Mixin for create "ellipsis text".

When the space for the text is no longer available in a large size for a button, for example.

Function for string replace.

Removes the unit (e.g. px, em, rem) from a value, returning the number only.

Converts a pixel, percentage, rem or em value to a unitless value based on a given font size. Ideal for working out unitless line heights.

Function for transform px value to em value.

Only single value in px are accepted.

Function for transform px value to rem value.

Only single value in px are accepted.