{"id":21911608,"url":"https://github.com/fabricelements/skin-styles","last_synced_at":"2026-04-16T05:03:01.440Z","repository":{"id":98284885,"uuid":"76140868","full_name":"FabricElements/skin-styles","owner":"FabricElements","description":"Extend paper-styles with useful styles","archived":false,"fork":false,"pushed_at":"2019-01-08T13:12:44.000Z","size":100,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-01-27T08:31:33.092Z","etag":null,"topics":["animations","bootstrap","buttons","component","css","extend-paper-styles","grid","polymer","styles","typography"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FabricElements.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-10T22:22:10.000Z","updated_at":"2018-06-15T18:15:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"65a30b7b-4852-44c3-bdb9-9a5050afa528","html_url":"https://github.com/FabricElements/skin-styles","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FabricElements%2Fskin-styles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FabricElements%2Fskin-styles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FabricElements%2Fskin-styles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FabricElements%2Fskin-styles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FabricElements","download_url":"https://codeload.github.com/FabricElements/skin-styles/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244929222,"owners_count":20533735,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animations","bootstrap","buttons","component","css","extend-paper-styles","grid","polymer","styles","typography"],"created_at":"2024-11-28T18:06:55.594Z","updated_at":"2025-10-17T20:25:08.797Z","avatar_url":"https://github.com/FabricElements.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/FabricElements/skin-styles.svg?branch=master)](https://travis-ci.org/FabricElements/skeleton-focal)\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/FabricElements/skin-styles)\n\n# skin-styles\n\n`skin-styles` is a [Polymer 2](http://polymer-project.org) element that extends `paper-styles` with useful styles.\n\n## Installation\n\nInstall skin-styles with Bower\n\n```shell\n$ bower install --save FabricElements/skin-styles\n```\n\n## Usage\n\nImport it into the `\u003chead\u003e` of your page\n\n```html\n\u003clink rel=\"import\" href=\"bower_components/skin-styles/skin-styles.html\"\u003e\n```\n\nThe `\u003cskin-styles\u003e` component provides simple ways to use Material Design CSS styles in your application. The following imports are also available:\n\n* [buttons.html](./classes/buttons.html): A complete set of custom buttons.\n* [grid.html](./classes/grid.html): A grid layout using Bootstrap.\n* [typography.html](./classes/typography.html): A Set of default styles for typography extending the paper default styles.\n\nWe recommend importing each of these individual files, and using the style mixins\navailable in each ones, rather than the aggregated `skin-styles.html` as a whole.\n\n### Examples: basic usage\n\n* `skin-buttons`\n  * `btn-rounded`\n\n  ``` html\n  \u003cpaper-button class=\"btn-fill--dark-accent-color btn-rounded\"\u003e\n    hello\n  \u003c/paper-button\u003e\n  ```\n\n  ``` html\n  \u003cpaper-button raised class=\"btn-rounded\"\u003e\n    hello\n  \u003c/paper-button\u003e\n  ```\n  Use paper-button attributes like **\"raised\"** to continue manipulating the styles.\n\n  To see more custom buttons styles, please check the [demo](./demo/buttons.html) file. \n\n* `skin-styles-grid`\n  * Three equal columns.\n\n  ``` html\n  \u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"col-md-4\"\u003e.col-md-4\u003c/div\u003e\n    \u003cdiv class=\"col-md-4\"\u003e.col-md-4\u003c/div\u003e\n    \u003cdiv class=\"col-md-4\"\u003e.col-md-4\u003c/div\u003e\n  \u003c/div\u003e\n  ```\n\n  To see more basic grid layouts, please check the [demo](./demo/grid.html) file. \n\n* `skin-typography`\n  * `typography-light`\n\n  ``` html\n  \u003carticle class=\"redlines paragraph\"\u003e\n    \u003cdiv class=\"paper-font-display4 light\"\u003eText\u003c/div\u003e\n  \u003c/article\u003e\n  ```\n\n  * `typography-dark`\n\n  ``` html\n  \u003carticle class=\"redlines paragraph bg-dark\"\u003e\n    \u003cdiv class=\"paper-font-display4 dark\"\u003eText\u003c/div\u003e\n  \u003c/article\u003e\n  ```\n\n  To see more typography default styles, please check the [demo](./demo/typography.html) file. \n\n## Contributing\n\nPlease check [CONTRIBUTING](./CONTRIBUTING.md).\n\n## License\n\nReleased under the [BSD 3-Clause License](./LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffabricelements%2Fskin-styles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffabricelements%2Fskin-styles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffabricelements%2Fskin-styles/lists"}