Skip to content

Latest commit

 

History

History
91 lines (63 loc) · 2.51 KB

README.md

File metadata and controls

91 lines (63 loc) · 2.51 KB
Raw

Build Status Published on webcomponents.org

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.