Blocks

variables

include-sv-blocks

$include-sv-blocks: $include-sv-classes !default;

Description

Enable blocks classes creation when blocks component is imported.

Type

Bool

Boxes

variables

include-sv-boxes

$include-sv-boxes: $include-sv-classes !default;

Description

Enable boxes classes creation when boxes component is imported.

Type

Bool

sv-boxes-thickness

$sv-boxes-thickness: () !default;

Description

Enabled Thickness scheme model items for boxes features

Type

Map

Buttons

variables

include-sv-buttons

$include-sv-buttons: $include-sv-classes !default;

Description

Enable buttons classes creation when buttons component is imported.

Type

Bool

sv-button-modests

$sv-button-modests: () !default;

Description

Enabled button sizes for modest feature

Modest button have lesser padding than original button behavior.

Each item is an enabled size for modest feature, so it should accord names to available ones from original button.

Type

Map

Example

$sv-button-modests: (
    tiny: 5px,
    small: 7px,
    medium: 8px,
    large: 10px,
);

sv-button-colors-schemes

$sv-button-colors-schemes: () !default;

Description

Enabled color schemes for button in addition to original button

Each property is a named Color scheme model.

Type

Map

Example

$transparent-color-scheme: (
    font-color: #000000,
    border-color: #000000,
    background: transparent,
);

$sv-button-colors-schemes: (
    transparent: $transparent-color-scheme,
);

// Or simply components color schemes
$sv-button-colors-schemes: $sv-colors-schemes;

Colors

variables

sv-colors-scheme-default

$sv-colors-scheme-default: null !default;

Description

Default color scheme to use (like on .block or .box).

See Color scheme model for property definitions.

Type

Map

Example

$sv-colors-scheme-default: $white-color-scheme;

sv-colors-schemes

$sv-colors-schemes: () !default;

Description

Enabled color schemes for component classes creation (like .block or .box).

Each property is a named Color scheme model.

Type

Map

Example

$sv-colors-schemes: (
    white: $white-color-scheme,
    black: $black-color-scheme,
);

include-sv-colors

$include-sv-colors: $include-sv-classes !default;

Description

Enable base colors classes creation when colors component is imported.

Type

Bool

sv-color-background-palette

$sv-color-background-palette: $sv-colors-schemes !default;

Description

Enabled background colors.

Each item create a CSS classes .bg-NAME classes where NAME is the item name. Background property is defined from item background value and optionnally add a :hover rule if item have a hover-background property.

It's usually a copy $sv-colors-schemes but you may use another value if some color schemes is not relevant to simple backgrounds.

Type

Map

mixins

sv-scheme-colors

@mixin sv-scheme-colors($scheme: null, $apply-border: false, $prefix: null) { ... }

Description

Include properties from a scheme color to an element. Mainly used to build blocks and boxes color properties.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$scheme`	A `Color scheme model`.	`Map`	`null`
`$apply-border`	If set to `true`, scheme border properties will be used, else they are ignored.	`Bool`	`false`
`$prefix`	If not null will prefix the property names to search. This is used in some component like boxes and buttons to apply `hover` behaviors for every scheme properties.	`String`	`null`

Example

$white-color-scheme: (
    font-color: #000000,
    background: #ffffff,
    h1-color: #f0f0f0,
    h2-color: false,
);

div{
    @include sv-scheme-colors($white-color-scheme);
}

div{
    color: #000000;
    background: #ffffff;

    h1, .title-1{
        color: #f0f0f0;
    }
    h2, .title-2{}
    h3, .title-3{
        color: #000000;
    }
    h4, .title-4{
        color: #000000;
    }
    h5, .title-5{
        color: #000000;
    }
    h6, .title-6{
        color: #000000;
    }
}

Throws

A scheme color must define the background item
A scheme color must define the font-color item if background value is transparent or inherit

Requires

[mixin] sv-apply-border

sv-button-colors

@mixin sv-button-colors($scheme: null, $apply-border: false, $prefix: null, $include-hover: false) { ... }

Description

Include properties from a scheme color to a button element.

Work like sv-scheme-colors() mixin except properties for links and titles are ignored.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$scheme`	A `Color scheme model`.	`Map`	`null`
`$apply-border`	If set to `true`, scheme border properties will be used, else they are ignored.	`Bool`	`false`
`$prefix`	If not null will prefix the property names to search.	`String`	`null`
`$include-hover`	If set to `true`, border properties for prefix "hover" will be automatically added.	`Bool`	`false`

