{"id":15041685,"url":"https://github.com/thingsym/flexbox-grid-mixins","last_synced_at":"2025-04-03T02:11:54.619Z","repository":{"id":41168917,"uuid":"58310558","full_name":"thingsym/flexbox-grid-mixins","owner":"thingsym","description":"Sass Mixins to generate Flexbox grid","archived":false,"fork":false,"pushed_at":"2023-02-11T00:38:08.000Z","size":827,"stargazers_count":73,"open_issues_count":6,"forks_count":19,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-24T07:58:38.757Z","etag":null,"topics":["css","dart-sass","flexbox","libsass","mixin","npm","sass","scss"],"latest_commit_sha":null,"homepage":"https://thingsym.github.io/flexbox-grid-mixins/","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/thingsym.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"thingsym"}},"created_at":"2016-05-08T12:14:57.000Z","updated_at":"2024-11-30T05:50:00.000Z","dependencies_parsed_at":"2023-02-18T13:30:20.064Z","dependency_job_id":null,"html_url":"https://github.com/thingsym/flexbox-grid-mixins","commit_stats":{"total_commits":125,"total_committers":3,"mean_commits":"41.666666666666664","dds":"0.016000000000000014","last_synced_commit":"1db9eb6e6b60fa18442ab4ff98e93ee54688c7db"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thingsym%2Fflexbox-grid-mixins","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thingsym%2Fflexbox-grid-mixins/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thingsym%2Fflexbox-grid-mixins/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thingsym%2Fflexbox-grid-mixins/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thingsym","download_url":"https://codeload.github.com/thingsym/flexbox-grid-mixins/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246922248,"owners_count":20855345,"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","dart-sass","flexbox","libsass","mixin","npm","sass","scss"],"created_at":"2024-09-24T20:46:22.341Z","updated_at":"2025-04-03T02:11:54.593Z","avatar_url":"https://github.com/thingsym.png","language":"SCSS","readme":"# Flexbox Grid Mixins\n\nSass Mixins to generate Flexbox grid.\n\n**Flexbox Grid Mixins** is Sass Mixins library to help you write well-structured, readable, maintainable, component-based grid using Flexbox (CSS Flexible Box Layout Module).\n\nFlexbox Grid Mixins documentation: [https://thingsym.github.io/flexbox-grid-mixins/](https://thingsym.github.io/flexbox-grid-mixins/)\n\n## Example\n\n### HTML\n\n```\n\u003cdiv class=\"grid\"\u003e\n\u003cdiv class=\"grid__col-3\"\u003e\n  3\n\u003c/div\u003e\n\u003cdiv class=\"grid__col-9\"\u003e\n  9\n\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Sass\n\n#### Dart Sass\n\n```\n@use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins';\n\n$default-grid-gutter: 2%;\n\n.grid {\n  @include flexbox-grid-mixins.grid($gutter: $default-grid-gutter);\n\n  \u003e .grid__col-3 {\n    @include flexbox-grid-mixins.grid-col($col: 3, $gutter: $default-grid-gutter);\n  }\n  \u003e .grid__col-9 {\n    @include flexbox-grid-mixins.grid-col($col: 9, $gutter: $default-grid-gutter);\n  }\n}\n```\n\n#### LibSass\n\n```\n@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';\n\n$default-grid-gutter: 2%;\n\n.grid {\n  @include grid($gutter: $default-grid-gutter);\n\n  \u003e .grid__col-3 {\n    @include grid-col($col: 3, $gutter: $default-grid-gutter);\n  }\n  \u003e .grid__col-9 {\n    @include grid-col($col: 9, $gutter: $default-grid-gutter);\n  }\n}\n```\n\n### CSS\n\n```\n.grid {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  margin-left: -1%;\n  margin-right: -1%;\n}\n\n.grid \u003e .grid__col-3 {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  -webkit-box-flex: 0;\n  -ms-flex: 0 0 23%;\n  flex: 0 0 23%;\n  margin-left: 1%;\n  margin-right: 1%;\n  margin-bottom: 2%;\n}\n\n.grid \u003e .grid__col-9 {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  -webkit-box-flex: 0;\n  -ms-flex: 0 0 73%;\n  flex: 0 0 73%;\n  margin-left: 1%;\n  margin-right: 1%;\n  margin-bottom: 2%;\n}\n```\n\n## Installation\n\n### npm\n\n```\n$ npm install flexbox-grid-mixins --save-dev\n```\n\n### Yarn\n\n```\n$ yarn add flexbox-grid-mixins --dev\n```\n\n### Manual Install\n\nInclude `dart-sass/\\_flexbox-grid-mixins.scss` or `sass/\\_flexbox-grid-mixins.scss` in the appropriate location in your project.\n\n## Getting Started using Dart Sass\n\n### 1. Import Flexbox Grid Mixins in Sass/SCSS file\n\n```\n@use 'flexbox-grid-mixins';\n```\n\nExample : import from node_modules\n\n```\n@use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins';\n```\n\n### 2. Define the grid container\n\n```\n.grid {\n  @include flexbox-grid-mixins.grid();\n}\n```\n\n### 3. Generate the grid columns\n\n```\n.grid__col-3 {\n  @include flexbox-grid-mixins.grid-col(3);\n}\n.grid__col-9 {\n  @include flexbox-grid-mixins.grid-col(9);\n}\n```\n\n## Getting Started using LibSass\n\nNote: [LibSass is Deprecated](https://sass-lang.com/blog/libsass-is-deprecated). See [Future Plans](https://sass-lang.com/blog/the-module-system-is-launched#future-plans).\n\n### 1. Import Flexbox Grid Mixins in Sass/SCSS file\n\n```\n@import 'flexbox-grid-mixins';\n```\n\nExample : import from node_modules\n\n```\n@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';\n```\n\n### 2. Define the grid container\n\n```\n.grid {\n  @include grid();\n}\n```\n\n### 3. Generate the grid columns\n\n```\n.grid__col-3 {\n  @include grid-col(3);\n}\n.grid__col-9 {\n  @include grid-col(9);\n}\n```\n\n## Documentation\n\nSee Flexbox Grid Mixins documentation: [http://thingsym.github.io/flexbox-grid-mixins/](http://thingsym.github.io/flexbox-grid-mixins/)\n\n## Mixins Reference\n\n[Mixins Reference](http://thingsym.github.io/flexbox-grid-mixins/#Mixins-Reference)\n\n## Example\n\n* [Basic Example](http://thingsym.github.io/flexbox-grid-mixins/#Basic-Example)\n* [Grid System Example](http://thingsym.github.io/flexbox-grid-mixins/#Grid-System-Example)\n\n### Dart Sass\n\n* [Flexbox Grid Mixins Example](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/example.html)\n* [Holy Grail Layout - Using Flexbox Grid Mixins](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/holy-grail-layout.html)\n* [Responsive web design - Using Flexbox Grid Mixins](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/responsive.html)\n* [Gap (grid-gap) css property](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/gap.html)\n* [Auto margin](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/auto-margin.html)\n* [Box Sizing using Default Values](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/box-sizing.html)\n* [Stack](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/stack.html)\n* [Grid Type](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/grid-type.html)\n* [Unit-Set Grid (Experimental stage)](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/unit-set.html)\n* [Test] [Stick Out Grid](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/test-stick-out.html)\n\n### LibSass\n\n* [Flexbox Grid Mixins Example](http://thingsym.github.io/flexbox-grid-mixins/example/example.html)\n* [Holy Grail Layout - Using Flexbox Grid Mixins](http://thingsym.github.io/flexbox-grid-mixins/example/holy-grail-layout.html)\n* [Responsive web design - Using Flexbox Grid Mixins](http://thingsym.github.io/flexbox-grid-mixins/example/responsive.html)\n* [Gap (grid-gap) css property](http://thingsym.github.io/flexbox-grid-mixins/example/gap.html)\n* [Auto margin](http://thingsym.github.io/flexbox-grid-mixins/example/auto-margin.html)\n* [Box Sizing using Default Values](http://thingsym.github.io/flexbox-grid-mixins/example/box-sizing.html)\n* [Stack](http://thingsym.github.io/flexbox-grid-mixins/example/stack.html)\n* [Grid Type](http://thingsym.github.io/flexbox-grid-mixins/example/grid-type.html)\n* [Unit-Set Grid (Experimental stage)](http://thingsym.github.io/flexbox-grid-mixins/example/unit-set.html)\n* [Test] [Stick Out Grid](http://thingsym.github.io/flexbox-grid-mixins/example/test-stick-out.html)\n\n## Package manager\n\n[flexbox-grid-mixins - npm](https://www.npmjs.com/package/flexbox-grid-mixins)\n\n## Development\n\n1. run ```$ sudo yum install nodejs npm```\n2. Forking on GitHub\n3. run ```$ cd /path/to/flexbox-grid-mixins```\n4. run ```$ npm install```\n5. run ```$ npm run serve```\n6. Access URL http://localhost:3000\n\n## Docker Development Environment\n\n### Build and launch website\n\n```\ndocker-compose run --rm node npm install\ndocker-compose run --rm  -p 3000:3000 node npm run serve\n```\n\nAccess to URL http://localhost:3000\n\n### listing tasks\n\n```\ndocker-compose run --rm node npm run\n```\n\n## Contribution\n\n### Patches and Bug Fixes\n\nSmall patches and bug reports can be submitted a issue tracker in Github. Forking on Github is another good way. You can send a pull request.\n\n1. Fork [Flexbox Grid Mixins](https://github.com/thingsym/flexbox-grid-mixins) from GitHub repository\n2. Create a feature branch: git checkout -b my-new-feature\n3. Commit your changes: git commit -am 'Add some feature'\n4. Push to the branch: git push origin my-new-feature\n5. Create new Pull Request on GitHub\n\n## Changelog\n\n* Version 0.3.4\n  * fix npm script\n  * fix Mixins Reference\n  * add Docker Development Environment\n  * gulpfile.js for docker\n  * update package.json\n  * update github actions, Node.js 12 actions are deprecated\n  * fix layout margin\n  * add Cards Layout example\n* Version 0.3.3\n  * update README\n  * update index.html\n  * update example\n  * add condense\n  * add $gap argument for gap CSS property\n* Version 0.3.2\n  * fix gulp-sass compiler\n  * update package.json\n  * fix Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.\n  * add timeout-minutes to workflows\n* Version 0.3.1\n  * update example\n  * fix items row/column alignment example\n  * add auto margin example\n* Version 0.3.0\n  * add example for dart sass\n  * add Flexbox Grid Mixins for Dart Sass\n  * add dart sass workfows with gulpfile.js\n* Version 0.2.2\n  * remove .travis.yml, change CI/CD to GitHub Actions\n* Version 0.2.1\n  * auto release to npm only version tags\n  * gulp bump up version to 4.0\n* Version 0.2.0\n  * update example\n  * update package.json\n  * add Default Values flexbox-grid-mixins-stack\n  * change margin property, remove @mixin, grid-margin and grid-col-margin\n  * remove breakpoint value of col argument\n  * remove condensed argument\n  * change grid-type from argument to Default Values flexbox-grid-mixins-grid-type\n  * remove bower.json\n  * add .travis.yml\n* Version 0.1.6\n  * add Default Values $flexbox-grid-mixins-box-sizing\n  * update package.json\n  * change lint from scss-lint to stylelint\n* Version 0.1.5\n  * update package.json\n  * add optional arguments $shorthand to @mixin grid-col\n* Version 0.1.4\n  * update example\n  * update document\n  * fix conditional expression\n  * add optional arguments $width, $max-width, $min-width, $height, $max-height and $min-height to @mixin grid-col\n  * enable flex-grow with number column\n  * add positive preset column\n  * change readme.md file name to upper case\n* Version 0.1.3\n  * rename folder to docs from doc, change gh-pages\n  * update document\n  * update example\n  * add optional arguments $flex-direction and $flex-wrap to the mixin grid\n* Version 0.1.2\n  * update document\n  * update example\n  * improve unit-set column, using CSS calc()\n* Version 0.1.1\n  * fix breakpoint preset column\n  * fix example\n  * fix Holy Grail Layout\n* Version 0.1.0\n  * Initial release.\n\n## License\n\nLicensed under the MIT License.\n\n## Author\n\n[thingsym](https://github.com/thingsym)\n\nCopyright (c) 2016-2022 thingsym\n","funding_links":["https://github.com/sponsors/thingsym"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthingsym%2Fflexbox-grid-mixins","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthingsym%2Fflexbox-grid-mixins","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthingsym%2Fflexbox-grid-mixins/lists"}