CSS CoffeeScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
.editorconfig
.gitignore
.npmignore
Gruntfile.coffee
LICENSE
README.md
bower.json
contributing.json
docpad.coffee
package.json
space.css
space.less
space.min.css
space.min.css.map

README.md

space.less — toolkit for managing negative space

npm version bower version

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.

Installation

Compiled from CDN
https://unpkg.com/space.less@0.0.2/space.css
https://unpkg.com/space.less@0.0.2/space.min.css
https://unpkg.com/space.less@0.0.2/space.min.css.map

NPM
npm install space.less --save-dev

Bower
bower install space.less --save

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. See docs for classnames.

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.