Requires

[mixin] sv-apply-border

sv-apply-border

@mixin sv-apply-border($scheme: null, $prefix: null) { ... }

Description

Apply border properties for given scheme.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$scheme`	A `Color scheme model`.	`Map`	`null`
`$prefix`	If not null will prefix the property names to search.	`String`	`null`

Used by

[mixin] sv-scheme-colors
[mixin] sv-button-colors

Flexbox

variables

include-sv-flex

$include-sv-flex: $include-sv-classes !default;

Description

Enable flexbox classes creation when flex component is imported.

Type

Bool

sv-flex-grid-sizes

$sv-flex-grid-sizes: 25 33.3333 50 75 100 !default;

Description

Enabled widths to create for flex-grid cells.

Each item is an unitless number which will be converted to a percentage.

Default value cover basic grid cell needs.

Type

List

sv-flex-grid-gutter

$sv-flex-grid-gutter: 0.5rem !default;

Description

Grid gutter when marged class name is combined with flex-grid.

Type

Number

mixins

sv-flex

@mixin sv-flex($grow: 1, $shrink: 0, $width: auto, $max: true) { ... }

Description

Shortand to define flex sizing behavior.

Since CSS 'flex' property shortand can cause issues with IE11 and calc, this helper ease to write 'flex' without to define each property. https://github.com/philipwalton/flexbugs#flexbug-8

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$grow`	flex-grow value.	`Number`	`1`
`$shrink`	flex-shrink value.	`Number`	`0`
`$width`	flex-basis value. Note that if you want to use calc() on this value, you need to force evaluation on non static value, see sample '.cell-marged'.	`Number`	`auto`
`$max`	Enable max-width definition.	`Boolean`	`true`

Example

