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
- Flag — each attribute passed to data-flout/flitem
- 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
- But you could use only one "
-
" to have the same effect- yes but that looks like a typo, and two make it look intentional.
- 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
- Flag — each attribute passed to data-flout/flitem
- 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
- But you could use only one "
-
" to have the same effect- yes but that looks like a typo, and two make it look intentional.
- 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
- [variable]
flout-flags
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
- [variable]
flitem-flags
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__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
- [variable]
qnorr-grid-gutter-map
- [variable]
qnorr-grid-breakpoints-list
- [variable]
qnorr-wrapper-sizes-map
- [mixin]
fluid-type
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
- [mixin]
qnorr-grid-column-span
- [mixin]
qnorr-grid-column-span
- [mixin]
qnorr-grid-column-span
- [mixin]
qnorr-grid-column-span
- [mixin]
qnorr-grid-column-span
- [mixin]
qnorr-grid-column-span
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
- [variable]
qnorr-breakpoints-map
— *same breakpoint keys are required
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
- [variable]
qnorr-breakpoints-map
— *same breakpoint keys are required
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
- [variable]
qnorr-breakpoints-map
— *same breakpoint keys are required
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
- [function]
px-to-rem
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
- [function]
get-transition
tools
functions
decimal-round
@function decimal-round($number, $digits: 0, $mode: round) { ... }
Description
Round a number to specified digits.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$number | A number to round | Number | — none |
$digits | Digits to output | Number | 0 |
$mode | (round|ceil|floor) How to round a number | String | round |
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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color | color name identifier (used as key in map) | Sring | — none |
$tone | color tone, using 100 - 900 notation | Number | 500 |
$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
- [function]
map-deep-get
get-transition
@function get-transition($transition: smooth) { ... }
Description
Returns color value for a specic color name and tone
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$transition | Transition name defined on map | String | smooth |
Returns
String
—color hex code value
Throws
#{$transition}
is not in #{$map}. Check settings folder, maybe you mispelled a key
Requires
- [variable]
qnorr-transitions-map
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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color | Color | Color | — none |
Returns
Number
Requires
- [function]
pow
Links
Author
Hugo Girauldel
map-deep-get
@function map-deep-get($map, $keys...) { ... }
Description
Recursive function, to get 2n nested map values
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$map | Map | Map | — none |
$keys | comma separated key chain strings "key1", "key2" | Arglist | — none |
Returns
Desired value
Used by
- [function]
get-color
Author
Hugo Giraudel
pow
@function pow() { ... }
Description
power number to exponent
Parameters
None.
Used by
- [function]
luminance
Author
Hugo Giraudel
px-to-rem
@function px-to-rem($pixel-value: $qnorr-base-font-size) { ... }
Description
Converts pixels to rem units
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$pixel-value | Pixel Number to covert | Number | $qnorr-base-font-size |
Requires
- [function]
strip-unit
- [variable]
qnorr-base-font-size
Used by
- [mixin]
qnorr-grid-gutters
- [mixin]
media-figure
Author
Hugo Giraudel
strip-unit
@function strip-unit($number) { ... }
Description
Remove the unit of a length
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$number | Number to remove unit from | Number | — none |
Returns
Number
—Unitless number
Used by
- [function]
px-to-rem
- [mixin]
fluid-type
- [mixin]
fluid-type
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
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
- [css]
.u-cf
expand-to-parent
@mixin expand-to-parent($pseudo: false) { ... }
Description
Stretches elment to parent size
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$pseudo | Include content rule for pseudo elements. | Boolean | false |
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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$min-font-size | — none | Number | — none |
$max-font-size | — none | Number | — none |
$min-vw | — none | Any | — none |
$max-vw | — none | Any | — none |
$prop | — none | String | "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 Name | parameter Description | parameter Type | parameter 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 Number | normal |
$font-weight | (100...900) | Number | 400 |
$font-style | (Italic | Oblique | inherit | unset) | String | normal |
$font-display | how a font face is displayed based on whether and when it is downloaded and ready to use. | String | swap |
$unicode-range | Download only latin glyphs | Any | U+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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$rules | css properties to apply | List | "padding-left" |
$breakpoint-map | — none | Map | $qnorr-grid-gutter-map |
$negation | negate value applied to $property | Boolean | false |
Output
$property: value per breakpoint
Requires
- [function]
px-to-rem
Used by
- [mixin]
qnorr-grid
- [mixin]
qnorr-grid-column
- [mixin]
qnorr-wrap
Author
Whitesmith
qnorr-grid
@mixin qnorr-grid($flush: false, $breakpoint-map: $qnorr-grid-gutter-map) { ... }
Description
Create a contianer for grid columns
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$flush | remove gutter offset | Boolean | false |
$breakpoint-map | — none | Map | $qnorr-grid-gutter-map |
Output
flex css to accomodate grid-columns
Requires
- [mixin]
qnorr-grid-gutters
Used by
- [mixin]
qnorr-grid-column
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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$flush | remove gutter offset | Boolean | false |
$breakpoint-map | — none | Map | $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
- [mixin]
qnorr-grid
— flush must be true if here as well - [mixin]
qnorr-grid-gutters
Used by
- [mixin]
qnorr-grid-column-span
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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$number-of-columns | how many columns should element span | String | auto |
Example
scss - asd
Output
width in percentage, matching number of columns
Requires
- [variable]
qnorr-grid-columns-number
- [variable]
qnorr-grid-columns-number
- [variable]
qnorr-grid-columns-number
- [variable]
qnorr-grid-columns-number
- [variable]
qnorr-grid-columns-number
- [variable]
qnorr-grid-columns-number
- [mixin]
qnorr-grid-column
— must be applied to grid-column
Author
Whitesmith
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
- [css]
.o-media
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 Name | parameter Description | parameter Type | parameter 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
- [function]
px-to-rem
Used by
- [css]
.o-media__figure
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
- [css]
.o-media__body
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 Name | parameter Description | parameter Type | parameter 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 String | false |
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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$flush | Remove or not gutters around the wrapper | Boolean | false |
$fluid | Wheter to apply or not a fixed container size | Boolean | false |
$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
- [mixin]
qnorr-grid-gutters
- [external]
mappy-breakpoints::mappy-breakpoints
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
- [mixin]
qnorr-spacers
Author
Whitesmith
qnorr-spacing-properties
$qnorr-spacing-properties: (
'p': 'padding',
'm': 'margin',
) !default;
Description
map alias to property-name
Type
Map
Used by
- [mixin]
qnorr-spacers
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
- [mixin]
qnorr-spacers
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 Name | parameter Description | parameter Type | parameter 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
- [variable]
qnorr-spacing-properties
- [variable]
qnorr-spacing-directions
- [variable]
qnorr-spacing-sizes
Author
Whitesmith