breakpoint

functions

getMediaQuery 

@function getMediaQuery($breakpoint) { ... }

Description

Returns a media query string by resolving the settings from $yy-breakpoint-map map If you have imported Memo from SassyMaps, this is used to store the computed media queries.

Parameters

Name Description Type Default value
$breakpoint

the name of breakpoint from global $yy-breakpoint-map map

 String —

Requires

Used by

Links

getCombinedMediaQuery 

@function getCombinedMediaQuery($breakpoints) { ... }

Description

Returns a combined media query for the passed $breakpoints by calling getMediaQuery for for every breakpoint in the list and comma separating the return values.

Parameters

Name Description Type Default value
$breakpoints

A single breakpoint name or a list of multiple breakpoint names

 String, List —

Requires

Used by

registerBreakpoint 

@function registerBreakpoint($name: false, $mq: false, $media: false, $min-width: false, $max-width: false, $min-height: false, $max-height: false, $orientation: false) { ... }

Description

Registers a new breakpoint in the global $yy-breakpoint-map After you registered a new breakpoint, you can use it in respond-to as well as in font-definitions. Make sure to register your breakpoint before the first use in respond-to or in responsive-font calling a named font that has definitions for this breakpoint.

Any of the parameters are technically optional altought to do something you need to pass at least $name and $mq or any of the other parameters.

Parameters

Name Description Type Default value
$name

the name of the new breakpoint

 String false
$mq

a complete media query string

 String false
$media

the media to use in the media query

 String false
$min-width

min-width

 String false
$max-width

max-width

 String false
$min-height

min-height

 String false
$max-height

max-height

 String false
$orientation

orientation

 String false

Example

$registered: registerBreakpoint(my-new-breakpoint, $media: screen, $min-width: 900px, $orientation: landscape);

Requires

Used by

mixins

registerBreakpoint 

@mixin registerBreakpoint($name: false, $mq: false, $media: false, $min-width: false, $max-width: false, $min-height: false, $max-height: false, $orientation: false) { ... }

Description

This is just a mixin wrapper around @function registerBreakpoint for your convenience if you don't care to check if your breakpoint actually got registered. This allows for shorter sass code as you need to assign the return value of the function to something.

Any of the parameters are technically optional altought to do something you need to pass at least $name and $mq or any of the other parameters.

Parameters

Name Description Type Default value
$name

the name of the new breakpoint

 String false
$mq

a complete media query string

 String false
$media

the media to use in the media query

 String false
$min-width

min-width

 String false
$max-width

max-width

 String false
$min-height

min-height

 String false
$max-height

max-height

 String false
$orientation

orientation

 String false

Example

 @include registerBreakpoint(my-new-breakpoint, $media: screen, $min-width: 900px, $orientation: landscape);

Requires

json 

@mixin json() { ... }

Description

Encodes information about your breakpoints from Sass and allows you to access it from JavaScript to use with libraries like enquire.js without having to repeat your media queries in JS code.

This presumes you are using the yy's respond-to mixin. Or at least include the breakpoint/helpers and define your breakpoints in the prescribed Sass map. To use, simply include it anywhere in your stylesheets like in the example.

It will generate a ::before pseudo element on the document body and store information about breakpoints encoded in a JSON array inside its content property. To read it, you need a few lines of JavaScript, provided in examples/breakpoint/json.js.

Parameters

None.

Example

  $breakpoints: (
     small:     (
         mq: "(min-width:  400px) and (max-width:  767px)",
     ),
     small-up:  (
         min-width: 400px
     ),
     medium:    (
         media: screen,
         min-width: 768px,
         max-width: 991px,
     ),
     medium-up: (
         media: screen,
         min-width: 768px,
     ),
     large:     (
         mq: "(min-width:  992px) and (max-width: 1299px)",
     ),
     large-up:  (
         mq: "(min-width:  992px)",
     ),
     x-large:   (
         mq: "(min-width: 1300px)"
     )
  );
  @include json;

Requires

respond-to 

@mixin respond-to($breakpoint) { ... }

Description

This gets the media query by using getCombinedMediaQuery for the given named breakpoint(s) and wraps everything that is within this mixin in @media

To work, the mixin requires configuration in the form of a Sass map where keys are names for breakpoints/screen sizes you should provide yourself as $yy-breakpoint-map(this is the $breakpoint parameter you pass when calling the mixin) and values are maps of settings for the respectable breakpoint.

