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.

— @JonDotsoy

@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.
  • z-depth.css
• 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.

With PostCSS (equip-image(nameResource))

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.