hacks

Overcomming cross-browser bugs with clever css-tricks

css

._flex-min-height

._flex-min-height { ... }

Description

Fix min height flex container not aligning children in IE

Example

— Fix min height flex container not aligning children in IE

<div class="_flex-min-height-">
 <div class="my-flex-container-which-have-min-height-set">

Links

Author

  • Flexbugs

objects

variables

flout-breakpoints-list

$flout-breakpoints-list: $qnorr-grid-breakpoints-list !default;

Description

costumize breakpoints list

Type

Map [$qnorr-grid-breakpoints-list]

Links

flout-flags

$flout-flags: (
  "expand--",
  "inline--",
  "auto--",
  "nowrap--",
  "wrap-reverse--",
  "row--",
  "row-reverse--",
  "col--",
  "col-reverse--",
  "match-height--",
  "align-{start|center|end|baseline}--",
  "align-content-{start|center|end|baseline}--",
  "justify-{start|center|end|baseline}--",
);

Description

  1. Flag — each attribute passed to data-flout/flitem
  2. Why the "--" suffix after each flag?
    • Because we use contain selector (*=) and withtout the flag suffix, base flags styles would also be applied when only the breakpoint Flag was used. flag@bp contains flag, so flag styles would be applied. Check links for interactive explanation demo
  3. But you could use only one "-" to have the same effect
    • yes but that looks like a typo, and two make it look intentional.
  4. Also it's the inverse of css variables notation.

Type

List

Example

changing flow direction at breakpoints

<div data-flout="col-- row@md-- row-reverse@lg--">

Links

flitem-flags

$flitem-flags: (
  "auto-width--",
  "expand--",
  "expand-auto--",
  "expand-break--",
  "grow--",
  "!grow--",
  "shrink--",
  "!shrink--",
  "justify-{start|center|end}-",
  "first--",
  "last--"
);

Description

available data-flitem flags values

  1. Flag — each attribute passed to data-flout/flitem
  2. Why the "--" suffix after each flag?
    • Because we use contain selector (*=) and withtout the flag suffix, base flags styles would also be applied when only the breakpoint Flag was used. flag@bp contains flag, so flag styles would be applied. Check links for interactive explanation demo
  3. But you could use only one "-" to have the same effect
    • yes but that looks like a typo, and two make it look intentional.
  4. Also it's the inverse of css variables notation.

Type

List

Example

overiding item alignment defined in parent

<!-- justify-self doesn't exist to flex (only grid), but we can mimic it with auto-margins -->
<div data-flout="justify-center--">
  <div>I will allways justify center</div>
  <div data-flitem="justify-end-- justify-center@md-- justify-start@lg--">
    I will override my parent alignment
  </div>
</div>

Links

o-ratios-list

$o-ratios-list: (
  (2:1),
  (4:3),
  (16:9),
) !default;

Description

A list of aspect ratios that get generated as modifier classes.

Type

Map - default common rations

Links

css

[data-flout]

[data-flout] { ... }

Description

Applied to layout container Opinionated default. flex-wrap: wrap, because it's the most common usecase. See $flout-flags for accepted arguments

Example

Responsive flags, see $flout-flags for all available props

<div data-flout="middle-- bottom@sm-- top@lg--"></div>

See

Links

[data-flitem]

[data-flitem] { ... }

Description

Applied to flex layout children items Allows to apply specific styles to children, or override parent defined ones. some proertyes have negation values signed by the {!prop} notation.

[Justify-self] property is ignored by flex layouts we can mimic some of it with auto-margins

Example

Responsive flags, see $flout-flags for all available props

<div data-flout>
  <div data-fitem="end-- start@sm-- center@lg--"></div>
</div>

See

TODO's

  • shy-right and shy-left were depreacted because of name being misleading with diferent flow directions

  • should we hande direction:rtl via dir attribute?

  • inital should be unset, but not supported by all browsers

Links

.o-grid

.o-grid { ... }

Description

grid wrapper

Author

  • Whitesmith

.o-grid__column, .o-grid__col

.o-grid__column,
.o-grid__col { ... }