If you provide a mq key in the map for the breakpoint, this is used as the media query. Otherwise the media query is build out of media, max-width, min-width, max-height, min-height and orientation If you need other media features in your media query, provide it in the mq value.

Parameters

Name Description Type Default value
$breakpoint

the name of breakpoint from global $yy-breakpoint-map map or a list of breakpoints

 String, List —

Example

$breakpoints: (
   small:     (
       mq: "(min-width:  400px) and (max-width:  767px)",
   ),
   small-up:  (
       min-width: 400px
   ),
   medium:    (
       media: screen,
       min-width: 768px,
       max-width: 991px,
   ),
   medium-up: (
       media: screen,
       min-width: 768px,
   ),
   large:     (
       mq: "(min-width:  992px) and (max-width: 1299px)",
   ),
   large-up:  (
       mq: "(min-width:  992px)",
   ),
   x-large:   (
       mq: "(min-width: 1300px)"
   )
);

#some-selector {
   @include respond-to(small) {
       background: green;
   }
   @include respond-to(medium x-large) {
       background: purple;
   }
}

Throws

  • Unable to generate media query for breakpoint(s) #{$breakpoint}

Requires

Used by

show-for 

@mixin show-for($breakpoints, $display: block) { ... }

Description

This hides the element per default and adds whatever value is passed as $display to the display attribute as long as it's a valid value according to the formal syntax described at https://developer.mozilla.org/en-US/docs/Web/CSS/display

Parameters

Name Description Type Default value
$breakpoints

a list of breakpoint names where the element should have the passed value for display

 List —
$display

the value of the display attribute

 String block

Example

  $breakpoints: (
     small:     (
         mq: "(min-width:  400px) and (max-width:  767px)",
     ),
     medium:    (
         media: screen,
         min-width: 768px,
         max-width: 991px,
     ),
     large-up:  (
         mq: "(min-width:  992px)",
     ),
  );
  @include show-for(medium large-up, flex);

Requires

Used by

block-for 

@mixin block-for($breakpoints) { ... }

Description

This hides the element per default and adds display:block for the passed $breakpoints.

Parameters

Name Description Type Default value
$breakpoints

a list of breakpoint names where the element should have display: block

 List —

Example

  $breakpoints: (
     small:     (
         mq: "(min-width:  400px) and (max-width:  767px)",
     ),
     medium:    (
         media: screen,
         min-width: 768px,
         max-width: 991px,
     ),
     large-up:  (
         mq: "(min-width:  992px)",
     ),
  );
  @include block-for(medium large-up);

Requires

Used by

inline-for 

@mixin inline-for($breakpoints) { ... }

Description

This hides the element per default and adds display:inline for the passed $breakpoints.

Parameters

Name Description Type Default value
$breakpoints

a list of breakpoint names where the element should have display: inline

 List —

Example

  $breakpoints: (
     small:     (
         mq: "(min-width:  400px) and (max-width:  767px)",
     ),
     medium:    (
         media: screen,
         min-width: 768px,
         max-width: 991px,
     ),
     large-up:  (
         mq: "(min-width:  992px)",
     ),
  );
  @include inline-for(medium large-up);

Requires

Used by

inline-block-for 

@mixin inline-block-for($breakpoints) { ... }

Description

This hides the element per default and adds display: inline-block for the passed $breakpoints.

Parameters

Name Description Type Default value
$breakpoints

a list of breakpoint names where the element should have display: inline-block

 List —

Example

  $breakpoints: (
     small:     (
         mq: "(min-width:  400px) and (max-width:  767px)",
     ),
     medium:    (
         media: screen,
         min-width: 768px,
         max-width: 991px,
     ),
     large-up:  (
         mq: "(min-width:  992px)",
     ),
  );
  @include inline-for(medium large-up);

Requires

Used by

hide-for 

@mixin hide-for($breakpoints) { ... }

Description

This hides the element for the passed $breakpoints.

Parameters

Name Description Type Default value
$breakpoints

a list of breakpoint names where the element should have display: none

 List —