.cell-auto{
    @include sv-flex();
}
.cell-25{
    @include sv-flex(0, 1, 25%);
}
.cell-50{
    @include sv-flex($width: 50%);
}
.cell-50-relaxed{
    @include sv-flex($width: 50%, $max: false);
}
$foo: 15px;
.cell-marged{
    @include sv-flex($width: calc(25% - #{$foo}));
}

// Output
.cell-auto{
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
}
.cell-25{
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 25%;
    max-width: 25%;
}
.cell-50{
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 50%;
    max-width: 50%;
}
.cell-50-relaxed{
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 50%;
}
.cell-marged{
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: calc(25% - 15px);
    max-width: calc(25% - 15px);
}

sv-flex-cell-width

@mixin sv-flex-cell-width($width: null, $less: null) { ... }

Description

Create flex cell properties.

A flex cell always have 'grow' property set to '1' and 'shrink' to '0' so they allways take given width space, not less or much.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$width`	Width for flex basis and max width.	`Number`	`null`
`$less`	If not null, width will be a `calc()` function where `$less` is substracted to `$width`.	`Number`	`null`

Example

div{
    @include sv-flex-cell-width(25%);
}

// Output
div{
    flex: 1 0 25%;
    max-width: 25%;
}

div{
    @include sv-flex-cell-width(25%, $less: 10px);
}

// Output CSS
div{
    flex: 1 0 calc(25% - 10px);
    max-width: calc(25% - 10px);
}

Requires

[mixin] sv-flex
[mixin] sv-flex

Used by

[mixin] sv-flex-grid-classes

sv-flex-grid-classes

@mixin sv-flex-grid-classes($sizes: null, $breakpoint: small, $gutter: null) { ... }

Description

Create direct child selectors for responsive flex width classes.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$sizes`	List of unitless number to create various flex cell widths. Value can be a float number but class name will ignore everything after decimal such as `33.333` will produce `33`.	`List`	`null`
`$breakpoint`	Breakpoint name to prefix produced class names.	`String`	`small`
`$gutter`	Gutter to apply around width. Value is multiplied by two then substracted to each size.	`Number`	`null`

Example

div{
    @each $size in 25 33.3333 50 {
        @include sv-flex-grid-classes($size);
    }
}

// Output CSS
div > .small-25{
    flex: 1 0 25%;
    max-width: 25%;
}
div > .small-33{
    flex: 1 0 33.3333%;
    max-width: 33.3333%;
}
div > .small-50{
    flex: 1 0 50%;
    max-width: 50%;
}

Requires

[mixin] sv-flex-cell-width

sv-flex-display

@mixin sv-flex-display($breakpoint: null) { ... }

Description

Create a CSS class for a flex display rule with optionnal breakpoint name as suffix.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$breakpoint`	Optional breakpoint name to suffix class name.	`String`	`null`

Example

div.foo{
    @include sv-flex-display();
}
div.bar{
    @include sv-flex-display(small);
}

// Output CSS
div.foo .flex{
    display: flex;
}
div.bar .small-flex{
    display: flex;
}

sv-flex-direction

@mixin sv-flex-direction($breakpoint: null) { ... }

Description

Create CSS classes for flex direction rules with optionnal responsive suffix.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$breakpoint`	Optional suffix to add to class names.	`String`	`null`

Example

div.foo{
    @include sv-flex-direction();
}
div.bar{
    @include sv-flex-direction(small);
}

// Output CSS
div.foo .direction{
    display: flex;
}
div.foo .direction-row{
    flex-direction: row;
}
div.foo .direction-row-reverse{
    flex-direction: row-reverse;
}
div.foo .direction-column{
    flex-direction: column;
}
div.foo .direction-column-reverse{
    flex-direction: column-reverse;
}

div.bar .small-direction{
    display: flex;
}
div.bar .small-direction-row{
    flex-direction: row;
}
div.bar .small-direction-row-reverse{
    flex-direction: row-reverse;
}
div.bar .small-direction-column{
    flex-direction: column;
}
div.bar .small-direction-column-reverse{
    flex-direction: column-reverse;
}

sv-flex-vertical-alignment

@mixin sv-flex-vertical-alignment($breakpoint: null, $parent: null) { ... }

Description

Create CSS classes to apply vertical alignments through flex rules

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$breakpoint`	Optional suffix to add to class names.	`String`	`null`
`$parent`	Optional prefix to attach to class selectors.	`String`	`null`

Example

div.foo{
    @include sv-flex-vertical-alignment();
}
div.suffixed{
    @include sv-flex-vertical-alignment(small);
}
div.prexixed-n-suffixed{
    @include sv-flex-vertical-alignment(small, '.ping');
}

// Output CSS
div.foo .v-align-start {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
div.foo .v-align-end {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
div.foo .v-align-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
div.foo .v-align-around {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
div.foo .v-align-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

div.suffixed .small-v-align-start {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
div.suffixed .small-v-align-end {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
div.suffixed .small-v-align-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
div.suffixed .small-v-align-around {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
div.suffixed .small-v-align-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

div.prexixed-n-suffixed .ping.small-v-align-start {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
div.prexixed-n-suffixed .ping.small-v-align-end {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
div.prexixed-n-suffixed .ping.small-v-align-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
div.prexixed-n-suffixed .ping.small-v-align-around {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
div.prexixed-n-suffixed .ping.small-v-align-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

Grid

variables

sv-row-larger-width

$sv-row-larger-width: 83rem !default;

Description

Larger row max width, default is 83rem that should be around 1328px depending with a base font of 16px.

Larger row is available when larger class name is combined with row class name.

Type

Boolean

include-sv-grid

$include-sv-grid: $include-sv-classes !default;

Description

Enable grid classes creation when grid component is imported.

Type

Bool

Horizontal rule

variables

sv-hr-thickness

$sv-hr-thickness: () !default;

Description

Available Thickness scheme model items for <hr> features

You must fill at least a normal property.

Type

Map

sv-hr-colors

$sv-hr-colors: () !default;

Description

Available colors for <hr> features

Type

Map

Example

$sv-hr-colors: (
    white: #ffffff,
    black: #000000,
);

// Or inheriting from text colors
$sv-hr-colors: $sv-color-text-palette;

sv-hr-default-color

$sv-hr-default-color: #000000 !default;

Description

Enabled default color value for <hr>

Type

String

sv-hr-distances

$sv-hr-distances: () !default;

Description

Available distances for <hr> features

Distance define space height between a text and its underline.

It should contains a normal property name which will be used as default distance when no distance feature class is used.

Type

Map

Example

$sv-hr-distances: (
    far: 2rem,
    near: 0.5rem,
    default: 1rem,
    sticked: 0,
);

// Or inheriting from underline distances
$sv-hr-distances: $sv-underline-distances;

Lists

variables

include-sv-lists

$include-sv-lists: $include-sv-classes !default;

Description

Enable list classes creation when list component is imported.

Type

Bool

mixins

sv-arrow-bullet

@mixin sv-arrow-bullet($width: 1rem, $top-position: 0.75rem, $left-position: 0, $font-size: null, $font-weight: null, $content: >, $content-color: null, $vertical-translate: true) { ... }

Description

Include some rules to insert a pseudo element

This is mostly for usage within a pseudo element on list item to apply a custom bullet. Allways use absolute position, so its container should define a relative position.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$width`	Pseudo element width.	`Number`	`1rem`
`$top-position`	Optional. If set, define top position.	`Number`	`0.75rem`
`$left-position`	Define left position.	`Number`	`0`
`$font-size`	Optional. Define font size.	`Number`	`null`
`$font-weight`	Optional. Define font weight.	`Number`	`null`
`$content`	String to include as content.	`String`	`>`
`$content-color`	Optional. Define font color.	`Color`	`null`
`$vertical-translate`	Optional. Apply a vertical translation to enforce centered alignment.	`Bool`	`true`

Example

  li::before{
    @include sv-arrow-bullet();
  }

/* Render */
  li::before {
    position: absolute;
    top: 0.75rem;
    left: 0;
    width: 1rem;
    font-family: icomoon;
    content: ">";
    -webkit-transform: translate(0%, -50%);
    -moz-transform: translate(0%, -50%);
    -o-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
  }

Requires

[mixin] sveetranslate

Medias

variables

include-sv-medias

$include-sv-medias: $include-sv-classes !default;

Description

Enable classes creation when medias component is imported.

Type

Bool

Models

variables

Color scheme model

$Color scheme model: () !default;

Description

This documentate model for available properties in a color scheme.

Either font-color or background are required, every other properties are optional.

background is the only required property and possibly also font-color if background is set to transparent or inherit.

border property is the recommended way to define borders but it defines the same values to every side. If you need to define different values for different sides, you will need to do it throught border-color, border-width and border-style.

Note that every properties can have a prefixed version like hover-**** to use on hover event from container. This is especially used from some components such as boxes and buttons.

For consistent naming, we recommend to allways name your color scheme based on their background color, like $white-color-scheme for a scheme with a white background.

Type

Map

Map structure

Map key Name	Map key Description	Map key Type	Map key Value
`background`	Background to apply.	`Color`	`null`
`font-color`	Font color to apply.	`Color`	`null`
`link-color`	Enforce font color on link. This does not apply on links with `.button` class since buttons have their own definition apart.	`Color`	`null`
`link-color-hover`	Enforce font color on link hover event. Alike `link-color`, this does not apply on buttons.	`Color`	`null`
`h1-color`	Font color to apply on title level 1 (like `h1` or `.title-1`). A `false` value should be understood by mixin as "Do not define any color for this title level" since default behavior is to use font-color when title level is `null`. This behavior is available for every title levels.	`Color`	`null`
`h2-color`	Font color to apply on title level 2 (like `h2` or `.title-2`).	`Color`	`null`
`h3-color`	Font color to apply on title level 3 (like `h3` or `.title-3`).	`Color`	`null`
`h4-color`	Font color to apply on title level 4 (like `h4` or `.title-4`).	`Color`	`null`
`h5-color`	Font color to apply on title level 5 (like `h5` or `.title-5`).	`Color`	`null`
`h6-color`	Font color to apply on title level 6 (like `h6` or `.title-6`).	`Color`	`null`
`border`	Border shortand properties to define every values for every sides.	`Color`	`null`
`border-color`	Border color to apply.	`Color`	`null`
`border-width`	Border width to apply.	`Number`	`null`
`border-style`	Border style to apply.	`String`	`null`

Example

$white-color-scheme: (
    font-color: #000000,
    background: #ffffff,
);

$black-color-scheme: (
    font-color: #ffffff,
    background: #000000,
    link-color: #ff0000,
    link-color-hover: #ff00ee,
    h1-color: #f0f0f0,
    h2-color: #e8e8e8,
    h3-color: #e7e7e7,
    h4-color: #e6e6e6,
    h5-color: #e5e5e5,
    h6-color: #e6e6e6,
    border: 1px solid #ff0000,
    border-color: #d0d0d0,
    border-width: 2px,
    border-style: solid,
    border: 1px solid #0000ff,
);

Thickness scheme model

$Thickness scheme model: () !default;

Description

This documentate model for available properties in a thickness scheme.

size and style are both required properties.

Type

Map

Map structure

Map key Name	Map key Description	Map key Type	Map key Value
`size`	Thickness size.	`Number`	`null`
`style`	Line style according to border style (`solid`, `dotted`, `dashed`).	`String`	`null`

Spaces

variables

sv-breakpoints

$sv-breakpoints: () !default;

Description

Map of available breakpoints for space features, usually mapped on Foundation ones.

Each property is a breakpoint.

Type

Map

Example

$sv-breakpoints: (
    small: $small-up,
    medium: $medium-up,
    large: $large-up,
    xlarge: $xlarge-up,
);

Used by

[mixin] sv-apply-spaces
[mixin] sv-apply-spaces

include-sv-spaces

$include-sv-spaces: $include-sv-classes !default;

Description

Enable spacing classes creation when spaces component is imported.

Type

Bool

sv-spaces-helpers-important

$sv-spaces-helpers-important: true !default;

Description

Mark all spaces helpers with !important or not. Default is true.

Type

Bool

sv-spaces

$sv-spaces: () !default;

Description

Enabled size schemes

Each property is a map of a space size with its enabled breakpoint (which rely on breakpoints from $sv-breakpoints).

Type

Map

Example

$sv-space-tiny: (
    small: 0.5rem,
    medium: 0.75rem,
    large: 1rem,
    xlarge: 1.5rem,
);
$sv-space-short: (
    small: 1rem,
    medium: 1.25rem,
    large: 2rem,
    xlarge: 2.5rem,
);
$sv-space-normal: (
    small: 1.5rem,
    medium: 2rem,
    large: 3rem,
    xlarge: 4rem,
);
$sv-space-large: (
    small: 2rem,
    medium: 3rem,
    large: 4rem,
    xlarge: 5rem,
);
$sv-space-wide: (
    small: 3rem,
    medium: 4.5rem,
    large: 6rem,
    xlarge: 8rem,
);

$sv-spaces: (
    tiny: $sv-space-tiny,
    short: $sv-space-short,
    normal: $sv-space-normal,
    large: $sv-space-large,
    wide: $sv-space-wide,
);

mixins

sv-apply-spaces

@mixin sv-apply-spaces($definitions: null, $axis: vertical, $default: small, $sides: ("start", "end"), $prop: padding, $important: false) { ... }

Description

Includes properties to apply vertical/horizontal spacing on an element for various breakpoints

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$definitions`	space sizes map which define at least the keyword name from '$default'.	`Map`	`null`
`$axis`	axis to apply spaces, can ben either 'horizontal' or 'vertical'.	`String`	`vertical`
`$default`	Breakpoint name to use as as default class spacing. Won't be included in media queries.	`String`	`small`
`$sides`	Sides to apply spacing depending from $axis, 'start' means 'top' or 'left' and 'end' means 'right' or 'bottom'. Both sides are enabled by default.	`List`	`("start", "end")`
`$prop`	Property name to define, default is 'padding' but it can be 'margin' also.	`String`	`padding`
`$important`	If set to `true`, property values will include `!important` mark.	`Bool`	`false`

Example

$sample-sizes: (
    small: 0.5rem,
    medium: 0.75rem,
    large: 1rem,
    xlarge: 1.5rem,
);

div{
    @include sv-apply-spaces($sample-sizes);
}

Throws

Given space definition must contain at least the

Requires

[variable] sv-breakpoints
[variable] sv-breakpoints

Tables

variables

include-sv-tables

$include-sv-tables: $include-sv-classes !default;

Description

Enable table classes creation when tables component is imported.

Type

Bool

Typography

variables

include-sv-typography

$include-sv-typography: $include-sv-classes !default;

Description

Enable typographic classes creation when typography component is imported.

Type

Bool

global-weight-thin

$global-weight-thin: null !default;

Description

Additional global font weight thinner than $global-weight-normal.

Type

Number

Example

$global-weight-thin: 100;

global-weight-strong

$global-weight-strong: null !default;

Description

Additional global font weight stronger than $global-weight-bold.

Type

Number

Example

$global-weight-strong: 900;

sv-color-text-palette

$sv-color-text-palette: () !default;

Description

Enabled text colors.

Each item create a CSS classes .text-NAME classes where NAME is the item name.

Type

Map

Example

$sv-color-text-palette: (
    white: #ffffff,
    black: #000000,
);

sv-smalls

$sv-smalls: () !default;

Description

Available <small> element sizes.

Each property is size feature.

Type

Map

Example

$sv-smalls: (
    small: 40%,
    big: 60%,
    large: 80%,
);

mixins

sv-headtitle

@mixin sv-headtitle($size: null, $header: null, $definitions: null, $font-family: null, $default-lineheight: null, $default-margin-bottom: null, $floor-breakpoint: null) { ... }

Description

Define a title element (hX) properties.

This a copy of foundation typography code translated to be used as a mixin for a single element

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	Breakpoint name.	`String`	`null`
`$header`	Header element name like 'h1'.	`String`	`null`
`$definitions`	Map of defined property variables. Supported variables are 'font-size', 'line-height', 'margin-top', 'margin-bottom'.	`Map`	`null`
`$font-family`	Font family to apply.	`String`	`null`
`$default-lineheight`	Defaut line height to fallback to when not defined from '$definitions'.	`Number`	`null`
`$default-margin-bottom`	Defaut bottom margin to fallback to when not defined from '$definitions'.	`Number`	`null`
`$floor-breakpoint`	Lowest allowed breakpoint name, every other breakpoint will takes default property value.	`String`	`null`

Used by

[mixin] sv-headers

sv-headers

@mixin sv-headers($header-styles: null, $floor-breakpoint: null, $default-font-family: null, $default-lineheight: null, $default-margin-bottom: null) { ... }

Description

Build every enabled title levels

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$header-styles`	Map of breakpoints where to define title properties. And each breakpoint item contain a map of title element with some properties to define. See sample below for an example of this map. See Foundation6 documentation for more details: https://foundation.zurb.com/sites/docs/typography-base.html	`Map`	`null`
`$floor-breakpoint`	Lowest allowed breakpoint, every other breakpoint will takes default property value.	`Map`	`null`
`$default-font-family`	Default font family to apply.	`Map`	`null`
`$default-lineheight`	Defaut line height to fallback to when not defined from '$definitions'.	`Map`	`null`
`$default-margin-bottom`	Defaut bottom margin to fallback to when not defined from '$definitions'.	`Map`	`null`

Example

$header-styles: (
  small: (
    'h1': ('font-size': 24),
    'h2': ('font-size': 20),
    'h3': ('font-size': 19),
    'h4': ('font-size': 18),
    'h5': ('font-size': 17),
    'h6': ('font-size': 16),
  ),
  medium: (
    'h1': ('font-size': 48),
    'h2': ('font-size': 40),
    'h3': ('font-size': 31),
    'h4': ('font-size': 25),
    'h5': ('font-size': 20),
    'h6': ('font-size': 16),
  ),
);

Requires

[mixin] sv-headtitle

General

variables

include-sv-classes

$include-sv-classes: true !default;

Description

Default value for variables which enable components creations like $include-sv-grid, $include-sv-spaces, etc..

Default is true so every component CSS stuff are created. If you want to disable some component set their own value to False.

Type

Bool

sv_foundation_support

$sv_foundation_support: 6 !default;

Description

Foundation version to support. Pastly this was used to support both Foundation 5 and 6 which have different class names to manage.

For now you can ignore this setting since Foundation 5 support has been dropped.

Type

Number

image-directory

$image-directory: '../images/' !default;

Description

Define images directory used by image-url() function.

Type

String

Used by

[function] image-url

font-directory

$font-directory: '../fonts/' !default;

Description

Define fonts directory used by font-url() function.

Type

String

Used by

[function] font-url

functions

strip-units

@function strip-units($number: null) { ... }

Description

Strip unit from a number.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$number`	Number with unit to remove.	`Number`	`null`

Returns

Number —

An unitless number.

Example

// Return number '16'
strip-units(16px);

// Return number '42'
strip-units(42%);

image-url

@function image-url($url: null) { ... }

Description

Shortand to augment given url with images directory.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$url`	Relative path to prepend with images directory path or url.	`String`	`null`

Returns

String —

Url such as $image-directory + $url.

Requires

[variable] image-directory

font-url

@function font-url($url: null) { ... }

Description

Shortand to augment given url with fonts directory.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$url`	Relative path to prepend with fonts directory path or url.	`String`	`null`

Returns

String —

Url such as $font-directory + $url.

Requires

[variable] font-directory

mixins

sveecalc

@mixin sveecalc($property: null, $expression: null) { ... }

Description

Include calc() rule with vendor prefixes in property

This may not be really useful anymore since calc() support is available for every actual browsers.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$property`	Property for which to define calc rule.	`String`	`null`
`$expression`	Expression to insert in calc rule.	`String`	`null`

sveetranslate

@mixin sveetranslate($x: null, $y: null) { ... }

Description

Include translate() rule with vendor prefixes in a transform property.

This may not be really useful anymore since all transform functions support is available for every actual browsers.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$x`	— none	`Number`	`null`
`$y`	— none	`Number`	`null`

Used by

[mixin] sv-arrow-bullet

Underline

variables

sv-underline-thickness

$sv-underline-thickness: () !default;

Description

Available Thickness scheme model items for underline features

If this setting is empty, underline classes will not be created. You must fill at least a normal property.

Type

Map

sv-underline-colors

$sv-underline-colors: () !default;

Description

Available colors for underline features

Type

Map

Example

$sv-underline-colors: (
    white: #ffffff,
    black: #000000,
);

// Or inheriting from text colors
$sv-underline-colors: $sv-color-text-palette;

sv-underline-default-color

$sv-underline-default-color: #000000;

Description

Enabled default color value for underline

Type

String

sv-underline-distances

$sv-underline-distances: () !default;

Description

Available distances for underline features

Distance define space height between a text and its underline.

It should contains a normal property name which will be used as default distance when no distance feature class is used.

Type

Map

Example

$sv-underline-distances: (
    far: 2rem,
    near: 0.5rem,
    normal: 1rem,
    sticked: 0,
);

sv-underline-widths

$sv-underline-widths: () !default;

Description

Available underline widths.

Each property is a width feature.

It should contains a normal property name which will be used as default value when no width feature class is used.

Type

Map

Example

$sv-underline-widths: (
    tiny: 5%,
    short: 15%,
    normal: 40%,
    large: 70%,
    full: 100%,
);