skin-styles

skin-styles is a Polymer 2 element that extends paper-styles with useful styles.

Installation

Install skin-styles with Bower

$ bower install --save FabricElements/skin-styles

Usage

Import 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.

Examples: basic usage

skin-buttons
- btn-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-typography

typography-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.

Contributing

Please check CONTRIBUTING.

License

Released under the BSD 3-Clause License.