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 Nameparameter Descriptionparameter Typeparameter Default value
$scheme

A Color scheme model.

Mapnull
$apply-border

If set to true, scheme border properties will be used, else they are ignored.

Boolfalse
$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.

Stringnull

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

sv-button-colors

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

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 Nameparameter Descriptionparameter Typeparameter Default value
$scheme

A Color scheme model.

Mapnull
$apply-border

If set to true, scheme border properties will be used, else they are ignored.

Boolfalse
$prefix

If not null will prefix the property names to search.

Stringnull

Requires

sv-apply-border

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

Description

Apply border properties for given scheme.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$scheme

A Color scheme model.

Mapnull
$prefix

If not null will prefix the property names to search.

Stringnull

Used by

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 Nameparameter Descriptionparameter Typeparameter Default value
$grow

flex-grow value.

Number1
$shrink

flex-shrink value.

Number0
$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'.

Numberauto
$max

Enable max-width definition.

Booleantrue

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);
}

Used by

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 Nameparameter Descriptionparameter Typeparameter Default value
$width

Width for flex basis and max width.

Numbernull
$less

If not null, width will be a calc() function where $less is substracted to $width.

Numbernull

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

Used by

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 Nameparameter Descriptionparameter Typeparameter 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.

Listnull
$breakpoint

Breakpoint name to prefix produced class names.

Stringsmall
$gutter

Gutter to apply around width. Value is multiplied by two then substracted to each size.

Numbernull

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

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 Nameparameter Descriptionparameter Typeparameter Default value
$breakpoint

Optional breakpoint name to suffix class name.

Stringnull

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 Nameparameter Descriptionparameter Typeparameter Default value
$breakpoint

Optional suffix to add to class names.

Stringnull

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 Nameparameter Descriptionparameter Typeparameter Default value
$breakpoint

Optional suffix to add to class names.

Stringnull
$parent

Optional prefix to attach to class selectors.

Stringnull

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 Nameparameter Descriptionparameter Typeparameter Default value
$width

Pseudo element width.

Number1rem
$top-position

Optional. If set, define top position.

Number0.75rem
$left-position

Define left position.

Number0
$font-size

Optional. Define font size.

Numbernull
$font-weight

Optional. Define font weight.

Numbernull
$content

String to include as content.

String>
$content-color

Optional. Define font color.

Colornull
$vertical-translate

Optional. Apply a vertical translation to enforce centered alignment.

Booltrue

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

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 NameMap key DescriptionMap key TypeMap key Value
background

Background to apply.

Colornull
font-color

Font color to apply.

Colornull
link-color

Enforce font color on link. This does not apply on links with .button class since buttons have their own definition apart.

Colornull
link-color-hover

Enforce font color on link hover event. Alike link-color, this does not apply on buttons.

Colornull
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.

Colornull
h2-color

Font color to apply on title level 2 (like h2 or .title-2).

Colornull
h3-color

Font color to apply on title level 3 (like h3 or .title-3).

Colornull
h4-color

Font color to apply on title level 4 (like h4 or .title-4).

Colornull
h5-color

Font color to apply on title level 5 (like h5 or .title-5).

Colornull
h6-color

Font color to apply on title level 6 (like h6 or .title-6).

Colornull
border

Border shortand properties to define every values for every sides.

Colornull
border-color

Border color to apply.

Colornull
border-width

Border width to apply.

Numbernull
border-style

Border style to apply.

Stringnull

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 NameMap key DescriptionMap key TypeMap key Value
size

Thickness size.

Numbernull
style

Line style according to border style (solid, dotted, dashed).

Stringnull

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

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 Nameparameter Descriptionparameter Typeparameter Default value
$definitions

space sizes map which define at least the keyword name from '$default'.

Mapnull
$axis

axis to apply spaces, can ben either 'horizontal' or 'vertical'.

Stringvertical
$default

Breakpoint name to use as as default class spacing. Won't be included in media queries.

Stringsmall
$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.

Stringpadding
$important

If set to true, property values will include !important mark.

Boolfalse

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

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 Nameparameter Descriptionparameter Typeparameter Default value
$size

Breakpoint name.

Stringnull
$header

Header element name like 'h1'.

Stringnull
$definitions

Map of defined property variables. Supported variables are 'font-size', 'line-height', 'margin-top', 'margin-bottom'.

Mapnull
$font-family

Font family to apply.

Stringnull
$default-lineheight

Defaut line height to fallback to when not defined from '$definitions'.

Numbernull
$default-margin-bottom

Defaut bottom margin to fallback to when not defined from '$definitions'.

Numbernull
$floor-breakpoint

Lowest allowed breakpoint name, every other breakpoint will takes default property value.

Stringnull

Used by

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 Nameparameter Descriptionparameter Typeparameter 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

Mapnull
$floor-breakpoint

Lowest allowed breakpoint, every other breakpoint will takes default property value.

Mapnull
$default-font-family

Default font family to apply.

Mapnull
$default-lineheight

Defaut line height to fallback to when not defined from '$definitions'.

Mapnull
$default-margin-bottom

Defaut bottom margin to fallback to when not defined from '$definitions'.

Mapnull

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

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

font-directory

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

Description

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

Type

String

Used by

functions

strip-units

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

Description

Strip unit from a number.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$number

Number with unit to remove.

Numbernull

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 Nameparameter Descriptionparameter Typeparameter Default value
$url

Relative path to prepend with images directory path or url.

Stringnull

Returns

String

Url such as $image-directory + $url.

Requires

font-url

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

Description

Shortand to augment given url with fonts directory.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$url

Relative path to prepend with fonts directory path or url.

Stringnull

Returns

String

Url such as $font-directory + $url.

Requires

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 Nameparameter Descriptionparameter Typeparameter Default value
$property

Property for which to define calc rule.

Stringnull
$expression

Expression to insert in calc rule.

Stringnull

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 Nameparameter Descriptionparameter Typeparameter Default value
$x noneNumbernull
$y noneNumbernull

Used by

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%,
);