{"id":15007879,"url":"https://github.com/kgrewee/roobie","last_synced_at":"2025-10-30T12:31:38.638Z","repository":{"id":37118583,"uuid":"392876549","full_name":"kgrewee/roobie","owner":"kgrewee","description":"A collection of CSS classes to keep you writing business logic in your HTML.","archived":false,"fork":false,"pushed_at":"2022-07-27T06:25:32.000Z","size":10753,"stargazers_count":4,"open_issues_count":17,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-02T08:41:57.206Z","etag":null,"topics":["css","css-animations","css-framework","css-layout","css-themes","css-utilites","html","js","js-framework","nodejs","npm","npmjs","themes","vanillajs","web","web-app","web-development","web-framework","web-templates"],"latest_commit_sha":null,"homepage":"https://roobie.net","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/kgrewee.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}},"created_at":"2021-08-05T02:14:27.000Z","updated_at":"2024-05-02T16:04:55.000Z","dependencies_parsed_at":"2022-07-15T21:00:55.437Z","dependency_job_id":null,"html_url":"https://github.com/kgrewee/roobie","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kgrewee%2Froobie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kgrewee%2Froobie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kgrewee%2Froobie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kgrewee%2Froobie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kgrewee","download_url":"https://codeload.github.com/kgrewee/roobie/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238968351,"owners_count":19560586,"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-animations","css-framework","css-layout","css-themes","css-utilites","html","js","js-framework","nodejs","npm","npmjs","themes","vanillajs","web","web-app","web-development","web-framework","web-templates"],"created_at":"2024-09-24T19:14:16.559Z","updated_at":"2025-10-30T12:31:33.277Z","avatar_url":"https://github.com/kgrewee.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Roobie\n[![npm](https://badge.fury.io/js/roobie.svg)](https://badge.fury.io/js/roobie)\n![publish npm](https://github.com/kgrewee/roobie/actions/workflows/npm.yml/badge.svg)\n![publish docs](https://github.com/kgrewee/roobie/actions/workflows/docs.yml/badge.svg)\n![js scan](https://github.com/kgrewee/roobie/actions/workflows/js.yml/badge.svg)\n\nA collection of CSS classes to keep you writing business logic in your HTML. Easily build maintainable web \u0026 mobile applications with 100s of pre-built CSS classes at your fingertips. Never write boilerplate CSS classes with padding, margin, etc. ever again. Instead, favor utility CSS classes that are reusable. This makes HTML files bigger, but reduces code cleanup and stray code when removing content. Control all of your CSS variables from centralized themes for consistency throughout your web-apps and easily switch themes. Increase maintainability and development speed.\n\n## Modules\n- Themes: Use our pre-built themes or fork our template and create your own.\n- Layout: Create simple and responsive layouts with flexbox CSS helpers.\n- Utilities: CSS utilities to keep you where you belong, writing business logic in your HTML.\n- Animations: A variety of animations to deliver clean and dynamic content.\n- Components: Easy to use web components built with CSS \u0026 JavaScript.\n- Manipulation (Coming soon)\n- Icons (Coming soon)\n\n\u003cbr\u003e\n\n## Examples\n100% width container with a centered row flexbox layout. The child elements each have a different font size.\n```html\n\u003cdiv class=\"div row center\"\u003e\n    \u003cspan class=\"fnts1\"\u003eRoobie\u003c/span\u003e\n    \u003cspan class=\"fnts2\"\u003eRoobie\u003c/span\u003e\n    \u003cspan class=\"fnts3\"\u003eRoobie\u003c/span\u003e\n\u003c/div\u003e\n```\n\n\u003cbr\u003e\n\n100% width container with a row flexbox layout.  The child elements have a 2 intensity margin horizontally. The child elements each have 2 intensity padding.\n```html\n\u003cdiv class=\"div row row-spacer2\"\u003e\n    \u003cspan class=\"pad2\"\u003eRoobie\u003c/span\u003e\n    \u003cspan class=\"pad2\"\u003eRoobie\u003c/span\u003e\n    \u003cspan class=\"pad2\"\u003eRoobie\u003c/span\u003e\n\u003c/div\u003e\n```\n\n\u003cbr\u003e\n\n33% width container.  The child elements each have a different vertical margin (top and bottom). The last child has a left border 2 intensity with blue 2 intensity.\n```html\n\u003cdiv class=\"div33\"\u003e\n    \u003cspan class=\"mrgv1\"\u003eRoobie\u003c/span\u003e\n    \u003cspan class=\"mrgv2\"\u003eRoobie\u003c/span\u003e\n    \u003cspan class=\"mrgv3 bdrl2 bdr-blue2\"\u003eRoobie\u003c/span\u003e\n\u003c/div\u003e\n```\n\n\u003cbr\u003e\n\n50% width container with a vertically centered and horizontally end column flexbox layout. The child elements each have a different font weight.\n```html\n\u003cdiv class=\"div50 col aln-center jst-end\"\u003e\n    \u003cspan class=\"fntw1\"\u003eRoobie\u003c/span\u003e\n    \u003cspan class=\"fntw2\"\u003eRoobie\u003c/span\u003e\n    \u003cspan class=\"fntw3\"\u003eRoobie\u003c/span\u003e\n\u003c/div\u003e\n```\n\n\u003cbr\u003e\n\nTheme variables snippet.\n```css\n[theme=\"light\"] {\n    /*Base*/\n    --primary: rgb(21, 206, 166);\n    --secondary: var(--bg4);\n    /*Status*/\n    --success: rgba(81, 190, 73, 0.7);\n    --warning: rgba(235, 119, 42, .7);\n    --danger: rgba(248, 62, 52, .7);\n    --info: rgba(152, 217, 243, .7);\n    /*Shade 1*/\n    --white: rgb(240, 240, 240);\n    --black: rgb(20, 20, 20);\n    --grey: rgb(199, 199, 199);\n    --red: rgb(167, 32, 32);\n    --orange: rgb(243, 162, 11);\n    --yellow: rgb(221, 221, 25);\n    --green: rgb(19, 172, 82);\n    --blue: rgb(23, 23, 192);\n    --indigo: rgb(117, 13, 117);\n    --violet: rgb(184, 88, 184);\n    /*Shade 2*/\n    --white2: rgba(240, 240, 240, .7);\n    --black2: rgba(20, 20, 20, .7);\n    --grey2: rgba(199, 199, 199, .7);\n    /*More shades omitted...*/\n    /*Text*/\n    --t1: rgb(20, 20, 20);\n    --t2: rgb(35, 35, 35);\n    --t3: rgb(50, 50, 50);\n    --t4: rgb(65, 65, 65);\n    --t5: rgb(80, 80, 80);\n    --t6: rgb(95, 95, 95);\n    /*Background*/\n    --bg1: rgb(240, 240, 240);\n    --bg2: rgb(230, 230, 230);\n    --bg3: rgb(220, 220, 220);\n    --bg4: rgb(210, 210, 210);\n    --bg5: rgb(200, 200, 200);\n    --bg6: rgb(190, 190, 190);\n    /*And many more...*/\n}\n```\n\n## Feature Request\nSubmit new feature requests [here](https://github.com/kgrewee/roobie/issues).\n\n## Install\nInstall all necessary npm dependencies to build locally.\n```shell\nnpm install\n```\n\n## Package\nPackage builds all aspects of Roobie.  Artifacts will be found in `dist/`.\n```shell\nnpm run package\n```\n\n## Serve Docs\nServe the docs with a simple Python HTTP server.\n```shell\nnpm run docs\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkgrewee%2Froobie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkgrewee%2Froobie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkgrewee%2Froobie/lists"}