Example

  $breakpoints: (
     small:     (
         mq: "(min-width:  400px) and (max-width:  767px)",
     ),
     medium:    (
         media: screen,
         min-width: 768px,
         max-width: 991px,
     ),
     large-up:  (
         mq: "(min-width:  992px)",
     ),
  );
  @include hide-for(large-up);

Requires

Used by

add-visibility-classes 

@mixin add-visibility-classes($breakpoints: $yy-breakpoint-map, $classes: $yy-visibility-classes) { ... }

Description

Generates visibility classes for the passed breakpoints. If not specified, visibility classes for all breakpoints defined in $yy-breakpoint-map are generated. at the moment this mixin is called.

$classes parameter can be any combination of these:

  • show-for
  • block-for (aliase: visible-for)
  • inline-for
  • inline-block-for
  • hide-for (alias: hidden-for)

Note that aliases are not generated by default, they just use the same css.

If you need other visibility classes, you can easily create them on your own by using the mixin @show-for. This mixin adds some unsemantic classes which can be considered a bad thing, so you should probably not go crazy with stuff like inline-for-small flex-for-medium .... That's also the reason for the default of $yy-visibility-classes being show-for, hide-for where show-for results in display: block.

Parameters

Name Description Type Default value
$breakpoints

a list of breakpoint names to generate visibility classes for

 List $yy-breakpoint-map
$classes

a list of classes to generate.

 List $yy-visibility-classes

Example

  $breakpoints: (
     small:     (
         mq: "(min-width:  400px) and (max-width:  767px)",
     ),
     medium:    (
         media: screen,
         min-width: 768px,
         max-width: 991px,
     ),
     large-up:  (
         mq: "(min-width:  992px)",
     ),
  );
  @include add-visibility-classes();
  // then use it like ".show-for-large-up" e.g.

Requires

variables

yy-breakpoint-map 

$yy-breakpoint-map: $breakpoints !default;

Description

The sass map holding the breakpoint information Defaults to $breakpoints

Type

Map

Used by

yy-valid-display-values 

$yy-valid-display-values: inline block list-item inline-block inline-table table table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group flex inline-flex grid inline-grid run-in ruby ruby-base ruby-text ruby-base-container ruby-text-container !default;

Description

The Sass List containing all valid display values. This list is taken from https://developer.mozilla.org/en-US/docs/Web/CSS/display

Type

List

Used by

yy-visibility-classes 

$yy-visibility-classes: show-for, hide-for !default;

Description

The Sass List with the visibility classes that are generated, when you don't pass the $classes parameter to add-visibility-classes Defaults to show-for, block-for, inline-for, inline-block-for, hide-for

Type

List

font

functions

getFontStyle 

@function getFontStyle($fontstyleName) { ... }

Description

Returns the fontstyle as a map by recursively resolving any inherited fontstyle

Parameters

Name Description Type Default value
$fontstyleName

the name of the font, a 1st level key in $fonts

 String —

Returns

The fontstyle as a map of properties

Map

Throws

  • The fontstyle

Requires

Used by

getFontStyleProperty 

@function getFontStyleProperty($fontstyleName, $property) { ... }

Description

Returns the value of a specific property of a fontstyle.

Parameters

Name Description Type Default value
$fontstyleName

the name of the font, a 1st level key in $fonts

 String —
$property

the property you want to get the value for

 String —

Returns

The value of the property or null if it's not available

Any

Requires

registerFontstyle 

@function registerFontstyle($name: false, $inherit: false, $properties: false, $respond-to: false) { ... }

Description

Registers a new fontstyle in the global $yy-fonts-map

Any of the parameters are technically optional altought to do something you need to pass at least $name and either inherit (makes not a lot of sense alone), a map of properties and any adaption rules for breakpoints in respond-to.

Parameters

Name Description Type Default value
$name

the name of the new fontstyle

 String false
$inherit

the name of the fontstyle to inherit

 String false
$properties

a map of CSS properties

 String false
$respond-to

a map of breakpoint names containing a map of css properties

 String false

Example

