{"id":25650649,"url":"https://github.com/superdj/smaterial","last_synced_at":"2025-02-23T15:17:21.345Z","repository":{"id":34646944,"uuid":"137853396","full_name":"SuperDJ/smaterial","owner":"SuperDJ","description":"A CSS framework that follows the Material Design guidelines as close as possible","archived":false,"fork":false,"pushed_at":"2023-03-15T04:41:29.000Z","size":3090,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-19T09:51:31.062Z","etag":null,"topics":["css","css-framework","es6","framework","front-end","frontend","material-design","no-jquery","scss"],"latest_commit_sha":null,"homepage":"https://superdj.github.io/smaterial/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SuperDJ.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-19T07:06:44.000Z","updated_at":"2022-08-22T19:31:26.000Z","dependencies_parsed_at":"2024-09-18T20:45:09.768Z","dependency_job_id":null,"html_url":"https://github.com/SuperDJ/smaterial","commit_stats":{"total_commits":106,"total_committers":3,"mean_commits":"35.333333333333336","dds":0.09433962264150941,"last_synced_commit":"e35212c2889090253f2a9859f1f7e43dbcbd020d"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SuperDJ%2Fsmaterial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SuperDJ%2Fsmaterial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SuperDJ%2Fsmaterial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SuperDJ%2Fsmaterial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SuperDJ","download_url":"https://codeload.github.com/SuperDJ/smaterial/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240331353,"owners_count":19784646,"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":["css","css-framework","es6","framework","front-end","frontend","material-design","no-jquery","scss"],"created_at":"2025-02-23T15:17:19.847Z","updated_at":"2025-02-23T15:17:20.892Z","avatar_url":"https://github.com/SuperDJ.png","language":"SCSS","readme":"[![npm version](https://badge.fury.io/js/smaterial.svg)](https://badge.fury.io/js/smaterial)\n\n# Content\n\n- About Material\n- Getting started\n- Minify files\n- Contributing\n\n# About Material\n[Material](https://superdj.github.io/material/) is a CSS framework based on the Material Design guidelines.\n\n# Getting started\nTo get started you can choose to use the source files or the minified files.\nIn order to use the minified files the easiest way is to load them from GitHub for now:\n\n\t\u003clink rel=\"styleheet\" href=\"//superdj.github.io/material/dist/css/material-light.css\"\u003e\n\t\u003cscript src=\"//superdj.github.io/material/dist/js/material.js\"\u003e\u003c/script\u003e\n\t\nIf you prefer to use the source file you can do so by installing the package:\n\n\tnpm i -D smaterial\n\t\nIn order to use the source files for sass you case use one of the following:\n\n\t@import '~smaterial/src/sass/material-light'\n\t@import '~smaterial/src/sass/material-dark'\n\t@import '~smaterial/src/sass/index'\n\t\nBoth `index` and `material-light` are basically the same. However `material-dark` will result in a dark theme.\nThe dark theme can also be achieved by importing `index` and override the variable `$theme: dark`\n\nand for js:\n\n\timport '~smaterial/src/js/main.js'\n\t\n# Minify files\nTo minify the output of both SASS and JS files there are a couple of tricks you can use. Do note that this only works for the source files.\n\n## JS\nWhen using the source files for JS you can simply import only the required classes. \nHow you can do this is shown below, the full list of classes can be found in `src/js/main.js`\n\n## SASS\nFor SASS you can simply edit defined arrays which specify the used components.\nFor example copy and paste the following variable into your own sass file: `$icon-settings: (18, 24, 36, 48);`.\nIf you then delete `18` the class `.icon--18` will not be included in the outputted CSS file.\n\n# Created using\nPHPStorm","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuperdj%2Fsmaterial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsuperdj%2Fsmaterial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuperdj%2Fsmaterial/lists"}