General

variables

z-root-font-size

$z-root-font-size: 16px !default;

Description

The root font-size, all browsers use 16px as base font-size.

Type

Number

Used by

[function] z-em
[function] z-rem

z-breakpoints

$z-breakpoints: (
    tapo: 768px,  // Tablet-portrait
    taho: 1024px, // Tablet-horizontal
    desk: 1920px, // Desktop
) !default;

Description

The breakpoints available to the z-media-* mixins.
Use px to specify the window width for each breakpoint.

Type

Map

Used by

[mixin] z-media-down
[mixin] z-media-up
[mixin] z-media-between

mixins

z-better-text-rendering

@mixin z-better-text-rendering() { ... }

Description

Adds properties to improve text rendering in browsers.

Parameters

None.

Example

body {
    @include z-better-text-rendering;
}

Output

  body {
      font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
  }

Author

Marc

z-box-sizing

@mixin z-box-sizing() { ... }

Description

Enabled box-sizing, because why not? o_O

Parameters

None.

Example

Enables box-sizing for element.

.box-this {
    @include z-box-sizing;
}

Output

  .box-this {
      box-sizing: border-box;
  }

Author

Marc

z-clearfix

@mixin z-clearfix() { ... }

Description

Clearfix for daaaays!

Parameters

None.

Example

Clearfix the element.

.clearfix-this {
    @include z-clearfix;
}

Output

Adds the ::after table clearfix.

  .clearfix-this::after {
      display: table;
      clear: both;
      content: '';
  }

Author

Marc

z-media-down

@mixin z-media-down($breakpoint) { ... }

Description

Mixin for @media (max-width).

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$breakpoint`	Either a px value or the name of a breakpoint available in `$z-breakpoints`.	`Number` or `String`	— none

Content

This mixin allows extra content to be passed (through the @content directive).

Example

Include a max-width query for 500px.

@include z-media-down(500px) {
    .test {
        color: green;
    }
}

Output

Outputs a max-width media query.

  @media (max-width: 31.1875em) {
      .test {
          color: green;
      }
  }

Requires

[function] z-em
[variable] z-breakpoints

Author

Marc

z-media-up

@mixin z-media-up($breakpoint) { ... }

Description

Mixin for @media (min-width).

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$breakpoint`	Either a px value or the name of a breakpoint available in `$z-breakpoints`.	`Number` or `String`	— none

Content

This mixin allows extra content to be passed (through the @content directive).

Example

Include a min-width query for 500px.

@include z-media-up(500px) {
    .test {
        color: green;
    }
}

Output

Outputs a min-width media query.

  @media (min-width: 31.25em) {
      .test {
          color: green;
      }
  }

Requires

[function] z-em
[variable] z-breakpoints

Author

Marc

z-media-between

@mixin z-media-between($breakpoint-min, $breakpoint-max) { ... }

Description

Mixin for @media (min-width and max-width).

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$breakpoint-min`	Either a px value or the name of a breakpoint available in `$z-breakpoints`.	`Number` or `String`	— none
`$breakpoint-max`	Either a px value or the name of a breakpoint available in `$z-breakpoints`.	`Number` or `String`	— none

Content

This mixin allows extra content to be passed (through the @content directive).

Example

Include a media query between 500px and 1000px

@include z-media-between(500px, 1000px) {
    .test {
        color: green;
    }
}

Output

Outputs a min- and max-width media query.

  @media (min-width: 31.25em) and (max-width: 62.4375em) {
      .test {
          color: green;
      }
  }

Requires

[function] z-em
[variable] z-breakpoints

Author

Marc

z-rem

@mixin z-rem($value, $property: 'font-size') { ... }

Description

Mixin to convert px to rem and provide a px fallback.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	Value or value list to remove unit from.	`Number` or `List`	— none
`$property`	The property that should be set.	`String`	`'font-size'`

Example

Set font-size and margin to 20px and 20rem

@include z-rem(20px);
@include z-rem(20px, 'margin');

Output

Outputs property and value in px and rem.

    font-size: 16px
    font-size: 1rem

Requires

[function] z-rem

Author

Marc

functions

z-em

@function z-em($value, $value: $z-root-font-size) { ... }

Description

Converts given value or value list from px to em.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	Value or value list to convert.	`Number` or `List`	— none
`$value`	Parent font-size.	`Number`	`$z-root-font-size`

Returns

Number —

Converted values in em.

Requires

[function] z-strip-unit
[variable] z-root-font-size

Used by

[mixin] z-media-down
[mixin] z-media-up
[mixin] z-media-between

Author

Marc

z-escape-number

@function z-escape-number($number) { ... }

Description

This function escapes numbers that will be used as class names.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$number`	The number that should be escaped.	`Number`	— none

Returns

Number —

Escaped number.

Example

$escaped: z-escape-numer(1) // results in \31
$escaped: z-escape-numer(10) // results in \31 0
$escaped: z-escape-numer(333) // results in \33 33

Author

Marc

z-invert-value

@function z-invert-value($value) { ... }

Description

Inverts given value or value list.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	The number or value list that should be inverted.	`Number` or `List`	— none

Returns

Number —

Inverted number or value list.

Example

$inverted: z-invert-value(20) // results in -20

Author

Marc

z-rem

@function z-rem($value) { ... }

Description

Converts given value or value list from px to rem (based on $z-root-font-size).

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	Value or value list to convert.	`Number` or `List`	— none

Returns

Number —

Converted values in rem.

Requires

[function] z-strip-unit
[variable] z-root-font-size

Used by

[mixin] z-rem
[function] z-xdem-to-rem

Author

Marc

z-strip-unit

@function z-strip-unit($number) { ... }

Description

Strips the unit (px, rem ...) from the given value.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$number`	Number to remove unit from.	`Number`	— none

Returns

Number —

Unitless number

Example

Returns 20.

$unitless: z-strip-unit(20px);

Used by

[function] z-em
[function] z-rem
[function] z-xdem-to-rem

Author

Marc

z-xdem-to-rem

@function z-xdem-to-rem($xdEm, $fontSize) { ... }

Description

Converts the em values from XD (letter-spacing) to rem, based on the current fontSize.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$xdEm`	The value from Adobe XD, letter-spacing for example	`Number`	— none
`$fontSize`	The current font-size in px.	`Number`	— none

Returns

Number —

Rem value.

Requires

[function] z-rem
[function] z-strip-unit

Author

Marc