Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ryanve/border.css
Opensource functional CSS border classes
https://github.com/ryanve/border.css
atomic-css border css functional-css
Last synced: about 1 month ago
JSON representation
Opensource functional CSS border classes
- Host: GitHub
- URL: https://github.com/ryanve/border.css
- Owner: ryanve
- License: isc
- Created: 2017-07-23T16:52:02.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-08-21T07:20:46.000Z (about 7 years ago)
- Last Synced: 2024-05-02T00:08:34.127Z (7 months ago)
- Topics: atomic-css, border, css, functional-css
- Language: HTML
- Homepage: https://ryanve.github.io/border.css/
- Size: 20.5 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# border.css
[Opensource functional CSS border classes](#classes). Available [on npm](https://www.npmjs.com/package/border.css) for production and [unpkg](https://unpkg.com/border.css/) for [prototyping online](https://codepen.io/ryanve/pen/RZQqNX).
```
npm install border.css
```
### `@import` all
```css
@import 'node_modules/border.css/border';
```
### `@import` incrementally
```css
@import 'node_modules/border.css/border-collapse';
@import 'node_modules/border.css/border-color';
@import 'node_modules/border.css/border-context';
@import 'node_modules/border.css/border-style';
@import 'node_modules/border.css/border-width';
```
## [Classes](border.css)
### [`border-collapse`](border-collapse.css)
- `.border-separate`
- `.border-collapse`
### [`border-color`](border-color.css)
- `.border-current`
- `.border-transparent`
- `.top-transparent`
- `.left-transparent`
- `.right-transparent`
- `.bottom-transparent`
### [`border-context`](border-context.css)
- `.first-top-none`
- `.first-left-none`
- `.last-right-none`
- `.last-bottom-none`
### [`border-style`](border-style.css)
- `.border-none`
- `.top-none`
- `.left-none`
- `.right-none`
- `.bottom-none`
- `.border-inset`
- `.border-groove`
- `.border-outset`
- `.border-ridge`
- `.border-dotted`
- `.border-dashed`
- `.border-solid`
- `.top-solid`
- `.left-solid`
- `.right-solid`
- `.bottom-solid`
- `.border-double`
- `.border-hidden`
- `.top-hidden`
- `.left-hidden`
- `.right-hidden`
- `.bottom-hidden`
### [`border-width`](border-width.css)
- `.border-trim`
- `.top-trim`
- `.left-trim`
- `.right-trim`
- `.bottom-trim`
- `.border-thin`
- `.border-medium`
- `.border-thick`
### Precedence
- `border` < `top`|`left`|`right`|`bottom` < `first`|`last`
- [`none` < style < `hidden`](https://github.com/ryanve/border.css/pull/10)