equip-resources-basestyles
Shared resources for component implementation.
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.
@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.
-
Colors: A series of colors. Ho!! And also material design.
colors.css
-
colors.var.css
(Variables Material Design)
-
familyRoboto: all family to roboto. See on fonts google.
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/
directory.
equip-image(nameResource)
)
With PostCSS (Is possible load this images with postcss, only is required a plugin from this module.
File with Postcss
postcss([
require('postcss-import')(),
require('equip-resources-basestyles')(),
require('postcss-inline-svg')(),
])
Learn more how use PostCSS on here.
and in your file css.
/* source/style.css */
.my-image {
background-image: svg-load(equip-image('ic_add_alert_black_24px'));
}
You obtain Something similar to this:
/* 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.