skin-styles is a Polymer 2 element that extends paper-styles with useful styles.
Install skin-styles with Bower
$ bower install --save FabricElements/skin-stylesImport it into the <head> of your page
<link rel="import" href="bower_components/skin-styles/skin-styles.html">The <skin-styles> component provides simple ways to use Material Design CSS styles in your application. The following imports are also available:
- buttons.html: A complete set of custom buttons.
- grid.html: A grid layout using Bootstrap.
- typography.html: A Set of default styles for typography extending the paper default styles.
We recommend importing each of these individual files, and using the style mixins
available in each ones, rather than the aggregated skin-styles.html as a whole.
-
skin-buttonsbtn-rounded
<paper-button class="btn-fill--dark-accent-color btn-rounded"> hello </paper-button>
<paper-button raised class="btn-rounded"> hello </paper-button>
Use paper-button attributes like "raised" to continue manipulating the styles.
To see more custom buttons styles, please check the demo file.
-
skin-styles-grid- Three equal columns.
<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div>
To see more basic grid layouts, please check the demo file.
-
skin-typographytypography-light
<article class="redlines paragraph"> <div class="paper-font-display4 light">Text</div> </article>
typography-dark
<article class="redlines paragraph bg-dark"> <div class="paper-font-display4 dark">Text</div> </article>
To see more typography default styles, please check the demo file.
Please check CONTRIBUTING.
Released under the BSD 3-Clause License.