https://github.com/fabricelements/skin-styles
Extend paper-styles with useful styles
https://github.com/fabricelements/skin-styles
animations bootstrap buttons component css extend-paper-styles grid polymer styles typography
Last synced: 2 months ago
JSON representation
Extend paper-styles with useful styles
- Host: GitHub
- URL: https://github.com/fabricelements/skin-styles
- Owner: FabricElements
- License: bsd-3-clause
- Created: 2016-12-10T22:22:10.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-01-08T13:12:44.000Z (over 7 years ago)
- Last Synced: 2025-01-27T08:31:33.092Z (over 1 year ago)
- Topics: animations, bootstrap, buttons, component, css, extend-paper-styles, grid, polymer, styles, typography
- Language: JavaScript
- Homepage:
- Size: 97.7 KB
- Stars: 1
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://travis-ci.org/FabricElements/skeleton-focal)
[](https://www.webcomponents.org/element/FabricElements/skin-styles)
# skin-styles
`skin-styles` is a [Polymer 2](http://polymer-project.org) element that extends `paper-styles` with useful styles.
## Installation
Install skin-styles with Bower
```shell
$ bower install --save FabricElements/skin-styles
```
## Usage
Import it into the `` of your page
```html
```
The `` component provides simple ways to use Material Design CSS styles in your application. The following imports are also available:
* [buttons.html](./classes/buttons.html): A complete set of custom buttons.
* [grid.html](./classes/grid.html): A grid layout using Bootstrap.
* [typography.html](./classes/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`
``` html
hello
```
``` html
hello
```
Use paper-button attributes like **"raised"** to continue manipulating the styles.
To see more custom buttons styles, please check the [demo](./demo/buttons.html) file.
* `skin-styles-grid`
* Three equal columns.
``` html
.col-md-4
.col-md-4
.col-md-4
```
To see more basic grid layouts, please check the [demo](./demo/grid.html) file.
* `skin-typography`
* `typography-light`
``` html
Text
```
* `typography-dark`
``` html
Text
```
To see more typography default styles, please check the [demo](./demo/typography.html) file.
## Contributing
Please check [CONTRIBUTING](./CONTRIBUTING.md).
## License
Released under the [BSD 3-Clause License](./LICENSE.md).