@absolunet/nwayo-toolbox

functions

konstan-get

@function konstan-get($path) { ... }
View source

Description

Get a konstan value.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$path

Path in dot notation.

String none

Returns

Any type —

The value.

Requires

Used by

konstan-has-key

@function konstan-has-key($path) { ... }
View source

Description

Check if a path exists in konstan.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$path

Path in dot notation.

String none

Returns

Boolean

If path exists in konstan.

Requires

nwayo-assets-path

@function nwayo-assets-path($file, $component, $type) { ... }
View source

Description

Get asset url based on current bundle.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$file

Filename.

String none
$component

Component name.

String none
$type

Asset type [images|inline|fonts].

String none

Returns

String

Asset url.

Requires

Used by

nwayo-build-path

@function nwayo-build-path($file, $component, $type) { ... }
View source

Description

Get asset absolute build path based on current bundle.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$file

Filename.

String none
$component

Component name.

String none
$type

Asset type [images|fonts].

String none

Returns

String

Asset absolute build path.

Requires

Used by

nwayo-zindex

@function nwayo-zindex($scopes, $scope, $delta: 0) { ... }
View source

Description

Get a z-index relative to a defined scope.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$scopes

Scope names and base z-index values.

Map none
$scope

Scope to use.

String none
$delta

Variance to apply to the scope value.

Number0

Returns

Number

Final z-index value.

nwayo-breakpoint-media

@function nwayo-breakpoint-media($breakpoint, $direction) { ... }
View source

Description

Get a breakpoint media query.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$breakpoint

Breakpoint pixel value (unitless).

Number none
$direction

Include smaller or larger sizes [up|down].

String none

Returns

String

Media query without the "@media".

Requires

nwayo-cacheinvalidator-querystring

@function nwayo-cacheinvalidator-querystring($file) { ... }
View source

Description

Get a cache invalidation query string based on file content.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$file

File absolute path.

String none

Returns

String

Complete query string.

Used by

nwayo-map-deep-split-path

@function nwayo-map-deep-split-path($path) { ... }
View source

Description

Extract levels of a dot notation path.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$path

Path in dot notation.

String none

Returns

List

Levels.

Used by

nwayo-map-deep-has-key

@function nwayo-map-deep-has-key($map, $path) { ... }
View source

Description

Check if a path exists in a map.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Map to query.

Map none
$path

Path in dot notation.

String none

Returns

Boolean

If path exists in map.

Requires

Used by

nwayo-map-deep-get

@function nwayo-map-deep-get($map, $path) { ... }
View source

Description

Get a map value via a dot notation path.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Map to query.

Map none
$path

Path in dot notation.

String none

Returns

Any type —

The value.

Requires

Used by

nwayo-str-replace

@function nwayo-str-replace($subject, $search, $replace: "") { ... }
View source

Description

Replace all occurrences of the search text with the replacement text.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$subject

Text to search within.

String none
$search

Text to find.

String none
$replace

Text to replace the occurences.

String""

Returns

String

Replaced text.

Used by

nwayo-color-replace

@function nwayo-color-replace($subject, $search, $replace) { ... }
View source

Description

Replace all occurrences of the search color with the replacement color.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$subject

Text to search within.

String none
$search

Color to find.

Color none
$replace

Color to replace the occurences.

Color none

Returns

String

Replaced text.

Requires

Used by

nwayo-to-string

@function nwayo-to-string($value) { ... }
View source

Description

Cast to string.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

Value to cast.

Any none

Returns

String

Value in string format.

Used by

nwayo-list-contains

@function nwayo-list-contains($list, $value) { ... }
View source

Description

Check if a list contains a value.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$list

List to check.

List none
$value

Value to find.

Any none

Returns

Boolean

If list contains value.

nwayo-svg-data-uri

@function nwayo-svg-data-uri($svg) { ... }
View source

Description

Transform a SVG to a data-uri safe version. String chunked up in order to avoid "stack level too deep" error.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$svg

SVG content.

String none

Returns

String

SVG ready for data-uri.

Requires

Used by

Links

rem-calc

