{"id":15579252,"url":"https://github.com/dimorphic/grid-generator","last_synced_at":"2025-03-29T07:44:52.744Z","repository":{"id":29451394,"uuid":"32987653","full_name":"dimorphic/Grid-Generator","owner":"dimorphic","description":"WTGrid - SASS mixin for responsive CSS grids","archived":false,"fork":false,"pushed_at":"2015-03-27T13:30:33.000Z","size":140,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-03T21:46:04.935Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"reillysiemens/layabout","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dimorphic.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}},"created_at":"2015-03-27T13:30:12.000Z","updated_at":"2019-06-04T18:14:32.000Z","dependencies_parsed_at":"2022-09-06T17:51:29.197Z","dependency_job_id":null,"html_url":"https://github.com/dimorphic/Grid-Generator","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/dimorphic%2FGrid-Generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimorphic%2FGrid-Generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimorphic%2FGrid-Generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimorphic%2FGrid-Generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dimorphic","download_url":"https://codeload.github.com/dimorphic/Grid-Generator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246156028,"owners_count":20732359,"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":[],"created_at":"2024-10-02T19:14:15.943Z","updated_at":"2025-03-29T07:44:52.725Z","avatar_url":"https://github.com/dimorphic.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"WTGrid\n==============\n\nWith the help of WTGrid you will be able to generate whatever CSS grid you need. Unlike all CSS frameworks out there WTGrid creates only the needed styles without polluting the source code with unneeded code. \n\nWTGrid is not an actual framework. Its a @mixin that can be integrated anywhere and it only takes care of grids. \n\nIt makes use of the $map property in SASS v3.3 to define the configs of desired grid. \n\nWTGrid is full responsive and compatible with IE9+ \n\nIt has few configs and its very easy to use. \n\n\nWhy WTGrid?\n==============\n\nIt will generate styles only for your configs. No extra classes no extra styles are added to your CSS. \n\nWTGrid is not dependent on box-sizing. It works fine with both content-box and border-box. \n\nThe gutter is implemented making use of calc() and margin and so it does not touch the integrity of the container. Backgrounds ca be safely used on grid columns. \n\nInstalation\n==============\n\nIn order to use WTGrid you will need to have SASS v3.3 minimum \n\n```\n$ gem install sass\n$ sass -v\n-\u003e  Sass 3.3 minimum\n```\n\nThen you will have to clone the repository and compile SASS. You can do this with: \n\n```\n$ git clone git@github.com:mihnutzen/Grid-Generator.git\n$ cd project-name\n```\n\n```$ sass scss/style.scss css/style.css```\n\nOr \n\n```$ compass watch``` If you like compass\n\nOr you can include ```_responsive_mixins``` and ```_wtgrid``` in your project and add them to your main SCSS \n\n```\n@import \"responsive_mixins\";\n@import \"wtgrid\";\n```\n\nUsage\n==============\n\n\nGrids can be generated by defining the following configs: \n\n```columnCount``` - is used to define the number of columns\n\n```gutter``` - for adding space between columns. both px and % can be used \n\n```columnVariations``` - is used for creating custom column sizes. It is set in the to form of XoY where X is the size of the column and Y is the numbers of columns to which it calculates the width. \n\nThe configs are passed to the mixing in the form of an object: \n\n```\n$gridSetup: (\n    columnCount: 3,\n    columnVariations: \"2o3\",\n    gutter: 10px\n);\n\n@include generateGrid($gridSetup);\n\n```\n\nThe ```@mixin``` will take care of generating the class names and the styles \n\n\nStyles and classes for specific breakpoints can be created by configuring ```s / m / l / xl```. \n\n```s / m / l / xl``` - receive same options as a normal grid\n\n```\n$gridSetup: (\n\ts: (\n\t\tcolumnCount: 2\n\t)\n);\n\n@include generateGrid($gridSetup);\n```\n\n\nExamples\n==============\n\n\nCreating a grid with 2 columns: \n\n```\n$gridSetup1: (\n\tcolumnCount: 2\n);\n\n@include generateGrid($gridSetup1);\n```\n\nCreating a grid with 4 columns and 10px gutter:\n\n```\n$gridSetup2: (\n\tcolumnCount: 4,\n\tgutter: 10px\n);\n@include generateGrid($gridSetup2);\n```\n\nCreating a grid with  5 columns and 1 custom size: \n\n```\n$gridSetup3: (\n\tcolumnCount: 5,\n\tcolumnVariations: \"4o5\"\n);\n@include generateGrid($gridSetup3);\n```\n\nArrays can be used to declare multiple grid types: \n\n```\n$gridSetup4: (\n\tcolumnCount: 3 4,\n\tcolumnVariations: \"1o4\" \"3o4\",\n\tgutter: 10px\n);\n@include generateGrid($gridSetup4);\n```\n\nCreating a responsive grid with different column size only for small screens: \n\n```\n$gridSetup5: (\n\tcolumnCount: 2,\n\ts: (\n\t\tcolumnCount: 1 2,\n\t\tgutter: 20px\n\t)\n);\n@include generateGrid($gridSetup5);\n```\n\nCreating a responsive grid with different columns sizes for each breakpoint: \n\n```\n$gridSetup7: (\n\ts: (\n\t\tcolumnCount: 3,\n\t\tgutter: 20px\n\t),\n\tm: (\n\t\tcolumnCount: 4,\n\t\tcolumnVariations: \"1o4\" \"3o4\",\n\t\tgutter: 10px\n\t),\n\tl: (\n\t\tcolumnCount: 2 4,\n\t\tgutter: 20px\n\t),\n\txl: (\n\t\tcolumnCount: 1 5,\n\t\tgutter: 10px\n\t)\n);\n@include generateGrid($gridSetup7);\n```\n\n\nGrid configs can become as complex as you want. \n\n\n```\n$gridSetupX: (\n\tcolumnCount: 3 4 6 12,\n\tcolumnVariations: \"2o6\" \"4o6\" \"7o12\" \"3o12\" \"2o12\",\n\tgutter: 10px,\n\ts: (\n\t\tcolumnCount: 2 3 4,\n\t\tcolumnVariations: \"1o3\" \"2o3\",\n\t\tgutter: 10px\n\t),\n\tm: (\n\t\tcolumnCount: 1 4 6,\n\t\tcolumnVariations: \"4o6\" \"2o6\" \"1o6\" \"5o6\",\n\t\tgutter: 20px\n\t),\n\tl: (\n\t\tcolumnCount: 1 3 4,\n\t\tcolumnVariations: \"1o4\" \"3o4\"\n\t),\n\txl: (\n\t\tcolumnCount: 1 9,\n\t\tcolumnVariations: \"6o12\"\n\t)\n);\n.big-grid {\n\t@include generateGrid($gridSetupX);\n}\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimorphic%2Fgrid-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdimorphic%2Fgrid-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimorphic%2Fgrid-generator/lists"}