Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/objcio/objcss
Shared CSS for objc.io sites
https://github.com/objcio/objcss
Last synced: 17 days ago
JSON representation
Shared CSS for objc.io sites
- Host: GitHub
- URL: https://github.com/objcio/objcss
- Owner: objcio
- Created: 2016-10-24T13:49:06.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2020-01-30T15:04:20.000Z (almost 5 years ago)
- Last Synced: 2024-12-20T13:55:59.730Z (21 days ago)
- Language: CSS
- Size: 116 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# objcss
Shared CSS for objc.io sites
This documentation is a work-in-progress.
# CSS
## Utilities
### Spacing
Basic directional spacing is in the form of `[rule][direction][multiplier]`.
`[rule]`:
* `m`: margin
* `p`: padding
`[direction]`:
* _(blank)_: all directions
* `t`: top
* `r`: right
* `b`: bottom
* `l`: left
* `h` (horizontal): left & right
* `v` (vertical): top & bottom
`[variant]`:
* _(blank)_: 1em
* `+`: 1.5em
* `++`: 2.5em
* `-`: 0.5em
* `--`: 0.25em
* `---`: 0.15em
* `0`: 0em
_These are current-as-of-writing values, but can be changed in `_settings.scss`_
#### Examples:
```
mt
m+
pv-
ph++
mb0
```
### Negative Spacing
Basic negative directional **margin** is in the form of `n-m[direction][multiplier]`.
These work as positive spacing, but only for margin and a subset of directions and multipliers, as such:
`[direction]`:
* `t`: top
* `r`: right
* `b`: bottom
* `l`: left
`[variant]`:
* _(blank)_: 1em
* `+`: 1.5em
* `++`: 2.5em
#### Examples:
```
n-mt
n-mb+
n-ml--
```
### Stack
The `stack` utility is applied to an element to **vertically space its children** from one another. This is useful to space a sequence of list of similar elements, like lists of episodes, books, comments, etc.
The utility is in the form of `stack[variant]`, using the site-wide spacing variants as defined in `_settings.scss`, and works but applying top margin to each each children in the stack except the first. It is defined as simply as:
```scss
.stack{$variant} > + * + {
margin-top: $variant-value;
}
```
#### Example:
```html
- ...
- ...
...
```