{"id":16959813,"url":"https://github.com/jondotsoy/equip-resources-basestyles","last_synced_at":"2026-05-18T02:35:19.624Z","repository":{"id":57226511,"uuid":"76055053","full_name":"JonDotsoy/equip-resources-basestyles","owner":"JonDotsoy","description":"Shared resources for component implementation.","archived":false,"fork":false,"pushed_at":"2017-01-17T16:47:46.000Z","size":49,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-25T08:19:47.702Z","etag":null,"topics":["css","postcss"],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc-by-sa-4.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JonDotsoy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-09T17:13:43.000Z","updated_at":"2016-12-09T17:14:17.000Z","dependencies_parsed_at":"2022-08-24T11:01:00.724Z","dependency_job_id":null,"html_url":"https://github.com/JonDotsoy/equip-resources-basestyles","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/JonDotsoy/equip-resources-basestyles","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonDotsoy%2Fequip-resources-basestyles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonDotsoy%2Fequip-resources-basestyles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonDotsoy%2Fequip-resources-basestyles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonDotsoy%2Fequip-resources-basestyles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JonDotsoy","download_url":"https://codeload.github.com/JonDotsoy/equip-resources-basestyles/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonDotsoy%2Fequip-resources-basestyles/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267604686,"owners_count":24114546,"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","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["css","postcss"],"created_at":"2024-10-13T22:46:17.097Z","updated_at":"2026-05-18T02:35:19.586Z","avatar_url":"https://github.com/JonDotsoy.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# equip-resources-basestyles\nShared resources for component implementation.\n\n[![npm](https://goo.gl/CuVcGV)](https://www.npmjs.com/package/equip-resources-basestyles)\n[![npm](https://goo.gl/0ojMSs)](https://www.npmjs.com/package/equip-resources-basestyles)\n![Develo By 3s SpA](https://goo.gl/yeo8X3)\n\n## Styles CSS\n### How Use\n\n\u003e We develop this styles with [PostCSS][], [PostCSS-import][], [PreCSS][] and [CSSNext][]. But of course the files no use all tools. So good luck.\n\u003e\n\u003e — [@JonDotsoy][]\n\n```css\n@import \"equip-resources-basestyles\";\n\n.my_class_with_color {\n  color: var(--md-red-500); /* (ง ͠° ͟ل͜ ͡°)ง a variable with material design */\n}\n\n.my_box {\n  box-shadow: var(--md-z-depth-1);\n  \u0026:hover {\n    box-shadow: var(--md-z-depth-2);\n  }\n}\n```\n\n### Overview\n\n- **z-depth**: In material design, everything should have a certain z-depth that determines how far raised or close to the page the element is. See more [materializecss#shadow](http://materializecss.com/shadow.html).\n    + [`z-depth.css`](https://github.com/JonDotsoy/equip-resources-basestyles/blob/master/css/z-depth.css)\n- **Colors**: A series of colors. Ho!! And also [material design](https://www.npmjs.com/package/material-colors).\n    + [`colors.css`](https://github.com/JonDotsoy/equip-resources-basestyles/blob/master/css/colors.css)\n    + [`colors.var.css`](https://github.com/shuhei/material-colors/blob/master/dist/colors.var.css) *(Variables Material Design)*\n- **familyRoboto**: all family to roboto. See on [fonts google](https://fonts.google.com/?query=roboto).\n    + `font-family: 'Roboto', sans-serif;`\n    + `font-family: 'Roboto Condensed', sans-serif;`\n    + `font-family: 'Roboto Slab', serif;`\n    + `font-family: 'Roboto Mono', monospace;`\n- **reset.css**: Use this to work without browser junk.\n\n### Load Resouces Images\n![Preview Images](./assets/previewicons.png)\n\nAll images resources is load from [`images/`](https://github.com/JonDotsoy/equip-resources-basestyles/tree/master/images) directory.\n\n#### With PostCSS (`equip-image(nameResource)`)\nIs possible load this images with postcss, only is required a plugin from this module.\n\n**File with Postcss**\n\n```javascript\npostcss([\n  require('postcss-import')(),\n  require('equip-resources-basestyles')(),\n  require('postcss-inline-svg')(),\n])\n```\n\n\u003e Learn more how use PostCSS on [here](https://github.com/postcss/postcss#usage).\n\nand in your **file css**.\n\n```css\n/* source/style.css */\n.my-image {\n  background-image: svg-load(equip-image('ic_add_alert_black_24px'));\n}\n```\n\nYou obtain Something similar to this:\n\n```css\n/* www/style.css */\n.my-image{\n  background-image: url(\"data:image/svg+xml;charset=utf-8,%...\");\n}\n```\n\n## LICENSE\n![CC BY-SA 4.0](https://i.creativecommons.org/l/by-sa/4.0/80x15.png)\n\nEsta obra está bajo una [Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional](http://creativecommons.org/licenses/by-sa/4.0/).\n\n[@JonDotsoy]: https://github.com/jondotsoy\n[PostCSS-import]: https://github.com/postcss/postcss-import\n[PostCSS]: https://github.com/postcss/postcss\n[PreCSS]: https://github.com/jonathantneal/precss\n[CSSNext]: http://cssnext.io/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjondotsoy%2Fequip-resources-basestyles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjondotsoy%2Fequip-resources-basestyles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjondotsoy%2Fequip-resources-basestyles/lists"}