@function rem-calc($values, $base: null) { ... }
View source

Description

Converts one or more pixel values into matching rem values.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$values

One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.

Number or List none
$base

The base value to use when calculating the rem. If you're using Foundation out of the box, this is 16px. If this parameter is null, the function will reference the $global-font-size variable as the base.

Numbernull

Returns

List

A list of converted values.

Requires

Used by

Links

mixins

nwayo-bg-image-styles

@mixin nwayo-bg-image-styles($file, $component, $inline: false, $color: false) { ... }
View source

Description

Background image via a component asset.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$file

Filename.

String none
$component

Component name.

String none
$inline

Does the asset will be inlined.

Booleanfalse
$color

Remplacement colors.

Color or List or Mapfalse

Example

Default usage outputs the image url, with a cache busting query string, based on the current bundle.

@include nwayo-bg-image-styles("ipsum.png", "lorem");
// background-image: url("/build/images/lorem/ipsum.png?v=x1y2z3");

If filename ends with @2x, it outputs the image url with a media query for high density image and a fallback for default image.

@include nwayo-bg-image-styles("ipsum@2x.png", "lorem");
// @media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
//   background-image: url("/build/images/lorem/ipsum@2x.png?v=x4y5z6");
// }
// background-image: url("/build/images/lorem/ipsum.png?v=x7y8z9");

If a binary image is inlined, it outputs a Base64 data-uri.

@include nwayo-bg-image-styles("ipsum.png", "lorem", $inline:true);
// background-image: url("data:image/png;base64,x1y2z3==");

If a SVG is inlined, it outputs a raw source data-uri.

@include nwayo-bg-image-styles("ipsum.svg", "lorem", $inline:true);
// background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%3E%3Cpath d='xyz' fill='#c0ffee'/%3E%3Cpath d='xyz' fill='#ba0bab'/%3E%3Cpath d='xyz' fill='#888888'/%3E%3C/svg%3E");

If has a remplacement color, it replaces the default $nwayo-svg-replacement-1-color color before outputing,

