{"id":28485345,"url":"https://github.com/area73/WC-JSS","last_synced_at":"2025-06-28T05:31:21.782Z","repository":{"id":37736264,"uuid":"149183959","full_name":"area73/WC-JSS","owner":"area73","description":"Based on InuitCSS this framework substitute SASS with plain JavaScript using ES6 modules and template string","archived":false,"fork":false,"pushed_at":"2023-12-15T05:38:17.000Z","size":2238,"stargazers_count":1,"open_issues_count":30,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-08T00:09:53.890Z","etag":null,"topics":["css","es6-modules","inuitcss","jss","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/area73.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2018-09-17T20:28:33.000Z","updated_at":"2024-06-13T14:27:21.000Z","dependencies_parsed_at":"2025-05-13T00:56:50.503Z","dependency_job_id":"0eef218f-fd21-418b-93f8-4479a4f17d79","html_url":"https://github.com/area73/WC-JSS","commit_stats":null,"previous_names":["area73/jss"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/area73/WC-JSS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/area73%2FWC-JSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/area73%2FWC-JSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/area73%2FWC-JSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/area73%2FWC-JSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/area73","download_url":"https://codeload.github.com/area73/WC-JSS/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/area73%2FWC-JSS/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261081018,"owners_count":23106677,"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","es6-modules","inuitcss","jss","webcomponents"],"created_at":"2025-06-08T00:09:51.721Z","updated_at":"2025-06-28T05:31:21.776Z","avatar_url":"https://github.com/area73.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WC-  JSS\nBased on InuitCSS this framework substitute SASS with plain JavaScript using modules and string \nliterals.\nIt is design to use in conjunction with Web Components \n\n## Installation \u0026 usage\nInstall npm package in your project\n`npm i wc-jss`\n\nOnce installed on your project you can star using styles inside your Web Components like bellow :\n````javascript\n// app.js (web component)\n\nimport reset from 'wc-jss/generic/reset';\nimport {LitElement, html} from '@polymer/lit-element';\n\nclass WcApp extends LitElement {\n  render() {\n      return html`\n        \u003cstyle\u003e\n          ${reset}\n        \u003c/style\u003e\n        \u003cdiv class=\"app-bar\"\u003eExample App\u003c/div\u003e\n     }\n}\n````\n**Note:** Be aware that you will need a bundler in order to import NPM packages\n\n## Custom configuration object\nYou can customize initial settings params (or plugin settings params) by parsing an object the \nfirst time you call the singleton config object `JSSConfig.`\n\nIn order to add custom config , create a file , import JSSConfig, and instantiate JSSConfig \nwith the new config object like:\n````javascript\n// wcJssSettings.js\nimport JSSConfig from 'wc-jss/settings/JSSConfig';\n\nconst WCJSS = {\n  fontSizeHeading: {\n    h1: 180,\n    h2: 80,\n    h3: 40,\n    h4: 20,\n    h5: 10,\n    h6: 8,\n  },\n};\n\nJSSConfig.getInstance(WCJSS);\n````\n\nThe new JSSConfig object will keep original parameters and will add or override parameters with the \nnew one passed in \n\nBecause JSSConfig object is a singleton you need to assure that the first time you get the instance\nyou are parsing the new config object. In order to do so, your custom file will be the first file \nimported on your project, this way any \nfurther use of the library will contain the custom JSSConfig.\n\nNow in your main index.js the first import will be this file:\n```javascript\nimport './wcJssSettings';\nimport './components/app';\n// ...\n```\n\n\n## TODO: Input in Pixels output in any \nTo make it easier for developers, every measure will be in pixels and the output (TODO) will be \nparametrize, upon config rules (px, rem, em, %) \n****\n\n## TDD\nWe use TDD in our development. To run test:\n ````bash\n  npm run test\n````\nThis will run Jest with a watcher\n \n## Demo: Storybook\nWe use story book to make our demos.\n\nWe are keeping two packages.json , one for main app and another one only for storybook\nthis way we are  not polluting our main library with unwanted packages only needed for storybook\n\nSo the first time you start story book you will nedd to to an extra installation:\n ```bash\ncd storybook\nnpm i\n```\nAnd then each time you want to run the server from storybook directory just do:\n\n```bash\n# To run server on port 6006\nnpm run storybook\n# To build the storybook \nnpm run build-storybook\n```\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farea73%2FWC-JSS","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farea73%2FWC-JSS","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farea73%2FWC-JSS/lists"}