{"id":17472349,"url":"https://github.com/byteyard/modulatecss","last_synced_at":"2026-01-04T22:42:24.207Z","repository":{"id":240051885,"uuid":"774840546","full_name":"byteyard/modulatecss","owner":"byteyard","description":"ModulateCSS is a modern, visionary CSS framework that prioritizes the experience of its key stakeholders: users, editors, and developers.","archived":false,"fork":false,"pushed_at":"2024-05-22T10:33:53.000Z","size":67,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2024-05-23T06:32:58.448Z","etag":null,"topics":["css","css3","framework","modulate"],"latest_commit_sha":null,"homepage":"https://modulatecss.com/","language":"CSS","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/byteyard.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2024-03-20T09:38:56.000Z","updated_at":"2024-05-28T10:23:13.227Z","dependencies_parsed_at":"2024-05-28T10:39:46.384Z","dependency_job_id":null,"html_url":"https://github.com/byteyard/modulatecss","commit_stats":null,"previous_names":["byteyard/modulatecss"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/byteyard%2Fmodulatecss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/byteyard%2Fmodulatecss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/byteyard%2Fmodulatecss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/byteyard%2Fmodulatecss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/byteyard","download_url":"https://codeload.github.com/byteyard/modulatecss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244966523,"owners_count":20539797,"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","css3","framework","modulate"],"created_at":"2024-10-18T17:08:20.140Z","updated_at":"2026-01-04T22:42:24.167Z","avatar_url":"https://github.com/byteyard.png","language":"CSS","readme":"# Modulate CSS\n\nThe `modulatecss` package is designed to distribute ModulateCSS styles, providing a streamlined and scalable solution for modern web development. It allows developers to integrate a comprehensive CSS framework that enhances design consistency, maintainability, and responsiveness across web applications. This package supports both CDN and npm installation methods, making it versatile for different project setups. ModulateCSS leverages advanced CSS techniques such as Grid, Flexbox, and CSS custom properties, ensuring your web designs are robust and future-proof.\n\nRead the docs under [modulatecss.com](https://modulatecss.com/).\n\n## Features\n- **Comprehensive Style Distribution:** Ensures consistent styling across your web projects.\n- **Advanced CSS Techniques:** Utilizes modern CSS features like Grid, Flexbox, and custom properties.\n- **Flexible Integration:** Supports installation via CDN or npm, adaptable to various project needs.\n- **Scalable and Maintainable:** Promotes a clear separation of concerns and modular CSS structure for easier maintenance.\n- **Responsive Design:** Implements fluid sizing and other responsive techniques to adapt seamlessly across devices.\n\n## Installation\nYou can install `modulatecss` using npm:\n\n```bash\nnpm install modulatecss\n```\n\nOr include it directly via CDN:\n\n```html\n\u003clink href=\"https://cdn.jsdelivr.net/npm/modulate@latest/dist/css/modulate.min.css\" rel=\"stylesheet\"\u003e\n```\n\n## Integration\n\nDepending on the features you need, you can import different CSS files:\n\nAll:\n```js\nimport 'modulatecss/dist/css/modulate.min.css';\n```\n\nFluid Sizing Full:\n```js\nimport 'modulatecss/dist/css/modulate-fluid-sizing.min.css';\n```\n\nFluid Sizing Classic:\n```js\nimport 'modulatecss/dist/css/modulate-fluid-sizing-classic.min.css';\n```\n\nFluid Sizing Modern:\n```js\nimport 'modulatecss/dist/css/modulate-fluid-sizing-modern.min.css';\n```\n\nAdvanced Module Grid:\n```js\nimport 'modulatecss/dist/css/modulate-grid.min.css';\n```\n\nAdvanced Header:\n```js\nimport 'modulatecss/dist/css/modulate-header.min.css';\n```\n\nRemember to replace 'modulatecss' with the path to your node_modules directory if you installed via npm, or with the CDN URL if you're using a CDN.\n\n\n**Next.js:**\n\n```javascript\nimport 'modulatecss/dist/css/modulate.min.css';\nimport '@styles/theme.css';\n\nfunction MyApp({ Component, pageProps }) {\n  return \u003cComponent {...pageProps} /\u003e;\n}\n\nexport default MyApp;\n```\n\n**Angular:**\n\n```json\n{\n  \"projects\": {\n    \"your-project-name\": {\n      \"architect\": {\n        \"build\": {\n          \"options\": {\n            \"styles\": [\n              \"node_modules/modulatecss/dist/css/modulate.min.css\",\n              \"styles/theme.css\"\n            ]\n          }\n        }\n      }\n    }\n  }\n}\n```\n\n**Vue.js:**\n\n```javascript\nimport 'modulatecss/dist/css/modulate.min.css';\nimport 'styles/theme.css';\n\nnew Vue({\n  render: h =\u003e h(App),\n}).$mount('#app');\n```\n\n**Svelte:**\n\n```javascript\nimport 'modulatecss/dist/css/modulate.min.css';\nimport 'styles/theme.css';\n\nconst app = new App({\n  target: document.body,\n});\n\nexport default app;\n```\n\n**Gatsby:**\n\n```javascript\nimport 'modulatecss/dist/css/modulate.min.css';\nimport 'styles/theme.css';\n```\n\n## Repository\nFor more information, visit the [GitHub repository](https://github.com/byteyard/modulatecss).\n\n## Issues\nTo report bugs or request features, please use the [issue tracker](https://github.com/byteyard/modulatecss/issues).\n\n## License\nThis project is licensed under MIT.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbyteyard%2Fmodulatecss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbyteyard%2Fmodulatecss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbyteyard%2Fmodulatecss/lists"}