Description

grid column

Author

  • Whitesmith

.o-grid__br

.o-grid__br { ... }

Description

breaks next column to a new row

Author

  • Whitesmith

.o-grid--flush-gutters

.o-grid--flush-gutters { ... }

Description

remove gutter spacing from grid and columns

Author

  • Whitesmith

.o-grid--flush-bottom-gutters

.o-grid--flush-bottom-gutters { ... }

Description

remove only bottom gutter spacing from columns

Author

  • Whitesmith

.o-grid--fixed-small-gutter

.o-grid--fixed-small-gutter { ... }

Description

wip

Author

  • Whitesmith

.o-grid--flex-columns

.o-grid--flex-columns { ... }

Description

make columns flex, good for equal height columns

Author

  • Whitesmith

.o-grid--auto-width-columns

.o-grid--auto-width-columns { ... }

Description

remove default "expand to fit" flex mode

Author

  • Whitesmith

.o-media

.o-media { ... }

Links

.o-media__figure

.o-media__figure { ... }

Links

.o-media__body

.o-media__body { ... }

Links

.o-skeleton

.o-skeleton { ... }

Description

Main skeleton wrapper

.o-skeleton__head, .o-skeleton__feet, .o-skeleton__foot, .o-skeleton__footer, .o-skeleton__tip

.o-skeleton__head,
.o-skeleton__feet,
.o-skeleton__foot,
.o-skeleton__footer,
.o-skeleton__tip { ... }

Description

Scrollable body content, fixed tips

TODO's

  • decide on naming, there's too many alias

.o-skeleton__body

.o-skeleton__body { ... }

Description

Expand to tips if content size doesn't reach them

.o-skeleton--scrollable

.o-skeleton--scrollable { ... }

Description

Scrollable body content, fixed tips

TODO's

  • check how to workaroun IE bug

.o-skeleton--scrollable-auto

.o-skeleton--scrollable-auto { ... }

Description

Scrollable with auto height

TODO's

  • check how to workaroun IE bug

.o-wrapper

.o-wrapper { ... }

Description

Wrapper selector

Example

Wrapper selectro

<div class="o-wrapper">

.o-wrapper--flush

.o-wrapper--flush { ... }

Description

Wrapper modifier

Example

Wrapper selectro

<div class="o-wrapper o-wrapp--flush">

.o-wrapper--fluid

.o-wrapper--fluid { ... }

Description

Wrapper modifier

Example

Wrapper selectro

<div class="o-wrapper o-wrapper-fluid">

settings

variables

qnorr-social-media-color-map

$qnorr-social-media-color-map: (
  facebook: #365899,
  github: #333,
  twitter: #00aced,
);

Description

World wide known products that have famous colors

Type

Map

Author

  • AuthorName

qnorr-pixel-grid-unit

$qnorr-pixel-grid-unit: 8px !default;

Description

This is the core variable that will define all vertical rhythm sapcers, gutter and everything space related

Type

Number

Links

qnorr-breakpoints-map

$qnorr-breakpoints-map: (
   'xxs':  360px,
   'xs':   480px,
   's' :   600px,
   'sm':   768px,
   'md':   992px,
   'mdl':  1024px,
   'lg':   1280px,
   'xl':   1440px,
   'xxl':  1650px,
   'hd':   1920px
) !default;

Description

Global Breakppoints, used to generated responsive utilties and feed mappy-breakpoints mixin. it will convert values to ems for consintent performance in most browsers

Type

Map - key value pairs where key is the breakpoint name alias to be used in media queries

Used by

Links

breakpoints

$breakpoints: $qnorr-breakpoints-map !default;

Description