$registered: registerFontstyle($name: my-new-fontstyle, $inhert: an-existing-fontstyle, ( font-size: 20px, line-height: 1.2em ), ( medium-up: ( font-size: 23px ) );

Requires

Used by

getPropertyForMedia 

@function getPropertyForMedia($fontstyleName, $property, $media) { ... }

Description

Returns the value of $property key for the given $fontstyleName and $media If $media is not found in the respond-to map of the fontstyle, it returns the value that is defined at the 1st level of the fontstyle.

Parameters

Name Description Type Default value
$fontstyleName

the name of the font, passed to getFontStyle

 String —
$property

the property that should be returned

 String —
$media

the key in respond-to map of fontstyle

 String —

Returns

The property value

String

Requires

Used by

getFontSize 

@function getFontSize($fontstyleName, $media) { ... }

Description

Wraps around getPropertyForMedia and returns the font-size attribute

Parameters

Name Description Type Default value
$fontstyleName

the name of the font, passed to getPropertyForMedia

 String —
$media

the key in respond-to map of fontstyle

 String —

Returns

The font-size value

String

Requires

getLineHeight 

@function getLineHeight($fontstyleName, $media) { ... }

Description

Wraps around getPropertyForMedia and returns the line-height attribute

Parameters

Name Description Type Default value
$fontstyleName

the name of the font, passed to getPropertyForMedia

 String —
$media

the key in respond-to map of fontstyle

 String —

Returns

The fline-height value

String

Requires

Used by

getFontFamilyMap 

@function getFontFamilyMap($fontstyleName, $media) { ... }

Description

Returns the map defined in $font-families for the given $fontstyleName It looks for a key in $font-families named after the font-family attribute of the given $fontstyleName

Parameters

Name Description Type Default value
$fontstyleName

the name of the font, passed to getPropertyForMedia

 String —
$media

the key in respond-to map of fontstyle

 String —

Returns

The font-family map

Map

Requires

Used by

getLineHeightPartTop 

@function getLineHeightPartTop($fontstyleName, $media) { ... }

Description

Returns the value of line-height-part-top from the fontFamilyMap it gets from getFontFamilyMap

Parameters

Name Description Type Default value
$fontstyleName

the name of the font, passed to getFontFamilyMap

 String —
$media

the key in respond-to map of fontstyle

 String —

Returns

line-height-part-top

Int

Requires

Used by

getLineHeightPartBottom 

@function getLineHeightPartBottom($fontstyleName, $media) { ... }

Description

Returns the value of line-height-part-bottom from the fontFamilyMap it gets from getFontFamilyMap

Parameters

Name Description Type Default value
$fontstyleName

the name of the font, passed to getFontFamilyMap

 String —
$media

the key in respond-to map of fontstyle

 String —

Returns

line-height-part-bottom

Int

Requires

Used by

getPaddingForHeight 

@function getPaddingForHeight($fontstyleName, $media, $padding-left: 0, $padding-right: 0) { ... }

Description

Returns the padding to be applied to an element with the given $fontstyleName inside of a respond-to block with the given $media to have the $desiredHeight. This only works if the text doesn't wrap in two lines. It's useful to place the text in the vertical center of the block (e.b. for buttons) if no flexbox support is available and the font is not renderd in the vertical center of it's line-height. pass $padding-left and $padding-right to be included in the resulting shortcut value for padding

Parameters

Name Description Type Default value
$fontstyleName

the name of the font, passed to getFontFamilyMap

 String —
$media

the key in respond-to map of fontstyle

 String —
$padding-left — String 0
$padding-right — String 0

Returns

The shortcut value to be applied to padding

String

Requires

mixins

registerFontstyle 

@mixin registerFontstyle($name: false, $inherit: false, $properties: false, $respond-to: false) { ... }

Description

This is just a mixin wrapper around @function registerBreakpoint for your convenience if you don't care to check if your breakpoint actually got registered. This allows for shorter sass code as you need to assign the return value of the function to something.

Parameters

Name Description Type Default value
$name

the name of the new fontstyle

 String false
$inherit

the name of the fontstyle to inherit

 String false
$properties

a map of CSS properties

 String false
$respond-to

a map of breakpoint names containing a map of css properties

 String false

Example

$registered: registerFontstyle($name: my-new-fontstyle, $inhert: an-existing-fontstyle, ( font-size: 20px, line-height: 1.2em ), ( medium-up: ( font-size: 23px ) );

Requires

responsive-font 

@mixin responsive-font($fontstyleName, $line-height: false, $color: false, $extendFontstyle: $responsive-font-extend-fontstyles) { ... }

Description

Sets all properties defined in the global map $fonts for the given $fontstyleName

Parameters

Name Description Type Default value
$fontstyleName

the name of the font, a 1st level key in $fonts

 String —
$line-height

if given, overwrites the line-height from the font settings

 *, Boolean false
$color

if given, overwrites the color from the font settings

 *, Boolean false
$extendFontstyle

if true @extend is used, otherwise properties are written to the selector that calls this mixin

 Boolean $responsive-font-extend-fontstyles

Example

$font-family-helvetica: "Helvetica, sans-serif";
$fonts: (
  // give your fontstyle a name and define how they should look
  fontstyle-one: (
    font-size: 30px,       //this is required and must be in px if you want to use getPaddingForHeight()
    line-height: 35px,     //this is required and must be in px if you want to use getPaddingForHeight()
    font-family: $font-family-helvetica,
    font-weight: normal,
    color: black
    respond-to: (          //define how the font responds to different media queries
      medium-up: (         //use the named media queries from yy/breakpoint/respond-to
        font-size: 32px,   //overwrite or add additional properties as you like
        color: red
      )
    )
  ),
  fontstyle-two: (
    inherit: fontstyle-one,    //you can inherit other fontstyles
    font-size: 25px,
    line-height: 30px,
    font-style: italic,
    color: grey
  ),
);

Requires

Used by

responsive-font-no-extend 

@mixin responsive-font-no-extend($fontstyleName, $line-height, $color) { ... }

Description

Just a wrapper around responsive-font that sets $extendFontstye no false

Parameters

Name Description Type Default value
$fontstyleName

the name of the font, a 1st level key in $fonts

 String —
$line-height

if given, overwrites the line-height from the font settings

 *, Boolean —
$color

if given, overwrites the color from the font settings

 *, Boolean —

Requires

_setFontStyle 

@mixin _setFontStyle($fontstyle, $line-height, $color) { ... }

Description

Sets all the properties in $fontstyle, ignores keys respond-to and inherit If line-height or $color is given, this overwrites the key from the given map

Parameters

Name Description Type Default value
$fontstyle

a map of properties to apply

 String —
$line-height

if given, overwrites the line-height from the font settings

 *, Boolean —
$color

if given, overwrites the color from the font settings

 *, Boolean —

Used by

_setAllFontStyles 

@mixin _setAllFontStyles($fontstyle, $line-height, $color) { ... }

Description

Sets all the properties in $fontstyle for all breakpoints by using respond-to mixin and calling _setFontStyle If line-height or $color is given, this overwrites the key from the given map for all breakpoints

Parameters

Name Description Type Default value
$fontstyle

a map of properties to apply

 String —
$line-height

if given, overwrites the line-height from the font settings

 *, Boolean —
$color

if given, overwrites the color from the font settings

 *, Boolean —

Requires

Used by

variables

yy-fonts-map 

$yy-fonts-map: $fonts !default;

Description

The sass map holding the font specs Defaults to $fonts

Type

Map

Used by

responsive-font-extend-fontstyles 

$responsive-font-extend-fontstyles: true !default;

Description

If true, responsive-font uses @extend by default

Type

Bool

hacks

mixins

clearfix 

@mixin clearfix($extend: $clearfix-use-extend) { ... }

Description

Adds the micro-clearfix hack to the element that called this mixin

Parameters

Name Description Type Default value
$extend

if true, uses @extend %clearfix

 Boolean $clearfix-use-extend

variables

clearfix-use-extend 

$clearfix-use-extend: false !default;

Description

If true, clearfix uses @extend by default

Type

Bool

rempxfallback

mixins

remPxFallback 

@mixin remPxFallback($property, $values) { ... }

Description

Adds the passed property with the given value(s) in rem and in px as fallback. This file also includes the following wrapper mixins around remPxFallback():

  • font-size
  • line-height
  • margin
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  • padding
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Parameters

Name Description Type Default value
$property

the css property

 String —
$values

the value(s) with px or rem unit

 String, List —

Requires

variables

remBase 

$remBase: 16 !default;

Description

Used as the base for rem/px calculations in remPxFallback

Type

Int

Used by

sprite

mixins

responsive-sprite 

@mixin responsive-sprite() { ... }

Description

astina-logo {

@include responsive-sprite(logos, astina);

}

sass-logo {

@include responsive-sprite(logos, sass);

}

Parameters

None.