{"id":15041624,"url":"https://github.com/ahansson/hgrid-css","last_synced_at":"2025-06-11T14:38:02.204Z","repository":{"id":37987558,"uuid":"324640154","full_name":"ahansson/hgrid-css","owner":"ahansson","description":"🌟 A lightweight and practical CSS utility kit. Zero config. Flat learning curve.","archived":false,"fork":false,"pushed_at":"2025-01-24T23:11:38.000Z","size":629,"stargazers_count":14,"open_issues_count":4,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-14T16:47:46.281Z","etag":null,"topics":["autoprefixer","css","css-framework","css-utilities","hgrid-css","html","node-sass","postcss","responsive-design","scss","utility-classes"],"latest_commit_sha":null,"homepage":"https://hgrid.io","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/ahansson.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,"zenodo":null}},"created_at":"2020-12-26T21:45:52.000Z","updated_at":"2024-05-24T15:31:49.000Z","dependencies_parsed_at":"2025-04-14T16:42:27.474Z","dependency_job_id":"b40abf05-9818-4255-80f2-15fc54ae10e3","html_url":"https://github.com/ahansson/hgrid-css","commit_stats":{"total_commits":224,"total_committers":4,"mean_commits":56.0,"dds":0.0669642857142857,"last_synced_commit":"abff515107fc01f0f0961720c6e348f3f7d8f4d2"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahansson%2Fhgrid-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahansson%2Fhgrid-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahansson%2Fhgrid-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahansson%2Fhgrid-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ahansson","download_url":"https://codeload.github.com/ahansson/hgrid-css/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahansson%2Fhgrid-css/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259280822,"owners_count":22833456,"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":["autoprefixer","css","css-framework","css-utilities","hgrid-css","html","node-sass","postcss","responsive-design","scss","utility-classes"],"created_at":"2024-09-24T20:46:17.868Z","updated_at":"2025-06-11T14:38:02.175Z","avatar_url":"https://github.com/ahansson.png","language":"SCSS","readme":"\u003cdiv align=\"center\"\u003e\n\u003cbr\u003e\n\u003cimg src=\"https://github.com/ahansson/hgrid.io/blob/master/graphics/readme-img.png\" alt=\"Hgrid Banner\" title=\"hgrid Banner\" width=\"1335\"\u003e\n\u003cbr\u003e\n\n# hgrid-css\n\n## **A Lightweight and Practical CSS Utility Kit.**\n\n### Zero Config. Flat Learning Curve.\n\n**Hgrid** is a starting point intended to make HTML work out of the box. It's not a UI framework, but provides sensible defaults so you can start prototyping without having to deal with browser quirks, unstyled elements and basic responsivity.\n\n\u003c/div\u003e\n\n## How to use\n\nDocumentation: [https://hgrid.io](https://hgrid.io)\n\n## How to install\n\n### **As a node module:**\n\n```bash\nnpm install hgrid-css --save-dev\n```\n\n```bash\nyarn add hgrid-css --dev\n```\n\n### **Then, @use as Sass in your project:**\n\n```scss\n@use 'hgrid-css/sass/hgrid' with (\n\n  // example customization\n\n  $link-color: #ffe88d,\n  $link-color-hover: #fff0b4,\n  $container-max-width: 1600px,\n  $link-underline-color: #ffe88d,\n  $use-global-link-underlines: true,\n  $include-grid: false\n);\n```\nFor detailed information with step by step recipes on how to integrate **hgrid** in different JS frameworks, please refer to [the documentation](https://hgrid.io/documentation/integrate/).\n\n### **From local file or CDN:**\n\n```html\n\u003chead\u003e\n  \u003c!-- Without CSS grid utilities (slimmer) --\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/hgrid-css@latest/dist/hgrid.min.css\"\u003e\n\n  \u003c!-- Including CSS grid utilities (heavier) --\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/hgrid-css@latest/dist/hgrid.grid.min.css\"\u003e\n\u003c/head\u003e\n```\n### **@import into your stylesheet:**\n```css\n/* From node_modules */\n@import './../etc./node_modules/hgrid-css/dist/hgrid.min.css';\n```\n```css\n/* From CDN */\n@import 'https://unpkg.com/hgrid-css@latest/dist/hgrid.min.css';\n```\n\n## Local development\n\n_Requires Node.js installed on your system (or use an editor plugin such as [live-sass](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass))_\n\nRun `npm install` from the root of the **hgrid-css** folder.\n\nStart compiling **hgrid**'s `.scss` files to `.css` with the command `npm run watch`. Changes you make to files in the `/sass` folder will result in css files being updated in the `/dist` folder.\n\nTo produce the compiled, prefixed and minified **hgrid** output, use `npm run build`. It uses Autoprefixer to add some backwards compatibility before minifying the result as `hgrid.min.css`.\n\nSee [hgrid.io/documentation/installation](https://hgrid.io/documentation/installation/) for complete usage instructions.\n\n## Versions\n\nLatest: **1.0**\n\nSee [releases](https://github.com/ahansson/hgrid-css/releases) on GitHub.\n\u003cbr\u003e\u003cbr\u003e\n\n## Roadmap \n\nSee the [kanban board](https://github.com/ahansson/hgrid-css/projects/1).\n\n## Problems?\n\nPlease don't hesitate to report [an issue ](https://github.com/ahansson/hgrid-css/issues).\n\n## Help us improve\n\nPlease don't hesitate to open a [pull request](https://github.com/ahansson/hgrid-css/pulls).\n\n## Author\n\n© Atle Hansson\n\n## License\n\nMIT","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahansson%2Fhgrid-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fahansson%2Fhgrid-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahansson%2Fhgrid-css/lists"}