Feed mappy-breakpoints mixin (yup i also height that he didn't namespaced)

Type

Map

Links

qnorr-breakpoint-separator

$qnorr-breakpoint-separator: \@ !default;

Description

Character that will be used to indicate breakpoint utilization

Type

String

Example

<div clas="u-1/2 u-8/12@xl">

Links

qnorr-grid-columns-number

$qnorr-grid-columns-number: 12 !default;

Description

Number of grid columns, this will impact generated grid and width classes

Type

Number

Used by

Links

qnorr-grid-gutter-map

$qnorr-grid-gutter-map: (
  null: $qnorr-pixel-grid-unit,
  xs:  $qnorr-pixel-grid-unit*2,
  sm: $qnorr-pixel-grid-unit*3,
  lg: $qnorr-pixel-grid-unit*4
) !default;

Description

Breakpoint key pairs

Type

Map

Requires

Links

qnorr-grid-breakpoints-list

$qnorr-grid-breakpoints-list: ('xxs', 'sm', 'mdl', 'lg') !default;

Description

Defines how many breakpoints our grid and spacing utilties have

Type

List

Requires

Links

qnorr-wrapper-sizes-map

$qnorr-wrapper-sizes-map: (
  s:   600px,
  sm:  720px,
  md:  85%,
  mdl: 100%,
  lg:  1140px,
  xl:  1280px,
  xxl: 1580px
) !default;

Description

Wrapper sizes map

Type

List

Requires

Links

system-font-family

$system-font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif !default;

Type

String

TODO's

  • refactor all this shit

qnorr-primary-font-family

$qnorr-primary-font-family: $system-font-family !default;

Type

String

TODO's

  • refactor all this shit

qnorr-monospace-font-family

$qnorr-monospace-font-family: Roboto Mono, Inconsolata, monospace !default;

Type

String

TODO's

  • refactor all this shit

qnorr-base-font-size

$qnorr-base-font-size: 16px !default;

Type

Number

Used by

TODO's

  • refactor all this shit

qnorr-base-leading

$qnorr-base-leading: 24px !default;

Type

Number

TODO's

  • refactor all this shit

qnorr-typescale-maps

$qnorr-typescale-maps: (
	mega: (
      null: (32px, 48px),
      sm:   (48px, 56px)
   ),
	kilo: (
      null: (24px, 32px),
      sm:   (32px, 48px)
   ),
	1: (
      null: (20px, 24px),
      sm:   (24px, 32px)
   ),
	2:    (
      null: (16px, 24px),
      sm:   (20px, 24px),
   ),
	3:    (16px, 24px),
	4:    (14px, 20px),
	5:    (12px, 14px),
	6:    (10px, 12px),
) !default;;

Type

Map - size, leading pairs, defining in pixels will convert everything to rem null means mobile first, that's the size of the font from 0px and beyond

TODO's

  • ⚠️OUTDATED⚠️ do not

qnorr-font-weights

$qnorr-font-weights: (300, 400, 600, 700) !default;

Type

List - default font weights for generating utilties

TODO's

  • refactor all this shit

qnorr-transitions-map

$qnorr-transitions-map: (
	smooth: cubic-bezier(0.1, 0.82, 0.25, 1),
	bounce: cubic-bezier(0.1, 0.82, 0.25, 1),
	bouncy: cubic-bezier(0.0, 1.58, 0.7, 1.12)
);

Description

More cool transition easing curves than default ones

Type

Map

Used by

tools

functions

decimal-round

@function decimal-round($number, $digits: 0, $mode: round) { ... }

Description

Round a number to specified digits.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$number

A number to round

Number none
$digits

Digits to output

Number0
$mode

(round|ceil|floor) How to round a number

Stringround

Returns

Number

A rounded number

Example

decimal-round(0.333)    => 0
decimal-round(0.333, 1) => 0.3
decimal-round(0.333, 2) => 0.33
decimal-round(0.666)    => 1
decimal-round(0.666, 1) => 0.7
decimal-round(0.666, 2) => 0.67

Links

get-color

@function get-color($color, $tone: 500, $map: $qnorr-color-maps) { ... }

Description

Returns color value for a specic color name and tone

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

color name identifier (used as key in map)

Sring none
$tone

color tone, using 100 - 900 notation

Number500
$map

Color map to search.

Map$qnorr-color-maps

Returns

Color

color

Example

color map accepted formats [color, key:color list]

$my-color-map: (
  colorNameKey: color,
  otherColor: (
    100: color,
    200: color
    ...
    900: color
  )
);

Throws

  • #{$color} is not in $qnorr-color-maps. Check _s.colors.scss

Requires

get-transition

@function get-transition($transition: smooth) { ... }

Description

Returns color value for a specic color name and tone

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$transition

Transition name defined on map

Stringsmooth

Returns

String

color hex code value

Throws

  • #{$transition} is not in #{$map}. Check settings folder, maybe you mispelled a key

Requires

luminance

@function luminance($color) { ... }

Description

Returns the luminance of $color as a float (between 0 and 1) 1 is pure white, 0 is pure black

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

Color

Color none

Returns

Number

Requires

Links

Author

  • Hugo Girauldel

map-deep-get

@function map-deep-get($map, $keys...) { ... }

Description

Recursive function, to get 2n nested map values

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Map

Map none
$keys

comma separated key chain strings "key1", "key2"

Arglist none

Returns

Any type —

Desired value

Used by

Author

  • Hugo Giraudel

pow

@function pow() { ... }

Description

power number to exponent

Parameters

None.

Used by

Author

  • Hugo Giraudel

px-to-rem

@function px-to-rem($pixel-value: $qnorr-base-font-size) { ... }

Description

Converts pixels to rem units

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$pixel-value

Pixel Number to covert

Number$qnorr-base-font-size

Requires

Used by

Author

  • Hugo Giraudel

strip-unit

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

Description

Remove the unit of a length

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$number

Number to remove unit from

Number none

Returns

Number

Unitless number

Used by

Author

  • Hugo Giraudel

mixins

bg-cover

@mixin bg-cover() { ... }

Parameters

None.

for-modern-IE

@mixin for-modern-IE() { ... }

Description

for IE 10 and 11

Parameters

None.

Links

Author

  • Jeff Clayton

for-edge

@mixin for-edge() { ... }

Description

for Edge browser 15+

Parameters

None.

Links

Author

  • Jeff Clayton

for-safari

@mixin for-safari() { ... }

Description

For safari

Parameters

None.

Links

Author

  • Jeff Clayton

for-safari-10

Deprecated!

Warning this will probably be removed

@mixin for-safari-10() { ... }

Description

For safari-10

Parameters

None.

Links

Author

  • Jeff Clayton

clearfix

@mixin clearfix() { ... }

Description

Clearing floats

Parameters

None.

Example

— Clearing floats

.selector { @include clearfix; }

Used by

expand-to-parent

@mixin expand-to-parent($pseudo: false) { ... }

Description

Stretches elment to parent size

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$pseudo

Include content rule for pseudo elements.

Booleanfalse

Example

— description

.selector { @include mixinName }

fluid-type

@mixin fluid-type($min-font-size, $max-font-size, $min-vw, $max-vw, $prop: "font-size") { ... }

Description

Makes fluid typography beteween to limits

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$min-font-size noneNumber none
$max-font-size noneNumber none
$min-vw noneAny none
$max-vw noneAny none
$prop noneString"font-size"

Example

min and max viewport width can be both numbers or qnorr breakpoints map keys

.selector { @include fluid-type(24px, 56px, 480px, 1024px);
.selector { @include fluid-type(24px, 56px, 'sm', 'lg');

Requires

  • [function] strip-unit
  • [function] strip-unit
  • [variable] qnorr-breakpoints-map — if using string keys for min-vw and max-vw
  • [external] mappy-breakpoints::mappy-breakpoints — url https://github.com/zellwk/mappy-breakpoints
  • [external] SassCore::map-get

Links

font-face

@mixin font-face($path, $name, $font-stretch: normal, $font-weight: 400, $font-style: normal, $font-display: swap, $unicode-range: U+000-5FF) { ... }

Description

Outputs a modern css font-face declaration. local() declaration is opinionately out of the src property, because of its faulty nature.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$path

Path to your font file (no extension)

String none
$name

Your font name or alias (up to you)

String none
$font-stretch

https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch

String or Numbernormal
$font-weight

(100...900)

Number400
$font-style

(Italic | Oblique | inherit | unset)

Stringnormal
$font-display

how a font face is displayed based on whether and when it is downloaded and ready to use.

Stringswap
$unicode-range

Download only latin glyphs

AnyU+000-5FF

Example

Preload your fonts (recommended, not required)

<head>
  <link rel="preload" as="font" href="/fonts/your-web-font.woff2" type="font/woff2" crossorigin="anonymous">
</head>

Including using font-face

 // note: for other font weights you use the same name!
 @include font-face(
   $path: "/fonts/your-web-font",
   $name: "Custom Font",
   $font-weight: 500,
   $font-style: normal
);

Links

qnorr-grid-gutters

@mixin qnorr-grid-gutters($rules: "padding-left", $breakpoint-map: $qnorr-grid-gutter-map, $negation: false) { ... }

Description

Apply grid gutter for each breakpoint defined in configuration

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$rules

css properties to apply

List"padding-left"
$breakpoint-map noneMap$qnorr-grid-gutter-map
$negation

negate value applied to $property

Booleanfalse

Output

$property: value per breakpoint

Requires

Used by

Author

  • Whitesmith

qnorr-grid

@mixin qnorr-grid($flush: false, $breakpoint-map: $qnorr-grid-gutter-map) { ... }

Description

Create a contianer for grid columns

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$flush

remove gutter offset

Booleanfalse
$breakpoint-map noneMap$qnorr-grid-gutter-map

Output

flex css to accomodate grid-columns

Requires

Used by

Author

  • Whitesmith

qnorr-grid-column

@mixin qnorr-grid-column($flush: false, $breakpoint-map: $qnorr-grid-gutter-map) { ... }

Description

Create a grid column inside grid container

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$flush

remove gutter offset

Booleanfalse
$breakpoint-map noneMap$qnorr-grid-gutter-map

Example

<div class="o-layout">
  <div class="o-layout__el--6">
.o-layout { @include qnorr-grid }
.o-layout__el--6 { @include qnorr-grid-column(6)}

Output

flex css to accomodate grid-columns

Requires

Used by

Author

  • Whitesmith

qnorr-grid-column-span

@mixin qnorr-grid-column-span($number-of-columns: auto) { ... }

Description

Sets side of grid column, in percentage

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$number-of-columns

how many columns should element span

Stringauto

Example

scss - asd

Output

width in percentage, matching number of columns

Requires

Author

  • Whitesmith

hidden-visually

@mixin hidden-visually() { ... }

Description

Hides element from the ui, keep it visible for screen readers

Parameters

None.

Example

— Hidden visually

.selector { @include mixinName }

Used by

input-placeholder

@mixin input-placeholder() { ... }

Description

styles for inputs placeholders, cross-browser way

Parameters

None.

Example

— description

.selector { @include input-placeholder }

media

@mixin media() { ... }

Description

Creates the media object wrapper

Parameters

None.

Used by

TODO's

  • naming, should we namespace o use more verbose media-object

Links

Author

  • Stubbornealla

media-figure

@mixin media-figure($space: $qnorr-pixel-grid-unit*2) { ... }

Description

Creates the media object wrapper. This element must be direct childs of media

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$space

the space between figure and content applied in the right direction if first or last child

Number$qnorr-pixel-grid-unit*2

Requires

Used by

TODO's

  • naming, should we namespace o use more verbose media-object

Links

Author

  • Stubbornealla

media-body

@mixin media-body() { ... }

Description

Apply to the text wrapper. This element must be direct childs of media

Parameters

None.

Used by

TODO's

  • naming, should we namespace o use more verbose media-object

Links

Author

  • Stubbornealla

reset-appearance

@mixin reset-appearance() { ... }

Description

Resets browser default appearance on elements

Parameters

None.

Example

— Resets browser appearance

.selector { @include mixinName }

skeleton

@mixin skeleton() { ... }

Description

Skeleton wrapper element expands to current parent size

Parameters

None.

Links

skeleton-tip

@mixin skeleton-tip() { ... }

Description

Skeleton tips (head and footer) to not shrink

Parameters

None.

Links

skeleton-body

@mixin skeleton-body($scrollable: false) { ... }

Description

Expands the body to the tips

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$scrollable

wheter the conent inside body should be scrollable or not. Auto means Skeleton container doesn't have a fixed height (height auto). And has some tricks on IE

Boolean or Stringfalse

Links

qnorr-wrap

@mixin qnorr-wrap($flush: false, $fluid: false, $sizes-breakpoint-map: $qnorr-wrapper-sizes-map, $padding-breakpoint-map: $qnorr-grid-gutter-map) { ... }

Description

Wrapping content in fixed width size

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$flush

Remove or not gutters around the wrapper

Booleanfalse
$fluid

Wheter to apply or not a fixed container size

Booleanfalse
$sizes-breakpoint-map

a valid breakpoint map with size definition for each

Map$qnorr-wrapper-sizes-map
$padding-breakpoint-map

a valid breakpoint map with side padding definition for each breakpoint

Map$qnorr-grid-gutter-map

Example

.o-normal-container { @include qnorr-wrap } 
.o-flushed-container { @include qnorr-wrap($flush: true) }
.o-container-fluid { @include qnorr-wrap($fluid: true) }

Requires

General

css

.o-list

.o-list { ... }

TODO's

utilities

css

.u-cf

.u-cf { ... }

Description

Float clearance

Example

— Float clearance

<div class="u-cf">

.u-text-c

.u-text-c { ... }

Description

Aligns an text to value

.u-sr-only

.u-sr-only { ... }

Description

Make content of an element only visible for screen readers

Example

<div class="u-sr-only">

variables

qnorr-spacing-directions

$qnorr-spacing-directions: (
  null: null,
  't': '-top',
  'r': '-right',
  'b': '-bottom',
  'l': '-left',
  'h': '-left' '-right',
  'v': '-top' '-bottom',
) !default;

Description

map alias to property-direction

Type

Map

Used by

Author

  • Whitesmith

qnorr-spacing-properties

$qnorr-spacing-properties: (
  'p': 'padding',
  'm': 'margin',
) !default;

Description

map alias to property-name

Type

Map

Used by

Author

  • Whitesmith

qnorr-spacing-sizes

$qnorr-spacing-sizes: (
  null: $qnorr-pixel-grid-unit,
  '-2x': $qnorr-pixel-grid-unit*2,
  '-3x': $qnorr-pixel-grid-unit*3,
  '-4x': $qnorr-pixel-grid-unit*4,
  '-5x': $qnorr-pixel-grid-unit*5,
  '-6x': $qnorr-pixel-grid-unit*6,
  '-7x': $qnorr-pixel-grid-unit*7,
  '-8x': $qnorr-pixel-grid-unit*8,
  '-9x': $qnorr-pixel-grid-unit*9,
  '-10x': $qnorr-pixel-grid-unit*10,
  '-12x': $qnorr-pixel-grid-unit*12,
  '-14x': $qnorr-pixel-grid-unit*14,
  '-0': 0
) !default;

Description

map alias to size suffix

Type

Map

Used by

Author

  • Whitesmith

u-text-alignment-breakpoints-list

$u-text-alignment-breakpoints-list: $qnorr-grid-breakpoints-list !default;

Description

For generating responsive utilities for text alignment

Type

Map [$qnorr-grid-breakpoints-list] -

mixins

qnorr-spacers

@mixin qnorr-spacers($breakpoint) { ... }

Description

Generates a utility class per property + direction + size + breakpont

Properties:

  • p : padding
  • m : margin

Directions:

  • t : top
  • b : bottom
  • l : left
  • r : right
  • h : horizontal (left and right)
  • v : vertical (top and bottom)

Size:

  • {n}x - pixel-grid multplier
  • 0 - reset spacer to zero

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$breakpoint

If apply responsive suffix or not

String or Null none

Example

Anatomy

.u-[propertynamespace][direction]-[size][breakpoint-separator] {}
<div class="u-pb-0x"></div>
<div class="u-mt-2x@lg"></div>

Requires

Author

  • Whitesmith