Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jondotsoy/equip-resources-basestyles
Shared resources for component implementation.
https://github.com/jondotsoy/equip-resources-basestyles
css postcss
Last synced: about 1 month ago
JSON representation
Shared resources for component implementation.
- Host: GitHub
- URL: https://github.com/jondotsoy/equip-resources-basestyles
- Owner: JonDotsoy
- License: cc-by-sa-4.0
- Created: 2016-12-09T17:13:43.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-01-17T16:47:46.000Z (almost 8 years ago)
- Last Synced: 2024-10-05T21:17:32.098Z (about 1 month ago)
- Topics: css, postcss
- Language: CSS
- Size: 47.9 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# equip-resources-basestyles
Shared resources for component implementation.
[](https://www.npmjs.com/package/equip-resources-basestyles)
[](https://www.npmjs.com/package/equip-resources-basestyles)
## Styles CSS
### How Use
> We develop this styles with [PostCSS][], [PostCSS-import][], [PreCSS][] and [CSSNext][]. But of course the files no use all tools. So good luck.
>
> — [@JonDotsoy][]
```css
@import "equip-resources-basestyles";
.my_class_with_color {
color: var(--md-red-500); /* (ง ͠° ͟ل͜ ͡°)ง a variable with material design */
}
.my_box {
box-shadow: var(--md-z-depth-1);
&:hover {
box-shadow: var(--md-z-depth-2);
}
}
```
### Overview
- **z-depth**: In material design, everything should have a certain z-depth that determines how far raised or close to the page the element is. See more [materializecss#shadow](http://materializecss.com/shadow.html).
+ [`z-depth.css`](https://github.com/JonDotsoy/equip-resources-basestyles/blob/master/css/z-depth.css)
- **Colors**: A series of colors. Ho!! And also [material design](https://www.npmjs.com/package/material-colors).
+ [`colors.css`](https://github.com/JonDotsoy/equip-resources-basestyles/blob/master/css/colors.css)
+ [`colors.var.css`](https://github.com/shuhei/material-colors/blob/master/dist/colors.var.css) *(Variables Material Design)*
- **familyRoboto**: all family to roboto. See on [fonts google](https://fonts.google.com/?query=roboto).
+ `font-family: 'Roboto', sans-serif;`
+ `font-family: 'Roboto Condensed', sans-serif;`
+ `font-family: 'Roboto Slab', serif;`
+ `font-family: 'Roboto Mono', monospace;`
- **reset.css**: Use this to work without browser junk.
### Load Resouces Images
All images resources is load from [`images/`](https://github.com/JonDotsoy/equip-resources-basestyles/tree/master/images) directory.
#### With PostCSS (`equip-image(nameResource)`)
Is possible load this images with postcss, only is required a plugin from this module.
**File with Postcss**
```javascript
postcss([
require('postcss-import')(),
require('equip-resources-basestyles')(),
require('postcss-inline-svg')(),
])
```
> Learn more how use PostCSS on [here](https://github.com/postcss/postcss#usage).
and in your **file css**.
```css
/* source/style.css */
.my-image {
background-image: svg-load(equip-image('ic_add_alert_black_24px'));
}
```
You obtain Something similar to this:
```css
/* www/style.css */
.my-image{
background-image: url("data:image/svg+xml;charset=utf-8,%...");
}
```
## LICENSE
Esta obra está bajo una [Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional](http://creativecommons.org/licenses/by-sa/4.0/).
[@JonDotsoy]: https://github.com/jondotsoy
[PostCSS-import]: https://github.com/postcss/postcss-import
[PostCSS]: https://github.com/postcss/postcss
[PreCSS]: https://github.com/jonathantneal/precss
[CSSNext]: http://cssnext.io/