{"id":16545654,"url":"https://github.com/coderamrin/sass-grid","last_synced_at":"2026-03-05T08:32:03.531Z","repository":{"id":177884191,"uuid":"453044749","full_name":"Coderamrin/sass-grid","owner":"Coderamrin","description":null,"archived":false,"fork":false,"pushed_at":"2022-02-02T06:52:16.000Z","size":2,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-04T08:26:47.853Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"SCSS","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/Coderamrin.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}},"created_at":"2022-01-28T11:37:07.000Z","updated_at":"2022-03-30T00:22:12.000Z","dependencies_parsed_at":"2023-07-10T20:15:12.986Z","dependency_job_id":null,"html_url":"https://github.com/Coderamrin/sass-grid","commit_stats":{"total_commits":4,"total_committers":1,"mean_commits":4.0,"dds":0.0,"last_synced_commit":"566ad1f34fcc4a1c6c81f4b52ff4fdc5cc8df8a6"},"previous_names":["coderamrin/sass-grid"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Coderamrin/sass-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coderamrin%2Fsass-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coderamrin%2Fsass-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coderamrin%2Fsass-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coderamrin%2Fsass-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Coderamrin","download_url":"https://codeload.github.com/Coderamrin/sass-grid/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coderamrin%2Fsass-grid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30115935,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T08:19:04.902Z","status":"ssl_error","status_checked_at":"2026-03-05T08:17:37.148Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5: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":[],"created_at":"2024-10-11T19:07:13.302Z","updated_at":"2026-03-05T08:32:03.512Z","avatar_url":"https://github.com/Coderamrin.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# **SASS Grid**\n\n## Simple responsive grid with Sass mixin.\n\n## **What**\n\nSass grid is a responsive 12 column grid. built with sass mixin.\n\n## **How to use it**\n\n1. Downlad the \\_grid.scss file from this repo.\n2. copy it over to your project\n3. import it to your main.scss file.\n4. Now use it.\n\n## **Example**\n\n```scss\ndiv {\n  @include @container;\n\n  .div-child-1 {\n    @include @column (6, medium);\n  }\n\n  .div-child-2 {\n    @include @column (6, medium);\n  }\n}\n```\n\n## **How this works?**\n\nIf you've used bootstrap grid or anyother grid system.\nYou know that you need to add .container class to the parent then the row then to the child you add the columns with the media quearies.\n\nSo, what we are doing here is we are adding the **container** mixin to the parent. Then the **column** mixin to the child elements.\n\n### **Note: The column takes 2 parameter first one is the column $size the second one is the breakpoint.**\n\n```scss\n@mixin column($size, $breakpoint: medium) {\n  @include breakpoint-up($breakpoint) {\n    box-sizing: border-box;\n    flex-grow: 0;\n    width: ($size * 100% / $grid-columns);\n  }\n}\n```\n\n**The container mixin takes 3 parameters all of them are optional if you are okay with the default value.**\n\n\n```scss\n@mixin container($small: 20px, $large: 100px, $isGrid: true) {\n  width: 100%;\n  padding: 0 $small;\n  box-sizing: border-box;\n  margin: 0 auto;\n\n  @include breakpoint-up(medium) {\n    padding: 0 $large;\n  }\n\n  @if $isGrid {\n    display: flex;\n    flex-flow: row wrap;\n  }\n}\n```\n\n## **Inspiration**\nThe idea was his\n[Noman](https://twitter.com/Nomanux)\n\nAnd I wrote the code. \n\n**any feed back is appriciated**\nYou can reach us on twitter at \n[@Amrin](https://twitter.com/coderamrin) \nand\n[@Noman](https://twitter.com/Nomanux)\n\n## **Thanks for reading**","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoderamrin%2Fsass-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoderamrin%2Fsass-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoderamrin%2Fsass-grid/lists"}