Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ryanve/spacing
Opensource functional CSS spacing for web spaces
https://github.com/ryanve/spacing
css functional-css margin padding proximity spacing
Last synced: about 1 month ago
JSON representation
Opensource functional CSS spacing for web spaces
- Host: GitHub
- URL: https://github.com/ryanve/spacing
- Owner: ryanve
- License: other
- Created: 2017-02-16T02:37:03.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-12-27T21:02:40.000Z (almost 7 years ago)
- Last Synced: 2024-09-27T13:07:56.927Z (about 2 months ago)
- Topics: css, functional-css, margin, padding, proximity, spacing
- Language: CSS
- Homepage: https://ryanve.github.io/spacing/
- Size: 38.1 KB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# spacing
Opensource functional CSS spacing for modern web development
- [setup](#setup)
- [classes](#classes)
- [data-spacing](#data-spacing)
- [scaling](#scaling)
- [files](#files)
## setup
```
npm install spacing
```
### import whichever [file(s)](#files) meets your needs
- [`main.css`](main.css) is harcoded for CSS3 compatibility
- [`module.css`](module.css) uses CSS4 variables
```css
@import "node_modules/spacing/main";
```
## classes
Classes are listed in order from least to most precendence.
### `padding`
- `.p0`
- `.p1`
- `.p2`
- `.p3`
- `.p4`
### `padding-top`
- `.pt0`
- `.pt1`
- `.pt2`
- `.pt3`
- `.pt4`
### `padding-left`
- `.pl0`
- `.pl1`
- `.pl2`
- `.pl3`
- `.pl4`
### `padding-right`
- `.pr0`
- `.pr1`
- `.pr2`
- `.pr3`
- `.pr4`
### `padding-bottom`
- `.pb0`
- `.pb1`
- `.pb2`
- `.pb3`
- `.pb4`
### `margin`
- `.-m2`
- `.-m1`
- `.m0`
- `.m1`
- `.m2`
- `.m3`
- `.m4`
- `.m-auto`
### `margin-top`
- `.mt0`
- `.mt1`
- `.mt2`
- `.mt3`
- `.mt4`
- `.mt-auto`
### `margin-left`
- `.ml0`
- `.ml1`
- `.ml2`
- `.ml3`
- `.ml4`
- `.ml-auto`
### `margin-right`
- `.mr0`
- `.mr1`
- `.mr2`
- `.mr3`
- `.mr4`
- `.mr-auto`
### `margin-bottom`
- `.mb0`
- `.mb1`
- `.mb2`
- `.mb3`
- `.mb4`
- `.mb-auto`
### `:first-child`
- `.mt0-first`
- `.ml0-first`
- `.mr0-first`
- `.mb0-first`
### `:last-child`
- `.mt0-last`
- `.ml0-last`
- `.mr0-last`
- `.mb0-last`
## data-spacing
Alternative to [classes](#classes) you can also space via `[data-spacing]` with value(s) being any of the classes.
```html
```
All `[data-spacing]` selectors come after the classes in the cascade.
## scaling
### spacing variables default to `rem` and therefore can be scaled responsively with the `rem` size
```css
:root {
font-size: 1em;
font-size: calc(.9em + .5vw + .5vh);
}
```
### in CSS4 you could scale via media queries
```css
:root {
--space-1: .5rem;
--space-2: 1rem;
--space-3: 1.5rem;
--space-4: 3rem;
}
@media (min-width: 30em) and (min-height: 20em) {
:root {
--space-1: .5rem;
--space-2: 1rem;
--space-3: 2rem;
--space-4: 4rem;
}
}
```
## files
- [main.css](main.css) css3+ bundle
- [module.css](module.css) css4+ bundle
- [class.css](class.css) class selectors
- [data.css](data.css) data selectors
- [root.css](root.css) default variables