{"id":23893352,"url":"https://github.com/sumpygump/css-grid-generator","last_synced_at":"2025-04-10T12:52:02.232Z","repository":{"id":6904121,"uuid":"8154252","full_name":"sumpygump/css-grid-generator","owner":"sumpygump","description":"Simple PHP CLI script to generate CSS for a grid based system","archived":false,"fork":false,"pushed_at":"2014-10-20T19:18:54.000Z","size":312,"stargazers_count":14,"open_issues_count":0,"forks_count":5,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-24T11:38:27.398Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"PHP","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/sumpygump.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":"2013-02-12T06:47:26.000Z","updated_at":"2021-07-31T02:41:14.000Z","dependencies_parsed_at":"2022-09-03T21:24:28.713Z","dependency_job_id":null,"html_url":"https://github.com/sumpygump/css-grid-generator","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sumpygump%2Fcss-grid-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sumpygump%2Fcss-grid-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sumpygump%2Fcss-grid-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sumpygump%2Fcss-grid-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sumpygump","download_url":"https://codeload.github.com/sumpygump/css-grid-generator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248220335,"owners_count":21067287,"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":"2025-01-04T14:17:52.123Z","updated_at":"2025-04-10T12:52:02.209Z","avatar_url":"https://github.com/sumpygump.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"css-grid-generator\n==================\n\nSimple PHP script to generate CSS for a grid\n\n## Installation\n\nThis will clone the repository into your bin directory and add a symbolic link\nto the `cssgrid` script.\n\n    $ cd ~/bin/\n    $ git clone git://github.com/sumpygump/css-grid-generator.git\n    $ ln -s css-grid-generator/cssgrid cssgrid\n\n## Requirements\n\n- PHP 5.3+\n\n## Usage\n\n    cssgrid --cols=12 --col-width=67 --gutter=16 --units=percent \u003e grid.css\n\nThis will generate the CSS rules for a grid and put them in a file `grid.css`.\n\n### Parameters\n\n    --cols : number of columns\n    --col-width : width in pixels of columns\n    --gutter : width in pixels of gutter space between columns\n    --units : output units (pixels or percent)\n\n## Example Output\n\n```css\n/* ---------------------------------------------------------------------\n Grid\n\n Generated with cssgrid v0.8.1 at 2013-02-12 21:30:54 CST\n https://github.com/sumpygump/css-grid-generator\n cssgrid --units=percent --cols=12 --col-width=67 --gutter=16 --max-width=980\n\n ============================================\n Formulas used for calculation of grid values\n ============================================\n gutter      = (gutter / max-width) * 100\n col-width   = (((col-width * col-index) + (gutter * (col-index - 1)) / max-width) * 100\n col-push    = (((col-width * col-index) + (gutter * col-index)) / max-width) * 100\n col-pull    = (((col-width * col-index) + (gutter * col-index)) / max-width) * 100 * -1\n col-prefix  = (((col-width * col-index) + (gutter * col-index)) / max-width) * 100\n col-suffix  = (((col-width * col-index) + (gutter * col-index)) / max-width) * 100 * -1\n------------------------------------------------------------------------ */\n.grid:after {\n    content: \" \";\n    display: block;\n    height: 0;\n    clear: both;\n    visibility: hidden;\n}\n\n.grid-col {\n    position: relative;\n    float: left;\n}\n\n.grid-col + .grid-col {\n    margin-left: 1.6326530612245%;\n}\n\n.grid-col_1of12 { width: 6.8367346938776%; }\n.grid-col_2of12 { width: 15.30612244898%; }\n.grid-col_3of12 { width: 23.775510204082%; }\n.grid-col_4of12 { width: 32.244897959184%; }\n.grid-col_5of12 { width: 40.714285714286%; }\n.grid-col_6of12 { width: 49.183673469388%; }\n.grid-col_7of12 { width: 57.65306122449%; }\n.grid-col_8of12 { width: 66.122448979592%; }\n.grid-col_9of12 { width: 74.591836734694%; }\n.grid-col_10of12 { width: 83.061224489796%; }\n.grid-col_11of12 { width: 91.530612244898%; }\n.grid-col_12of12 { width: 100%; }\n\n.mix-grid-col_push1of12 { left: 8.469387755102%; }\n.mix-grid-col_push2of12 { left: 16.938775510204%; }\n.mix-grid-col_push3of12 { left: 25.408163265306%; }\n.mix-grid-col_push4of12 { left: 33.877551020408%; }\n.mix-grid-col_push5of12 { left: 42.34693877551%; }\n.mix-grid-col_push6of12 { left: 50.816326530612%; }\n.mix-grid-col_push7of12 { left: 59.285714285714%; }\n.mix-grid-col_push8of12 { left: 67.755102040816%; }\n.mix-grid-col_push9of12 { left: 76.224489795918%; }\n.mix-grid-col_push10of12 { left: 84.69387755102%; }\n.mix-grid-col_push11of12 { left: 93.163265306122%; }\n.mix-grid-col_push12of12 { left: 100%; }\n\n.mix-grid-col_pull1of12 { left: -8.469387755102%; }\n.mix-grid-col_pull2of12 { left: -16.938775510204%; }\n.mix-grid-col_pull3of12 { left: -25.408163265306%; }\n.mix-grid-col_pull4of12 { left: -33.877551020408%; }\n.mix-grid-col_pull5of12 { left: -42.34693877551%; }\n.mix-grid-col_pull6of12 { left: -50.816326530612%; }\n.mix-grid-col_pull7of12 { left: -59.285714285714%; }\n.mix-grid-col_pull8of12 { left: -67.755102040816%; }\n.mix-grid-col_pull9of12 { left: -76.224489795918%; }\n.mix-grid-col_pull10of12 { left: -84.69387755102%; }\n.mix-grid-col_pull11of12 { left: -93.163265306122%; }\n.mix-grid-col_pull12of12 { left: -100%; }\n\n.mix-grid-col_prefix1of12 { margin-left: 8.469387755102%; }\n.mix-grid-col_prefix2of12 { margin-left: 16.938775510204%; }\n.mix-grid-col_prefix3of12 { margin-left: 25.408163265306%; }\n.mix-grid-col_prefix4of12 { margin-left: 33.877551020408%; }\n.mix-grid-col_prefix5of12 { margin-left: 42.34693877551%; }\n.mix-grid-col_prefix6of12 { margin-left: 50.816326530612%; }\n.mix-grid-col_prefix7of12 { margin-left: 59.285714285714%; }\n.mix-grid-col_prefix8of12 { margin-left: 67.755102040816%; }\n.mix-grid-col_prefix9of12 { margin-left: 76.224489795918%; }\n.mix-grid-col_prefix10of12 { margin-left: 84.69387755102%; }\n.mix-grid-col_prefix11of12 { margin-left: 93.163265306122%; }\n.mix-grid-col_prefix12of12 { margin-left: 100%; }\n\n.mix-grid-col_suffix1of12 { margin-right: 8.469387755102%; }\n.mix-grid-col_suffix2of12 { margin-right: 16.938775510204%; }\n.mix-grid-col_suffix3of12 { margin-right: 25.408163265306%; }\n.mix-grid-col_suffix4of12 { margin-right: 33.877551020408%; }\n.mix-grid-col_suffix5of12 { margin-right: 42.34693877551%; }\n.mix-grid-col_suffix6of12 { margin-right: 50.816326530612%; }\n.mix-grid-col_suffix7of12 { margin-right: 59.285714285714%; }\n.mix-grid-col_suffix8of12 { margin-right: 67.755102040816%; }\n.mix-grid-col_suffix9of12 { margin-right: 76.224489795918%; }\n.mix-grid-col_suffix10of12 { margin-right: 84.69387755102%; }\n.mix-grid-col_suffix11of12 { margin-right: 93.163265306122%; }\n.mix-grid-col_suffix12of12 { margin-right: 100%; }\n```\n\n## How to Use in HTML\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n        \u003c!-- META DATA --\u003e\n        \u003cmeta charset=\"utf-8\" /\u003e\n        \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n        \u003cmeta name=\"MSSmartTagsPreventParsing\" content=\"true\" /\u003e\n        \u003cmeta http-equiv=\"imagetoolbar\" content=\"no\" /\u003e\n        \u003c!--[if IE]\u003e\u003cmeta http-equiv=\"cleartype\" content=\"on\" /\u003e\u003c![endif]--\u003e\n\n        \u003c!-- SEO --\u003e\n        \u003ctitle\u003eDemo Grid\u003c/title\u003e\n        \u003cmeta name=\"description\" content=\"\" /\u003e\n        \u003cmeta name=\"author\" content=\"\" /\u003e\n\n        \u003c!-- STYLESHEETS --\u003e\n        \u003clink rel=\"stylesheet\" media=\"screen, projection\" href=\"grid.css\" /\u003e\n        \u003cstyle\u003e\n            body { background-color: #eeeeec; }\n            .wrapper { width: 980px; margin: 0 auto; }\n            .box {\n                height: 100px;\n                padding-top: 20px;\n                margin-bottom:16px;\n                background-color: #e9b96e;\n                color: #ce5c00;\n                border: 2px solid #204a87;\n                text-align: center;\n            }\n        \u003c/style\u003e\n    \u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv class=\"wrapper\"\u003e\n        \u003cdiv class=\"grid\"\u003e\n            \u003cdiv class=\"grid-col grid-col_8of12\"\u003e\n                \u003cdiv class=\"box\"\u003eCOL 1 (8of12)\u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"grid-col grid-col_2of12\"\u003e\n                \u003cdiv class=\"box\"\u003eCOL 2 (2of12)\u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"grid-col grid-col_2of12\"\u003e\n                \u003cdiv class=\"box\"\u003eCOL 3 (2of12)\u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"grid\"\u003e\n            \u003cdiv class=\"grid-col grid-col_8of12\"\u003e\n                \u003cdiv class=\"box\"\u003eCOL 1 (8of12)\u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"grid-col grid-col_2of12 mix-grid-col_push2of12\"\u003e\n                \u003cdiv class=\"box\"\u003eCOL 2\u003cbr /\u003epush --\u0026gt;\u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"grid-col grid-col_2of12 mix-grid-col_pull2of12\"\u003e\n                \u003cdiv class=\"box\"\u003eCOL 3\u003cbr /\u003e\u0026lt;-- pull\u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"grid\"\u003e\n            \u003cdiv class=\"grid-col grid-col_2of12 mix-grid-col_prefix6of12\"\u003e\n                \u003cdiv class=\"box\"\u003eCOL 1 (2of12)\u003cbr /\u003e|-- prefix6of12\u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"grid-col grid-col_2of12\"\u003e\n                \u003cdiv class=\"box\"\u003eCOL 2 (2of12)\u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"grid-col grid-col_2of12\"\u003e\n                \u003cdiv class=\"box\"\u003eCOL 3 (2of12)\u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"grid\"\u003e\n            \u003cdiv class=\"grid-col grid-col_2of12\"\u003e\n                \u003cdiv class=\"box\"\u003eCOL 1 (2of12)\u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"grid-col grid-col_2of12\"\u003e\n                \u003cdiv class=\"box\"\u003eCOL 2 (2of12)\u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"grid-col grid-col_2of12 mix-grid-col_suffix6of12\"\u003e\n                \u003cdiv class=\"box\"\u003eCOL 3\u003cbr /\u003esuffix6of12 --|\u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsumpygump%2Fcss-grid-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsumpygump%2Fcss-grid-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsumpygump%2Fcss-grid-generator/lists"}