@include nwayo-bg-image-styles("ipsum.svg", "lorem", $inline:true, $color:#ff0000);
// background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%3E%3Cpath d='xyz' fill='#c0ffee'/%3E%3Cpath d='xyz' fill='#ff0000'/%3E%3Cpath d='xyz' fill='#888888'/%3E%3C/svg%3E");

If has a list of remplacement colors, it replaces the default $nwayo-svg-replacement-colors colors before outputing.

@include nwayo-bg-image-styles("ipsum.svg", "lorem", $inline:true, $color:(#ff0000, #0000ff));
// background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%3E%3Cpath d='xyz' fill='#0000ff'/%3E%3Cpath d='xyz' fill='#ff0000'/%3E%%3Cpath d='xyz' fill='#888888'/%3E3C/svg%3E");

If has a map of remplacement colors, it replaces key colors with value colors before outputing.

@include nwayo-bg-image-styles("ipsum.svg", "lorem", $inline:true, $color:(#888888: #abcdef));
// background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%3E%3Cpath d='xyz' fill='#c0ffee'/%3E%3Cpath d='xyz' fill='#ba0bab'/%3E%3Cpath d='xyz' fill='#abcdef'/%3E%3C/svg%3E");

Output

Background image property.

Requires

Used by

nwayo-scalable-icon-styles

@mixin nwayo-scalable-icon-styles($file, $component, $color) { ... }
View source

Description

Inline background image that scales with the HTML element.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$file

Filename.

String none
$component

Component name.

String none
$color

Remplacement colors.

Color or List or Map none

Example

@include nwayo-scalable-icon-styles("ipsum.svg", "lorem");
@include nwayo-scalable-icon-styles("ipsum.svg", "lorem", $color:#ff0000);
@include nwayo-scalable-icon-styles("ipsum.svg", "lorem", $color:(#ff0000, #0000ff));
@include nwayo-scalable-icon-styles("ipsum.svg", "lorem", $color:(#888888: #abcdef));

Output

Background image properties that stick its dimensions to the HTML element.

Requires

Used by

nwayo-scalable-icon-colored-states-styles

@mixin nwayo-scalable-icon-colored-states-styles($file, $component, $state: default, $states: ()) { ... }
View source

Description

Inline scalable background image associating replacement colors to states.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$file

Filename.

String none
$component

Component name.

String none
$state

Chosen state.

Stingdefault
$states

Map of states and their remplacement colors.

Map()

Example

@mixin lorem-ipsum($state) {
  @include nwayo-scalable-icon-colored-states-styles("ipsum.svg", "lorem", $state, $states:(
    default: #ff0000,
    hover:   (#ff0000, #0000ff),
    active:  (#888888: #abcdef)
  )));
}

@include lorem-ipsum();
@include lorem-ipsum(hover);
@include lorem-ipsum(active);

Output

Scalable background image properties.

Requires

nwayo-load-font-styles

@mixin nwayo-load-font-styles($name, $filename, $component, $weight: normal, $style: normal) { ... }
View source

Description

WOFF (WOFF2 if file exists) @font-face declaration via component assets.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Name of the font.

String none
$filename

Filename without extension of WOFF/WOFF2 files.

String none
$component

Component name.

String none
$weight

Weight of the font.

Stringnormal
$style

Style of the font.

Stringnormal

Example

@include nwayo-load-font-styles("Open Sans", "opensans-regular-webfont", "lorem");
@include nwayo-load-font-styles("Open Sans", "opensans-italic-webfont", "lorem", $style:italic);
@include nwayo-load-font-styles("Open Sans", "opensans-bold-webfont", "lorem", $weight:700);
@include nwayo-load-font-styles("Open Sans", "opensans-bolditalic-webfont", "lorem", $weight:700, $style:italic);

Output

Font face declaration with a cache busting query string.

Requires

nwayo-pseudo-image-styles

@mixin nwayo-pseudo-image-styles($width, $height: $width) { ... }
View source

Description

Prepare a ::before/::after pseudo-element to be used with a background image.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$width

Width.

Number none
$height

Height.

Number$width

Output

Empty content, width and height.

nwayo-textreplace-image-styles

@mixin nwayo-textreplace-image-styles($width, $height: $width) { ... }
View source

Description

Hide text inside an element to replace it by a background image.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$width

Width.

Number none
$height

Height.

Number$width

Output

Replaced width/height with padding that overflows the content outside the visible container.

nwayo-clearfix-styles

@mixin nwayo-clearfix-styles() { ... }
View source

Description

Force an element to self-clear its children.

Parameters

None.

Output

Ye Olde Clearfix.

Used by

Links

nwayo-visually-hidden-styles

@mixin nwayo-visually-hidden-styles() { ... }
View source

Description

Visually hide an element without removing its presence.

Parameters

None.

Output

Clipped content.

Requires

nwayo-scaling-block-styles

@mixin nwayo-scaling-block-styles($width: 2, $height: 1, $subselector: .scaling-block-content) { ... }
View source

Description

Make an element scalable within a ratio.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$width

Width ratio.

Number2
$height

Height ratio.

Number1
$subselector

Subelement selector.

String.scaling-block-content

Output

Scalable element that requires a subelement accessible via $subselector.

nwayo-valign-parent-styles

@mixin nwayo-valign-parent-styles($subselector: .valign-child) { ... }
View source

Description

Center vertically the child within its parent.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$subselector

Subelement selector.

String.valign-child

Output

A container which vertically centers a subelement accessible via $subselector.

nwayo-list-reset-styles

@mixin nwayo-list-reset-styles() { ... }
View source

Description

Reset basic list styles (spacing, markers).

Parameters

None.

Output

Resetter.

Used by

nwayo-list-inline-styles

@mixin nwayo-list-inline-styles() { ... }
View source

Description

Reset basic list styles to make it inline (spacing, markers).

Parameters

None.

Output

Resetter.

Requires

nwayo-placeholder-styles

@mixin nwayo-placeholder-styles($selector: .placeholder) { ... }
View source

Description

Define input and select placeholder.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$selector

Selector for manual placeholder.

String.placeholder

Output

Styled placeholders.

nwayo-select-reset-styles

@mixin nwayo-select-reset-styles() { ... }
View source

Description

Reset select styles.

Parameters

None.

Output

Resetted select.

nwayo-input-file-button-styles

@mixin nwayo-input-file-button-styles() { ... }
View source

Description

Customize input file button.

Parameters

None.

Output

Styled button.

nwayo-arrow-styles

@mixin nwayo-arrow-styles($direction: right, $size: .625em, $color) { ... }
View source

Description

Pseudo-arrow via creative border management.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$direction

Pointing direction (up, down, left, right).

Stringright
$size

Size.

Number.625em
$color

Color.

Color none

Output

Pseudo-arrow.

nwayo-column-list-styles

@mixin nwayo-column-list-styles($subselector: > li, $nb-column: 2, $bullet-spacing: 1.0625em, $column-spacing: 1.875em, $row-spacing: .625em, $base-style: true) { ... }
View source

Description

Stylize a list into columns.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$subselector

Subelement selector.

String> li
$nb-column

Number of columns.

Number2
$bullet-spacing

Spacing reserved outside of

  • for a bullet.

  • Number1.0625em
    $column-spacing

    Spacing between columns.

    Number1.875em
    $row-spacing

    Spacing between rows.

    Number.625em
    $base-style

    Wether or not to output base styles.

    Booleantrue

    Output

    Columned list.

    Requires

    variables

    nwayo-basic-size

    $nwayo-basic-size: 16;
    View source

    Description

    All rem / em sizes depend on this.

    Type

    Number

    Used by

    nwayo-svg-replacement-1-color

    $nwayo-svg-replacement-1-color: #ba0bab;
    View source

    Description

    First replacement color for SVG in nwayo-bg-image-styles.

    Type

    Color

    Used by

    nwayo-svg-replacement-2-color

    $nwayo-svg-replacement-2-color: #c0ffee;
    View source

    Description

    Second replacement color for SVG in nwayo-bg-image-styles.

    Type

    Color

    Used by

    nwayo-svg-replacement-colors

    $nwayo-svg-replacement-colors: ($nwayo-svg-replacement-1-color, $nwayo-svg-replacement-2-color);
    View source

    Description

    All replacement colors for SVG in nwayo-bg-image-styles.

    Type

    List<color>

    Requires

    Used by

    nwayo-social-colors

    $nwayo-social-colors: (
    	'facebook': #1877f2,
    	'messenger': #000000,
    	'pinterest': #d6001c,
    	'twitter': #1d9bf0,
    	'instagram': #bc2a8d,
    	'youtube': #ff0000,
    	'vimeo': #1ab7ea,
    	'linkedin': #0077b5,
    	'whatsapp': #25d366,
    	'snapchat': #fffc00,
    	'tiktok': #000000
    );
    View source

    Type

    Map<string,color>

    Map structure

    Map<String,Color> key NameMap<String,Color> key DescriptionMap<String,Color> key TypeMap<String,Color> key Value
    facebook

    Facebook. (https://www.facebook.com/brand/resources/facebookapp/logo)

    Color none
    messenger

    Messenger. (https://www.facebook.com/brand/resources/messenger/messenger-brand)

    Color none
    pinterest

    Pinterest. (https://business.pinterest.com/brand-guidelines/)

    Color none
    twitter

    Twitter. (https://about.twitter.com/en/who-we-are/brand-toolkit)

    Color none
    instagram

    Instagram. (https://www.facebook.com/brand/resources/instagram/instagram-brand/ https://www.facebook.com/brand/resources/instagram/icons)

    Color none
    youtube

    YouTube. (https://www.youtube.com/howyoutubeworks/resources/brand-resources/#logos-icons-and-colors)

    Color none
    vimeo

    Vimeo. (https://press.vimeo.com/brand-guidelines/)

    Color none
    linkedin

    LinkedIn. (https://brand.linkedin.com/content/brand/global/en_us/index/visual-identity/color-palettes)

    Color none
    whatsApp

    WhatsApp. (https://www.facebook.com/brand/resources/whatsapp/logo)

    Color none
    snapchat

    Snapchat. (https://snap.com/en-US/brand-guidelines)

    Color none
    tiktok

    TikTok. (https://www.tiktok.com/en)

    Color none

    nwayo-sansserif-font

    $nwayo-sansserif-font: Helvetica, Arial, Verdana, sans-serif;
    View source

    Description

    Default sans-serif fonts fallback.

    Type

    String

    nwayo-serif-font

    $nwayo-serif-font: 'Times New Roman', Times, serif;
    View source

    Description

    Default serif fonts fallback.

    Type

    String

    nwayo-monospace-font

    $nwayo-monospace-font: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', Courier, monospace;
    View source

    Description

    Default monospace fonts fallback.

    Type

    String

    nwayo-thin-weight

    $nwayo-thin-weight: 100;
    View source

    Description

    Thin / Hairline font weight.

    Type

    Number

    nwayo-extralight-weight

    $nwayo-extralight-weight: 200;
    View source

    Description

    Ultra-light / Extra-light font weight.

    Type

    Number

    nwayo-light-weight

    $nwayo-light-weight: 300;
    View source

    Description

    Light font weight.

    Type

    Number

    nwayo-normal-weight

    $nwayo-normal-weight: 400;
    View source

    Description

    Normal / Regular font weight.

    Type

    Number

    nwayo-medium-weight

    $nwayo-medium-weight: 500;
    View source

    Description

    Medium font weight.

    Type

    Number

    nwayo-semibold-weight

    $nwayo-semibold-weight: 600;
    View source

    Description

    Semi-bold / Demi-bold font weight.

    Type

    Number

    nwayo-bold-weight

    $nwayo-bold-weight: 700;
    View source

    Description

    Bold font weight.

    Type

    Number

    nwayo-extrabold-weight

    $nwayo-extrabold-weight: 800;
    View source

    Description

    Extra-bold / Ultra-bold font weight.

    Type

    Number

    nwayo-black-weight

    $nwayo-black-weight: 900;
    View source

    Description

    Heavy / Black font weight.

    Type

    Number

    nwayo-extrablack-weight

    $nwayo-extrablack-weight: 950;
    View source

    Description

    Extra-black / Ultra-black font weight.

    Type

    Number

    nwayo-bull-char

    $nwayo-bull-char: '\2022';
    View source

    Description

    "•" character.

    Type

    String

    nwayo-times-char

    $nwayo-times-char: '\00D7';
    View source

    Description

    "×" character.

    Type

    String

    nwayo-endash-char

    $nwayo-endash-char: '\2013';
    View source

    Description

    "–" character.

    Type

    String

    nwayo-textfields-selector

    $nwayo-textfields-selector: 'input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="date"], input[type="number"]';
    View source

    Description

    All text-like inputs.

    Type

    String

    nwayo-hover-selector

    $nwayo-hover-selector: 'html:not([data-whatintent="touch"]) &:hover';
    View source

    Description

    :hover selector active only on non-touch devices according to What Input?.

    Type

    String

    nwayo-docloaded-selector

    $nwayo-docloaded-selector: 'body.document-loaded';
    View source

    Description

    Body selector active only after document has loaded.

    Type

    String

    debug-red

    $debug-red: #ee2c2c;
    View source

    Description

    Pleasant red for debugging.

    Type

    Color

    debug-orange

    $debug-orange: #ffa500;
    View source

    Description

    Pleasant orange for debugging.

    Type

    Color

    debug-yellow

    $debug-yellow: #ffdf33;
    View source

    Description

    Pleasant yellow for debugging.

    Type

    Color

    debug-green

    $debug-green: #76ee00;
    View source

    Description

    Pleasant green for debugging.

    Type

    Color

    debug-blue

    $debug-blue: #1e90ff;
    View source

    Description

    Pleasant blue for debugging.

    Type

    Color

    debug-purple

    $debug-purple: #a020f0;
    View source

    Description

    Pleasant purple for debugging.

    Type

    Color