Skip to content

Commit

Permalink
docs updated
Browse files Browse the repository at this point in the history
  • Loading branch information
paulradzkov committed May 17, 2017
1 parent 15da956 commit 6c91415
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 22 deletions.
58 changes: 54 additions & 4 deletions README.md
Expand Up @@ -22,11 +22,61 @@ Together it is a part of communication language between designers and fronte
**Bower**
`bower install space.less --save`

## Using in HTML
## Usage in HTML

Include compiled `space.css` into head of page at the bottom. Or import `space.less` into your main .less file:
Link compiled `space.css` in the head of your page.
Apply classes to any HTML element to get desired margins and paddings.
See [docs](http://paulradzkov.github.io/space.less/) for classnames.

## Usage in LESS

Install library with `npm install space.less --save-dev` and include its main file inside your project less file:

```less
@import (less) "./node_modules/space.less/space.less";
```
@import (less) "node_modules/space.less/space.less";

That is enough to run library with default parameters.

### Default parameters

Parameters stored in mixin:

```less
.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
}
```
Apply classes to any HTML elements to get desired margins and paddings. See [docs](http://paulradzkov.github.io/space.less/).

### Redefining parameters

To change any (or every) parameter add setting mixin after import inside your .less file:

```less
@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.

12 changes: 0 additions & 12 deletions contributing.json
Expand Up @@ -4,35 +4,23 @@
"subject_cannot_be_empty": true,
"subject_must_be_longer_than": 4,
"subject_must_be_shorter_than": 101,
"subject_lines_must_be_shorter_than": 51,
"subject_must_be_single_line": true,
"subject_must_be_in_tense": "imperative",
"subject_must_start_with_case": "lower",
"subject_must_not_end_with_dot": true,

"body_lines_must_be_shorter_than": 73
},
"pull_request": {
"subject_cannot_be_empty": true,
"subject_must_be_longer_than": 4,
"subject_must_be_shorter_than": 101,
"subject_must_be_in_tense": "imperative",
"subject_must_start_with_case": "upper",
"subject_must_not_end_with_dot": true,

"body_cannot_be_empty": true,
"body_must_include_verification_steps": true,
"body_must_include_screenshot": ["html", "css"]
},
"issue": {
"subject_cannot_be_empty": true,
"subject_must_be_longer_than": 4,
"subject_must_be_shorter_than": 101,
"subject_must_be_in_tense": "imperative",
"subject_must_start_with_case": "upper",
"subject_must_not_end_with_dot": true,

"body_cannot_be_empty": true,
"body_must_include_reproduction_steps": true
}
}
70 changes: 64 additions & 6 deletions src/documents/index.html.md.eco
Expand Up @@ -310,16 +310,74 @@ For non-rectangular spacings use additional class modifier:
1. 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:

```less
@import (less) "./node_modules/space.less/space.less";
```

That is enough to run library with default parameters.

### Default parameters

Parameters stored in mixin:

```less
.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:

```less
@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.


---

<small>Автор [Павел Радьков][paulradzkov], [GitHub проекта][github], MIT License</small>
<small>Made by [Paul Radzkov][paulradzkov], [GitHub][github], MIT License</small>

<p class="likely">
<span class="facebook">Поделиться</span>
<span class="twitter">Твитнуть</span>
<span class="gplus">Плюсануть</span>
<span class="vkontakte">Поделиться</span>
<span class="telegram">Телеграмнуть</span>
<span class="facebook">Share</span>
<span class="twitter">Tweet</span>
<span class="gplus">Share</span>
<span class="vkontakte">Share</span>
<span class="telegram">Share</span>
</p>

[paulradzkov]: http://paulradzkov.com
Expand Down

0 comments on commit 6c91415

Please sign in to comment.