{"id":20613427,"url":"https://github.com/pure-css/grunt-pure-grids","last_synced_at":"2025-06-12T12:01:56.287Z","repository":{"id":14140942,"uuid":"16846550","full_name":"pure-css/grunt-pure-grids","owner":"pure-css","description":"Generate custom units for Pure Grids.","archived":false,"fork":false,"pushed_at":"2020-05-02T20:59:26.000Z","size":18,"stargazers_count":12,"open_issues_count":0,"forks_count":7,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-15T07:12:23.304Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pure-css.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":"2014-02-14T19:01:47.000Z","updated_at":"2024-04-05T09:54:03.000Z","dependencies_parsed_at":"2022-08-26T18:50:38.214Z","dependency_job_id":null,"html_url":"https://github.com/pure-css/grunt-pure-grids","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pure-css%2Fgrunt-pure-grids","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pure-css%2Fgrunt-pure-grids/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pure-css%2Fgrunt-pure-grids/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pure-css%2Fgrunt-pure-grids/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pure-css","download_url":"https://codeload.github.com/pure-css/grunt-pure-grids/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249023736,"owners_count":21199961,"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-11-16T11:09:59.055Z","updated_at":"2025-04-15T07:12:28.282Z","avatar_url":"https://github.com/pure-css.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# grunt-pure-grids\n\n\u003e Generate custom grid units for [Pure Grids](http://purecss.io/grids).\n\n## Getting Started\nThis plugin requires Grunt.\n\nIf you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide, as it explains how to create a [Gruntfile](http://gruntjs.com/sample-gruntfile) as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:\n\n```shell\nnpm install grunt-pure-grids --save-dev\n```\n\nOnce the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:\n\n```js\ngrunt.loadNpmTasks('grunt-pure-grids');\n```\n\n## The \"pure_grids\" task\n\n### Overview\nIn your project's Gruntfile, add a section named `pure_grids` to the data object passed into `grunt.initConfig()`.\n\n```js\ngrunt.initConfig({\n    pure_grids: {\n        responsive: {\n            dest: 'path/to/my-responsive-grid.css',\n            options: {\n                units: 12, // 12-column grid\n                mediaQueries: {\n                    sm: 'screen and (min-width: 35.5em)', // 568px\n                    md: 'screen and (min-width: 48em)',   // 768px\n                    lg: 'screen and (min-width: 64em)',   // 1024px\n                    xl: 'screen and (min-width: 80em)'    // 1280px\n                }\n            }\n        }\n    }\n});\n```\n\n### Options\n\n#### options.units\nType: `Integer` || `Array`\nDefault value: `undefined`\n\nDetermines how many columns your grid should have. If `undefined`, it only generates the media queries for a 5ths and 24ths-column grid (same as Pure's Default Grid).\n\n#### options.mediaQueries\nType: `Object`\nDefault value: `undefined`\n\nUsed to generate responsive grids. Pass an object where the `key` denotes the grid key, and the `property` denotes the media query breakpoint (e.g., `{ FOO: 'screen and (min-width: 48em)' }` would generate `.pure-u-FOO-*` class names that become active when the viewport is `\u003e= 48em`).\n\n#### options.includeOldIEWidths\nType: `Boolean`\nDefault value: `true`\n\nDetermines whether or not each grid unit should have an accompanying `*width` value, to make it work properly in IE 6/7.\n\n#### options.includeReducedFractions\nType: `Boolean`\nDefault value: `true`\n\nDetermines whether or not the output should only include the reduced fractions. Setting this to `true` means that all grid classnames would be provided in their regular **and** reduced fractional form reduced form (ex: `.pure-u-md-2-4` and `.pure-u-md-1-2` will be outputted). Setting this to `false` will only output class names in their regular form where the denominator is always equal to the value provided at `options.units`.\n\n#### options.decimals\nType: `Integer`\nDefault value: `4`\n\nDetermines the width accuracy when constructing the individual grid units. You shouldn't need more than 4 decimals, but you may want fewer.\n\n#### options.selectorPrefix\nType: `String`\nDefault value: `.pure-u-`\n\nDetermines the prefix for each grid class name.\n\n\n\n### Usage Examples\n\n#### No Media Queries\nIn this example, we just create a regular 12-column Pure grid.\n\n```js\ngrunt.initConfig({\n    pure_grids: {\n        twelveCols: {\n            dest: 'path/to/my-grid.css',\n            options: {\n                units: 12, //12-column grid\n            }\n        }\n    }\n});\n```\n\n#### Responsive Grid\nIn this example, we create a 6-column responsive grid with breakpoints at `48em` and `60em`. We also customize the prefix to just be `.col-`.\n\n```js\ngrunt.initConfig({\n    pure_grids: {\n        responsive: {\n            dest: 'path/to/my-responsive-grid.css',\n            options: {\n                units: 6, // 6-column grid,\n                mediaQueries: {\n                    md: 'screen and (min-width: 48em)', //768px\n                    lg: 'screen and (min-width: 60em)'  //960px\n                },\n                selectorPrefix: '.col-'\n            }\n        }\n    }\n});\n```\n\nIn my HTML, I can now write something like this:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"http://yui.yahooapis.com/pure/0.4.2/pure-min.css\"\u003e\n\u003clink rel=\"stylesheet\" href=\"path/to/my-responsive-grid.css\"\u003e\n\n..\n\n\u003cdiv class=\"pure-g\"\u003e\n    \u003c!--\n        an element which is:\n        width: 100% \u003c 48em,\n        width: 50% \u003e= 48em,\n    and width: 25% \u003e= 60em\n    --\u003e\n    \u003cdiv class=\"col-1 col-md-1-2 col-lg-1-4\"\u003e\n        ...\n    \u003c/div\u003e\n\u003c/div\u003e\n\n```\n\n## Contributing\nIn lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using [Grunt](http://gruntjs.com/).\n\n## Release History\n\n* 2.0.0: Upgrade to rework-pure-grids@2.0.0\n* 1.0.2: Update README examples, _again_.\n* 1.0.1: Update README examples.\n* 1.0.0: __Stable__, Added unit tests, moved to Yahoo org on GitHub.\n* 0.0.2: Added docs to README. (@tilomitra)\n* 0.0.1: Initial release on npm.\n\n## License\nThis software is free to use under the Yahoo! Inc. BSD license.\nSee the [LICENSE file][] for license text and copyright information.\n\n[LICENSE file]: https://github.com/yahoo/grunt-pure-grids/blob/master/LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpure-css%2Fgrunt-pure-grids","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpure-css%2Fgrunt-pure-grids","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpure-css%2Fgrunt-pure-grids/lists"}