{"id":15391238,"url":"https://github.com/juliancwirko/s-grid","last_synced_at":"2025-04-15T16:56:57.453Z","repository":{"id":27653001,"uuid":"31138339","full_name":"juliancwirko/s-grid","owner":"juliancwirko","description":"Flexbox grid system for Stylus","archived":false,"fork":false,"pushed_at":"2017-07-28T14:25:39.000Z","size":23,"stargazers_count":63,"open_issues_count":3,"forks_count":9,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-28T22:41:54.521Z","etag":null,"topics":["css","flexbox-grid","sgrid","stylus"],"latest_commit_sha":null,"homepage":"http://stylusgrid.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/juliancwirko.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-02-21T19:47:40.000Z","updated_at":"2025-01-29T03:15:23.000Z","dependencies_parsed_at":"2022-09-07T12:22:59.614Z","dependency_job_id":null,"html_url":"https://github.com/juliancwirko/s-grid","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/juliancwirko%2Fs-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juliancwirko%2Fs-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juliancwirko%2Fs-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juliancwirko%2Fs-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/juliancwirko","download_url":"https://codeload.github.com/juliancwirko/s-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248752802,"owners_count":21156161,"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","flexbox-grid","sgrid","stylus"],"created_at":"2024-10-01T15:10:26.275Z","updated_at":"2025-04-15T16:56:57.433Z","avatar_url":"https://github.com/juliancwirko.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"## sGrid - Flexbox Grid System for Stylus\n\nsGrid is a Flexbox grid system built with Stylus CSS preprocessor. It is prepared to use with helper classes, like Bootstrap or Foundation does it, but also in a more semantic way by using special Stylus functions.\n\nIt has many integrations like Meteor, Grund and React.\n\n- More complex documentation: [http://stylusgrid.com](http://stylusgrid.com)\n- Blog post: [sGrid - Working with Flexible Box layouts](http://julian.io/s-grid-working-with-flexible-box-layouts/)\n- Blog post: [My workflow with the Stylus and Flexbox grid system](https://medium.com/@juliancwirko/my-workflow-with-the-stylus-and-flexbox-grid-system-5f4f50ac3f33)\n- Article on Sitepoint.com: [Introducing sGrid: A Stylus-based Flexbox Grid System](http://www.sitepoint.com/introducing-sgrid-a-stylus-based-flexbox-grid-system/)\n\n## Instalation\n\nThis is a standard Npm package so you can use it standalone, but you can also use it with boilerplates for Grunt and React. Also with Meteor.\n\n## Usage\n\n- [Npm](http://stylusgrid.com/npm.html)\n- [Meteor](http://stylusgrid.com/meteor.html)\n- [React Boilerplate](http://stylusgrid.com/react.html)\n- [Grunt Boilerplate](http://stylusgrid.com/grunt.html)\n\nYou should use it with Autoprefixer [https://github.com/jenius/autoprefixer-stylus](https://github.com/jenius/autoprefixer-stylus) Package for Meteor is bundled with it. It is also configured in Grunt and React boilerplates.\n\nYou'll find more complex documentation and examples here: [http://stylusgrid.com/](http://stylusgrid.com).\n\n### Simple examples\n\n#### With only sGrid functions\n\n**Stylus code**:\n```css\nsection\n    grid()\n    div\n        padding rem-calc(15)\n        cell(1, 4)\n        \u0026.other-cell\n            cell(2, 4, 'bottom')\n        \u0026.different-cell\n            cell(1, 3, g: 30px)\n```\n\n**HTML code**:\n```html\n\u003csection\u003e\n    \u003cdiv\u003eLorem ipsum\u003c/div\u003e\n    \u003cdiv\u003eLorem ipsum\u003c/div\u003e\n    \u003cdiv class=\"other-cell\"\u003eLorem ipsum\u003c/div\u003e\n    \u003cdiv\u003eLorem ipsum\u003c/div\u003e\n    \u003cdiv class=\"different-cell\"\u003eLorem ipsum\u003c/div\u003e\n\u003c/section\u003e\n```\n\n#### You can achieve the same effect with helper classes\n\n**HTML code**:\n```\n\u003csection class=\"s-grid-top\"\u003e\n    \u003cdiv class=\"s-grid-cell s-grid-cell-md-6\"\u003eLorem ipsum\u003c/div\u003e\n    \u003cdiv class=\"s-grid-cell s-grid-cell-md-6\"\u003eLorem ipsum\u003c/div\u003e\n    \u003cdiv class=\"s-grid-cell s-grid-cell-bottom s-grid-cell-md-12\"\u003eLorem ipsum\u003c/div\u003e\n    \u003cdiv class=\"s-grid-cell s-grid-cell-md-6\"\u003eLorem ipsum\u003c/div\u003e\n    \u003cdiv class=\"s-grid-cell s-grid-cell-center s-grid-cell-md-4 s-grid-cell-offset-md-4\"\u003eLorem ipsum\u003c/div\u003e\n\u003c/section\u003e\n```\n\n### Overwrite settings\n\nYou can overwrite the settings (from `s-grid-settings.styl` file), just place your settings after `s-grid-settings` import. Do something like this:\n\n```bash\n\n// main s-grid settings file:\n\n@import 's-grid-settings'\n\n// my new settings goes here:\n\nbase-font-size = 16            // base font size it is 16px by default it is used to calculate rem sizes\ngutter = 20px                  // gutters size\ncolumns = 12                   // how many columns you need in your grid (usage with helper classes)\ngridClassName = 's-grid'       // main grid wraper class name (usage with helper classes)\ncellClassName = 's-grid-cell'  // main grid cell class name (usage with helper classes)\n\nbreakpoints = {                // media queries breakpoints\n    sm: 0,\n    md: 640px,\n    lg: 1200px,\n    xlg: 1440px,\n    xxlg: 1920px\n}\n\n// s-grid imports:\n\n@import 's-grid-functions'\n@import 's-grid-classes'\n\n// ...\n// my app styles here..\n// ...\n```\n\n\u0026nbsp;\n\n### Inspired by:\n\n* Cory Simmons: (Creator of Jeet grid system and many other grid tools) [https://github.com/corysimmons](https://github.com/corysimmons)\n* Philip Walton (Solved by Flexbox): [http://philipwalton.github.io/solved-by-flexbox/demos/grids/](http://philipwalton.github.io/solved-by-flexbox/demos/grids/)\n* CSS tricks: [http://css-tricks.com/snippets/css/a-guide-to-flexbox/](http://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n* Foundation for Apps grid [http://foundation.zurb.com/apps/docs/#!/grid](http://foundation.zurb.com/apps/docs/#!/grid)\n\nLet me know if something is wrong with sGrid, its website or React, Grunt boilerplates. I'm sure that there is much more to do with it.\n\n### Known problems\n\n- In IE and probably also in Edge in many cases you should read this: [https://github.com/philipwalton/flexbugs](https://github.com/philipwalton/flexbugs)\n- In IE 11 there is for sure a bug described here: [https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box](https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box) you can solve it by providing another content wrapper as it is described in 'Workaround' point 2\n\n### License\n\nMIT\n\n### Changelog\n\n#### v1.2.1\n- fix for 0 gutter when stylus `--compress` flag is used - see issue [#10](https://github.com/juliancwirko/s-grid/issues/10) ... removed `0rem` value\n\n#### v1.2.0\n- center(width, padding) improvements - thanks to [@Splendorr](https://github.com/Splendorr). New use cases: center(1200px, 15px) ; center(80%, 5%)\n\n#### v1.1.2\n- helper classes fix\n\n#### v1.1.1\n- docs update\n\n#### v1.1.0\n- stack() function\n- center() function\n- rwd images in cells for FF fix\n\n#### v1.0.1\n- better rem-calc() function\n\n#### v1.0.0\n- refactor and api changes\n- cols() is now cell()\n- Grid helper classes is optional. You can import s-grid-classes.styl file if you need it.\n- Functions parameters order is changed. See below.. you can use named parameters too.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuliancwirko%2Fs-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjuliancwirko%2Fs-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuliancwirko%2Fs-grid/lists"}