{"id":17133562,"url":"https://github.com/nsommer/sass-grids","last_synced_at":"2026-04-29T11:02:31.111Z","repository":{"id":58245198,"uuid":"43171371","full_name":"nsommer/sass-grids","owner":"nsommer","description":"Responsive float based grid system","archived":false,"fork":false,"pushed_at":"2016-02-25T16:49:02.000Z","size":36,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-02-24T18:24:39.940Z","etag":null,"topics":["grid","grid-systems","sass"],"latest_commit_sha":null,"homepage":"http://nsommer.github.io/sass-grids/","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/nsommer.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}},"created_at":"2015-09-25T19:30:56.000Z","updated_at":"2017-04-07T12:51:38.000Z","dependencies_parsed_at":"2022-08-30T22:50:31.923Z","dependency_job_id":null,"html_url":"https://github.com/nsommer/sass-grids","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/nsommer/sass-grids","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nsommer%2Fsass-grids","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nsommer%2Fsass-grids/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nsommer%2Fsass-grids/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nsommer%2Fsass-grids/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nsommer","download_url":"https://codeload.github.com/nsommer/sass-grids/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nsommer%2Fsass-grids/sbom","scorecard":{"id":697340,"data":{"date":"2025-08-11","repo":{"name":"github.com/nsommer/sass-grids","commit":"3f30914ac552b011744134b46e49256f616fb2ed"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}}]},"last_synced_at":"2025-08-22T04:06:52.466Z","repository_id":58245198,"created_at":"2025-08-22T04:06:52.466Z","updated_at":"2025-08-22T04:06:52.466Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32422532,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T06:29:02.080Z","status":"ssl_error","status_checked_at":"2026-04-29T06:29:00.631Z","response_time":110,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["grid","grid-systems","sass"],"created_at":"2024-10-14T19:42:28.088Z","updated_at":"2026-04-29T11:02:31.089Z","avatar_url":"https://github.com/nsommer.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"CSS Grid System [![Build Status](https://travis-ci.org/nsommer/sass-grids.svg)](https://travis-ci.org/nsommer/sass-grids) [![devDependency Status](https://img.shields.io/david/dev/nsommer/sass-grids.svg)](https://david-dm.org/nsommer/sass-grids#info=devDependencies)\n================\nA simple, responsive and customizable grid system for CSS, built with Sass.\n\n## Table of Contents\n- [Capabilities](#capabilities)\n- [Installation](#installation)\n    - [npm](#npm)\n    - [bower](#bower)\n    - [git](#git)\n- [Usage](#usage)\n- [Customize](#customize)\n    - [Number of cell sizing classes](#number-of-cell-sizing-classes)\n    - [Gutter](#gutter)\n    - [Responsive sizing classes](#responsive-sizing-classes)\n- [Float based](#float-based)\n- [Yet another grid system?](#yet-another-grid-system)\n- [Changelog](#changelog)\n- [License](#license)\n\n## Capabilities\n- Float based grid system with configurable size classes.\n- Natural language class names rather than decimal numbers.\n- Utility classes for cell alignment and offsets.\n- Configurable optional responsive sizing classes.\n\n## Installation\nThe easiest way to use sass-grids is to use a package manager like *npm* or *bower*. However, cloning the repository and manually compiling is also possible.\n\n### npm\n\n```shell\nnpm install sass-grids\n```\n\n### bower\n\n```shell\nbower install sass-grids\n```\n\n### git\nYou need to install *git*, *node.js*, *npm* and the *sass* gem.\n\n```\ngit clone https://github.com/nsommer/sass-grids.git\ncd sass-grids\nnpm install\ngrunt dist\n```\n\n## Usage\nFor detailed documentation, visit the [demo page](https://nsommer.github.io/sass-grids). Here's an example:\n\n```html\n\u003cdiv class=\"grid\"\u003e\n  \u003cdiv class=\"cell cell-five-tenths\"\u003eI'm a cell taking half the width of my parent.       \u003c/div\u003e\n  \u003cdiv class=\"cell cell-four-tenths\"\u003eI'm a cell taking four tenths the width of my parent.\u003c/div\u003e\n  \u003cdiv class=\"cell cell-one-tenth\"\u003e  I'm a cell taking one tenths the width of my parent. \u003c/div\u003e\n\u003c/div\u003e\n```\n\nTo be able to use the grid system with standard values, copy the `dist/sass-grids.css` into your project folder and include it into the head your HTML like that:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"sass-grids.css\"\u003e\n```\n\nAlternatively, you can overwrite the standard settings and compile your own custom grid system.\n\n## Customize\nAll configuration variables are defined in `src/_variables.scss`. Due to the usage of the `!default` keyword on all variables, it is very easy to customize those values. Just create a Sass file that resets the variables you want to and import `sass-grids` after that (of course outsourcing the variable resets into a scss file of its own would be good practice). E.g.:\n\n```sass\n$cells-per-row: 5;\n$gutter: 25px;\n$responsive-size-classes: false;\n\n@import \"sass-grids\";\n```\n\n### Number of cell sizing classes\nThe number of cells per row for which css classes are generated ist set by the `$cells-per-row` variable. To create human readable class names, two maps - `$number-names` and `$share-names` - are used. By default, they include entries for grid systems with up to 20 cells per row. If you want to generate a grid system with more than 20 cells per row possible, you have to overwrite the maps with maps that contain enough entries for your grid system.\n\nDefault values:\n\n```sass\n$cells-per-row: 10;\n\n$number-names: (\n  1:  \"one\",\n  2:  \"two\",\n  3:  \"three\",\n  4:  \"four\",\n  5:  \"five\",\n  6:  \"six\",\n  7:  \"seven\",\n  8:  \"eight\",\n  9:  \"nine\",\n  10: \"ten\",\n  11: \"eleven\",\n  12: \"twelve\",\n  13: \"thirteen\",\n  14: \"fourteen\",\n  15: \"fifteen\",\n  16: \"sixteen\",\n  17: \"seventeen\",\n  18: \"eighteen\",\n  19: \"nineteen\",\n  20: \"twenty\"\n) !default;\n\n// Lookup table to get shares as names by numeric value.\n\n$share-names: (\n  2:  \"half\",\n  3:  \"third\",\n  4:  \"fourth\",\n  5:  \"fifth\",\n  6:  \"sixth\",\n  7:  \"seventh\",\n  8:  \"eighth\",\n  9:  \"ninth\",\n  10: \"tenth\",\n  11: \"eleventh\",\n  12: \"twelfth\",\n  13: \"thirteenth\",\n  14: \"fourteenth\",\n  15: \"fifteenth\",\n  16: \"sixteenth\",\n  17: \"seventeenth\",\n  18: \"eighteenth\",\n  19: \"nineteenth\",\n  20: \"twentieth\"\n) !default;\n```\n\n### Gutter\nThe gutter between two cells is defined by the `$gutter` variable.\n\nDefault:\n\n```sass\n$gutter: 1em !default;\n```\n\n### Responsive sizing classes\nSizing classes for specific viewport widths to enable responsive design with a mobile first approach can be toggled at build time by the variable `$responsive-size-classes`. The width breakpoints are defined in the map `$width-breakpoints` which contains mapping for width sizes and strings to enable human readable viewport naming in classes.\n\nDefaults:\n\n```sass\n$responsive-size-classes: true !default;\n$width-breakpoints: (\n  \"tablet\":     720px,\n  \"desktop\":    960px,\n  \"widescreen\": 1200px\n) !default;\n```\n\n## Float based\nBesides floating based grid systems, there do also exist solutions that use *flexbox* or *inline-block* and *box-sizing*. I decided to go for a solution using floats because I already knew how that works. *Flexbox* would probably be the best solution technically, but aside from very bad support in IE, this is something I want to explore another time.\n\n## Yet another grid system?\nI needed a grid system for a website I was building so I took the opportunity to improve my Sass skills by writing it from scratch by myself. :-)\n\nCheck out the [blog post](https://nilssommer.de/articles/2-building-a-grid-system-with-sass) I wrote about it.\n\n## Changelog\n- **1.0.0** Completely changed CSS class names.\n- **0.1.2** Eases customization\n- **0.1.1** Bug fixes\n- **0.1.0** Initial release\n\n## License\nMIT license rocks.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnsommer%2Fsass-grids","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnsommer%2Fsass-grids","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnsommer%2Fsass-grids/lists"}