space.less — toolkit for managing negative space
Designed to make margins, paddings, gutters consistent across the project.
From design point of view this is an argeement on what distance to use between objects in UI layout. From frontend perspective this is a set of classnames to rule margins and paddings on different media queries breakpoints. Together it is a part of communication language between designers and frontend developers.
Negative space (or white space). In page layout and illustration, negative space is the portion of a page left unmarked: margins, gutters, and space between columns, lines of type, graphics, figures, or objects drawn or depicted. The term white space arises from graphic design practice, where printing processes generally use white paper.
Installation
Compiled from CDNhttps://unpkg.com/space.less@0.0.2/space.css
(7.7KB gzip)https://unpkg.com/space.less@0.0.2/space.min.css
(7.2KB gzip)https://unpkg.com/space.less@0.0.2/space.min.css.map
NPMnpm install space.less --save-dev
Bowerbower install space.less --save
Math
8 = 8 — nano
8 + 8 = 16 — micro
8 + 16 = 24 — mili
16 + 24 = 40 — base
24 + 40 = 64 — kilo
40 + 64 = 104 — mega
64 + 104 = 168 — giga
As a foundation taken a set of values assigned to some aliases. The values are not random, this is a mathematical series where every next element is a sum of previous two elements; the first element is 8.
Demo
nano
- 8
micro
- 16
mili
- 24
base
- 40
kilo
- 64
mega
- 104
giga
- 168
Classnames
For equal spaces on every side apply classnames constructed on the following scheme:
.space | -out | -mili | -md | |
---|---|---|---|---|
-in | — creates paddings | |||
-out | — creates margins | |||
-minus | — negative margins | |||
-auto¹ | — margin: auto | |||
-zero² | — set value to null | |||
-nano | — value = 8px | |||
-micro | — value = 16px | |||
-mili | — value = 24px | |||
-base | — value = 40px | |||
-kilo | — value = 64px | |||
-mega | — value = 104px | |||
-giga | — value = 168px | |||
-xs | — for all screens | |||
-sm | — min-width: 576px | |||
-md | — min-width: 768px | |||
-lg | — min-width: 992px | |||
-xl | — min-width: 1200px |
Exclusions:
- Classes
.space-auto-xs
and similiar don't have 'value' part. - Suffix
-zero
could be applied only to.space-in
and.space-out
classnames. It can't be used together with.space-minus
or.space-auto
.
For non-rectangular spacings use additional class modifier:
.space | -in | -tall | -kilo | -xs |
---|---|---|---|---|
-top | — set top value | |||
-bottom | — bottom value | |||
-left | — left | |||
-right | — right | |||
-v | — top and bottom (vertical) | |||
-h | — left and right (horizontal) | |||
-tall¹ | — smaller horizontal space | |||
-wide¹ | — smaller vertical space |
Exclusions:
- Suffixes
-tall
and-wide
can't be used together with.space-auto
.
Suffixes-tall
and-wide
doesn't exist for-zero
and-nano
spacings.
Usage in HTML
Link compiled space.css
in the head of your page.
Apply classes to any HTML element to get desired margins and paddings.
Usage in LESS
Install library with npm install space.less --save-dev
and include its main file inside your project less file:
@import (less) "./node_modules/space.less/space.less";
That is enough to run library with default parameters.
Default parameters
Parameters stored in mixin:
.space-settings() {
@spaces: 0, 8px, 16px, 24px, 40px, 64px, 104px, 168px;
@spacealias: zero, nano, micro, mili, base, kilo, mega, giga;
// media breakpoints
@breakpoints:
~"(min-width: 576px)",
~"(min-width: 768px)",
~"(min-width: 992px)",
~"(min-width: 1200px)";
// names for breakpoint suffixes
@suffixes: xs, sm, md, lg, xl;
// IMPORTANT: suffixes count should be bigger than breakpoints count by 1
// suffixes-count = breakpoints-count + 1
}
Redefining parameters
To change any (or every) parameter add setting mixin after import inside your .less file:
@import (less) "./node_modules/space.less/space.less";
.space-settings() {
@spaces: 0, 5px, 10px, 25px, 50px;
@spacealias: zero, small, normal, large, huge;
}
Only sizes and names for spacing was redefined in example above. Breakpoint parameters remains default.
Made by Paul Radzkov, GitHub, MIT License
Share Tweet Share Share Share