├── .gitignore ├── .jshintrc ├── Gruntfile.js ├── LICENSE ├── README.md ├── package.json ├── tasks └── pure_grids.js └── test ├── expected ├── custom_mqs.css └── custom_units.css └── pure_grids_test.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | tmp 4 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "curly": true, 3 | "eqeqeq": true, 4 | "immed": true, 5 | "latedef": false, 6 | "newcap": true, 7 | "noarg": true, 8 | "sub": true, 9 | "undef": true, 10 | "boss": true, 11 | "eqnull": true, 12 | "node": true 13 | } 14 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | /* 2 | * grunt-pure-grids 3 | * https://github.com/yahoo/grunt-pure-grids 4 | * 5 | * Copyright 2013 Yahoo! Inc. 6 | * Licensed under the Yahoo! Inc. BSD license. 7 | */ 8 | 9 | 'use strict'; 10 | 11 | module.exports = function (grunt) { 12 | // load all npm grunt tasks 13 | require('load-grunt-tasks')(grunt); 14 | 15 | // Project configuration. 16 | grunt.initConfig({ 17 | jshint: { 18 | all: [ 19 | 'Gruntfile.js', 20 | 'tasks/*.js', 21 | '<%= nodeunit.tests %>' 22 | ], 23 | options: { 24 | jshintrc: '.jshintrc', 25 | reporter: require('jshint-stylish') 26 | } 27 | }, 28 | 29 | // Before generating any new files, remove any previously-created files. 30 | clean: { 31 | tests: ['tmp'] 32 | }, 33 | 34 | // Configuration to be run (and then tested). 35 | pure_grids: { 36 | custom_units: { 37 | dest: 'tmp/custom_units.css', 38 | options: { 39 | units: 12 40 | } 41 | }, 42 | 43 | custom_mqs: { 44 | dest: 'tmp/custom_mqs.css', 45 | options: { 46 | units: 12, 47 | mediaQueries: { 48 | sm : 'screen and (min-width: 35.5em)', // 568px 49 | med: 'screen and (min-width: 48em)', // 768px 50 | lrg: 'screen and (min-width: 58em)', // 928px 51 | xl : 'screen and (min-width: 75em)' // 1200px 52 | } 53 | } 54 | } 55 | }, 56 | 57 | // Unit tests. 58 | nodeunit: { 59 | tests: ['test/*_test.js'] 60 | } 61 | 62 | }); 63 | 64 | // Actually load this plugin's task(s). 65 | grunt.loadTasks('tasks'); 66 | 67 | // Whenever the "test" task is run, first clean the "tmp" dir, then run this 68 | // plugin's task(s), then test the result. 69 | grunt.registerTask('test', ['clean', 'pure_grids', 'nodeunit']); 70 | 71 | // By default, lint and run all tests. 72 | grunt.registerTask('default', ['jshint', 'test']); 73 | 74 | }; 75 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2014 Yahoo! Inc. 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without 5 | modification, are permitted provided that the following conditions are met: 6 | 7 | * Redistributions of source code must retain the above copyright 8 | notice, this list of conditions and the following disclaimer. 9 | 10 | * Redistributions in binary form must reproduce the above copyright 11 | notice, this list of conditions and the following disclaimer in the 12 | documentation and/or other materials provided with the distribution. 13 | 14 | * Neither the name of the Yahoo! Inc. nor the 15 | names of its contributors may be used to endorse or promote products 16 | derived from this software without specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL YAHOO! INC. BE LIABLE FOR ANY 22 | DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND 25 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # grunt-pure-grids 2 | 3 | > Generate custom grid units for [Pure Grids](http://purecss.io/grids). 4 | 5 | ## Getting Started 6 | This plugin requires Grunt. 7 | 8 | If 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: 9 | 10 | ```shell 11 | npm install grunt-pure-grids --save-dev 12 | ``` 13 | 14 | Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript: 15 | 16 | ```js 17 | grunt.loadNpmTasks('grunt-pure-grids'); 18 | ``` 19 | 20 | ## The "pure_grids" task 21 | 22 | ### Overview 23 | In your project's Gruntfile, add a section named `pure_grids` to the data object passed into `grunt.initConfig()`. 24 | 25 | ```js 26 | grunt.initConfig({ 27 | pure_grids: { 28 | responsive: { 29 | dest: 'path/to/my-responsive-grid.css', 30 | options: { 31 | units: 12, // 12-column grid 32 | mediaQueries: { 33 | sm: 'screen and (min-width: 35.5em)', // 568px 34 | md: 'screen and (min-width: 48em)', // 768px 35 | lg: 'screen and (min-width: 64em)', // 1024px 36 | xl: 'screen and (min-width: 80em)' // 1280px 37 | } 38 | } 39 | } 40 | } 41 | }); 42 | ``` 43 | 44 | ### Options 45 | 46 | #### options.units 47 | Type: `Integer` || `Array` 48 | Default value: `undefined` 49 | 50 | Determines 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). 51 | 52 | #### options.mediaQueries 53 | Type: `Object` 54 | Default value: `undefined` 55 | 56 | Used 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 `>= 48em`). 57 | 58 | #### options.includeOldIEWidths 59 | Type: `Boolean` 60 | Default value: `true` 61 | 62 | Determines whether or not each grid unit should have an accompanying `*width` value, to make it work properly in IE 6/7. 63 | 64 | #### options.includeReducedFractions 65 | Type: `Boolean` 66 | Default value: `true` 67 | 68 | Determines 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`. 69 | 70 | #### options.decimals 71 | Type: `Integer` 72 | Default value: `4` 73 | 74 | Determines the width accuracy when constructing the individual grid units. You shouldn't need more than 4 decimals, but you may want fewer. 75 | 76 | #### options.selectorPrefix 77 | Type: `String` 78 | Default value: `.pure-u-` 79 | 80 | Determines the prefix for each grid class name. 81 | 82 | 83 | 84 | ### Usage Examples 85 | 86 | #### No Media Queries 87 | In this example, we just create a regular 12-column Pure grid. 88 | 89 | ```js 90 | grunt.initConfig({ 91 | pure_grids: { 92 | twelveCols: { 93 | dest: 'path/to/my-grid.css', 94 | options: { 95 | units: 12, //12-column grid 96 | } 97 | } 98 | } 99 | }); 100 | ``` 101 | 102 | #### Responsive Grid 103 | In this example, we create a 6-column responsive grid with breakpoints at `48em` and `60em`. We also customize the prefix to just be `.col-`. 104 | 105 | ```js 106 | grunt.initConfig({ 107 | pure_grids: { 108 | responsive: { 109 | dest: 'path/to/my-responsive-grid.css', 110 | options: { 111 | units: 6, // 6-column grid, 112 | mediaQueries: { 113 | md: 'screen and (min-width: 48em)', //768px 114 | lg: 'screen and (min-width: 60em)' //960px 115 | }, 116 | selectorPrefix: '.col-' 117 | } 118 | } 119 | } 120 | }); 121 | ``` 122 | 123 | In my HTML, I can now write something like this: 124 | 125 | ```html 126 | 127 | 128 | 129 | .. 130 | 131 |
132 | 138 |
139 | ... 140 |
141 |
142 | 143 | ``` 144 | 145 | ## Contributing 146 | In 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/). 147 | 148 | ## Release History 149 | 150 | * 2.0.0: Upgrade to rework-pure-grids@2.0.0 151 | * 1.0.2: Update README examples, _again_. 152 | * 1.0.1: Update README examples. 153 | * 1.0.0: __Stable__, Added unit tests, moved to Yahoo org on GitHub. 154 | * 0.0.2: Added docs to README. (@tilomitra) 155 | * 0.0.1: Initial release on npm. 156 | 157 | ## License 158 | This software is free to use under the Yahoo! Inc. BSD license. 159 | See the [LICENSE file][] for license text and copyright information. 160 | 161 | [LICENSE file]: https://github.com/yahoo/grunt-pure-grids/blob/master/LICENSE 162 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "grunt-pure-grids", 3 | "version": "2.0.0", 4 | "description": "Generate custom units for Pure Grids.", 5 | "homepage": "https://github.com/yahoo/grunt-pure-grids", 6 | "repository": { 7 | "type": "git", 8 | "url": "git://github.com/pure-css/grunt-pure-grids.git" 9 | }, 10 | "bugs": "git://github.com/pure-css/grunt-pure-grids.git/issues", 11 | "author": { 12 | "name": "Eric Ferraiuolo", 13 | "email": "eferraiuolo@gmail.com" 14 | }, 15 | "contributors": [ 16 | "Tilo Mitra " 17 | ], 18 | "keywords": [ 19 | "gruntplugin" 20 | ], 21 | "main": "Gruntfile.js", 22 | "engines": { 23 | "node": ">= 0.8.0" 24 | }, 25 | "licenses": [ 26 | { 27 | "type": "BSD", 28 | "url": "https://github.com/pure-css/grunt-pure-grids/blob/master/LICENSE" 29 | } 30 | ], 31 | "devDependencies": { 32 | "grunt": "^0.4.5", 33 | "grunt-cli": "^1.3.2", 34 | "grunt-contrib-clean": "^0.5.0", 35 | "grunt-contrib-jshint": "^0.10.0", 36 | "grunt-contrib-nodeunit": "^0.4.1", 37 | "jshint-stylish": "^0.4.0", 38 | "load-grunt-tasks": "^0.6.0" 39 | }, 40 | "scripts": { 41 | "test": "grunt test" 42 | }, 43 | "dependencies": { 44 | "rework": "^1.0.0", 45 | "rework-pure-grids": "^2.0.1" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /tasks/pure_grids.js: -------------------------------------------------------------------------------- 1 | /* 2 | * grunt-pure-grids 3 | * https://github.com/yahoo/grunt-pure-grids 4 | * 5 | * Copyright 2014 Yahoo! Inc. 6 | * Licensed under the Yahoo! Inc. BSD license. 7 | */ 8 | 9 | 'use strict'; 10 | 11 | var rework = require('rework'), 12 | pureGrids = require('rework-pure-grids'); 13 | 14 | module.exports = function (grunt) { 15 | 16 | grunt.registerMultiTask('pure_grids', 'Generate custom units for Pure Grids', function () { 17 | var options = this.options({ 18 | indent: ' ' 19 | }); 20 | 21 | var units = options.units; 22 | delete options.units; 23 | 24 | // Iterate over all specified file groups. 25 | this.files.forEach(function (fileGroup) { 26 | var css = rework('').use(pureGrids.units(units, options)); 27 | 28 | grunt.file.write(fileGroup.dest, css.toString(options)); 29 | grunt.log.writeln('File "' + fileGroup.dest + '" created.'); 30 | }); 31 | }); 32 | 33 | }; 34 | -------------------------------------------------------------------------------- /test/expected/custom_mqs.css: -------------------------------------------------------------------------------- 1 | .pure-u-1, 2 | .pure-u-1-1, 3 | .pure-u-1-2, 4 | .pure-u-1-3, 5 | .pure-u-2-3, 6 | .pure-u-1-4, 7 | .pure-u-3-4, 8 | .pure-u-1-6, 9 | .pure-u-5-6, 10 | .pure-u-1-12, 11 | .pure-u-2-12, 12 | .pure-u-3-12, 13 | .pure-u-4-12, 14 | .pure-u-5-12, 15 | .pure-u-6-12, 16 | .pure-u-7-12, 17 | .pure-u-8-12, 18 | .pure-u-9-12, 19 | .pure-u-10-12, 20 | .pure-u-11-12, 21 | .pure-u-12-12 { 22 | display: inline-block; 23 | letter-spacing: normal; 24 | word-spacing: normal; 25 | vertical-align: top; 26 | text-rendering: auto; 27 | } 28 | 29 | .pure-u-1-12 { 30 | width: 8.3333%; 31 | } 32 | 33 | .pure-u-1-6, 34 | .pure-u-2-12 { 35 | width: 16.6667%; 36 | } 37 | 38 | .pure-u-1-4, 39 | .pure-u-3-12 { 40 | width: 25%; 41 | } 42 | 43 | .pure-u-1-3, 44 | .pure-u-4-12 { 45 | width: 33.3333%; 46 | } 47 | 48 | .pure-u-5-12 { 49 | width: 41.6667%; 50 | } 51 | 52 | .pure-u-1-2, 53 | .pure-u-6-12 { 54 | width: 50%; 55 | } 56 | 57 | .pure-u-7-12 { 58 | width: 58.3333%; 59 | } 60 | 61 | .pure-u-2-3, 62 | .pure-u-8-12 { 63 | width: 66.6667%; 64 | } 65 | 66 | .pure-u-3-4, 67 | .pure-u-9-12 { 68 | width: 75%; 69 | } 70 | 71 | .pure-u-5-6, 72 | .pure-u-10-12 { 73 | width: 83.3333%; 74 | } 75 | 76 | .pure-u-11-12 { 77 | width: 91.6667%; 78 | } 79 | 80 | .pure-u-1, 81 | .pure-u-1-1, 82 | .pure-u-12-12 { 83 | width: 100%; 84 | } 85 | 86 | @media screen and (min-width: 35.5em) { 87 | .pure-u-sm-1, 88 | .pure-u-sm-1-1, 89 | .pure-u-sm-1-2, 90 | .pure-u-sm-1-3, 91 | .pure-u-sm-2-3, 92 | .pure-u-sm-1-4, 93 | .pure-u-sm-3-4, 94 | .pure-u-sm-1-6, 95 | .pure-u-sm-5-6, 96 | .pure-u-sm-1-12, 97 | .pure-u-sm-2-12, 98 | .pure-u-sm-3-12, 99 | .pure-u-sm-4-12, 100 | .pure-u-sm-5-12, 101 | .pure-u-sm-6-12, 102 | .pure-u-sm-7-12, 103 | .pure-u-sm-8-12, 104 | .pure-u-sm-9-12, 105 | .pure-u-sm-10-12, 106 | .pure-u-sm-11-12, 107 | .pure-u-sm-12-12 { 108 | display: inline-block; 109 | letter-spacing: normal; 110 | word-spacing: normal; 111 | vertical-align: top; 112 | text-rendering: auto; 113 | } 114 | 115 | .pure-u-sm-1-12 { 116 | width: 8.3333%; 117 | } 118 | 119 | .pure-u-sm-1-6, 120 | .pure-u-sm-2-12 { 121 | width: 16.6667%; 122 | } 123 | 124 | .pure-u-sm-1-4, 125 | .pure-u-sm-3-12 { 126 | width: 25%; 127 | } 128 | 129 | .pure-u-sm-1-3, 130 | .pure-u-sm-4-12 { 131 | width: 33.3333%; 132 | } 133 | 134 | .pure-u-sm-5-12 { 135 | width: 41.6667%; 136 | } 137 | 138 | .pure-u-sm-1-2, 139 | .pure-u-sm-6-12 { 140 | width: 50%; 141 | } 142 | 143 | .pure-u-sm-7-12 { 144 | width: 58.3333%; 145 | } 146 | 147 | .pure-u-sm-2-3, 148 | .pure-u-sm-8-12 { 149 | width: 66.6667%; 150 | } 151 | 152 | .pure-u-sm-3-4, 153 | .pure-u-sm-9-12 { 154 | width: 75%; 155 | } 156 | 157 | .pure-u-sm-5-6, 158 | .pure-u-sm-10-12 { 159 | width: 83.3333%; 160 | } 161 | 162 | .pure-u-sm-11-12 { 163 | width: 91.6667%; 164 | } 165 | 166 | .pure-u-sm-1, 167 | .pure-u-sm-1-1, 168 | .pure-u-sm-12-12 { 169 | width: 100%; 170 | } 171 | } 172 | 173 | @media screen and (min-width: 48em) { 174 | .pure-u-med-1, 175 | .pure-u-med-1-1, 176 | .pure-u-med-1-2, 177 | .pure-u-med-1-3, 178 | .pure-u-med-2-3, 179 | .pure-u-med-1-4, 180 | .pure-u-med-3-4, 181 | .pure-u-med-1-6, 182 | .pure-u-med-5-6, 183 | .pure-u-med-1-12, 184 | .pure-u-med-2-12, 185 | .pure-u-med-3-12, 186 | .pure-u-med-4-12, 187 | .pure-u-med-5-12, 188 | .pure-u-med-6-12, 189 | .pure-u-med-7-12, 190 | .pure-u-med-8-12, 191 | .pure-u-med-9-12, 192 | .pure-u-med-10-12, 193 | .pure-u-med-11-12, 194 | .pure-u-med-12-12 { 195 | display: inline-block; 196 | letter-spacing: normal; 197 | word-spacing: normal; 198 | vertical-align: top; 199 | text-rendering: auto; 200 | } 201 | 202 | .pure-u-med-1-12 { 203 | width: 8.3333%; 204 | } 205 | 206 | .pure-u-med-1-6, 207 | .pure-u-med-2-12 { 208 | width: 16.6667%; 209 | } 210 | 211 | .pure-u-med-1-4, 212 | .pure-u-med-3-12 { 213 | width: 25%; 214 | } 215 | 216 | .pure-u-med-1-3, 217 | .pure-u-med-4-12 { 218 | width: 33.3333%; 219 | } 220 | 221 | .pure-u-med-5-12 { 222 | width: 41.6667%; 223 | } 224 | 225 | .pure-u-med-1-2, 226 | .pure-u-med-6-12 { 227 | width: 50%; 228 | } 229 | 230 | .pure-u-med-7-12 { 231 | width: 58.3333%; 232 | } 233 | 234 | .pure-u-med-2-3, 235 | .pure-u-med-8-12 { 236 | width: 66.6667%; 237 | } 238 | 239 | .pure-u-med-3-4, 240 | .pure-u-med-9-12 { 241 | width: 75%; 242 | } 243 | 244 | .pure-u-med-5-6, 245 | .pure-u-med-10-12 { 246 | width: 83.3333%; 247 | } 248 | 249 | .pure-u-med-11-12 { 250 | width: 91.6667%; 251 | } 252 | 253 | .pure-u-med-1, 254 | .pure-u-med-1-1, 255 | .pure-u-med-12-12 { 256 | width: 100%; 257 | } 258 | } 259 | 260 | @media screen and (min-width: 58em) { 261 | .pure-u-lrg-1, 262 | .pure-u-lrg-1-1, 263 | .pure-u-lrg-1-2, 264 | .pure-u-lrg-1-3, 265 | .pure-u-lrg-2-3, 266 | .pure-u-lrg-1-4, 267 | .pure-u-lrg-3-4, 268 | .pure-u-lrg-1-6, 269 | .pure-u-lrg-5-6, 270 | .pure-u-lrg-1-12, 271 | .pure-u-lrg-2-12, 272 | .pure-u-lrg-3-12, 273 | .pure-u-lrg-4-12, 274 | .pure-u-lrg-5-12, 275 | .pure-u-lrg-6-12, 276 | .pure-u-lrg-7-12, 277 | .pure-u-lrg-8-12, 278 | .pure-u-lrg-9-12, 279 | .pure-u-lrg-10-12, 280 | .pure-u-lrg-11-12, 281 | .pure-u-lrg-12-12 { 282 | display: inline-block; 283 | letter-spacing: normal; 284 | word-spacing: normal; 285 | vertical-align: top; 286 | text-rendering: auto; 287 | } 288 | 289 | .pure-u-lrg-1-12 { 290 | width: 8.3333%; 291 | } 292 | 293 | .pure-u-lrg-1-6, 294 | .pure-u-lrg-2-12 { 295 | width: 16.6667%; 296 | } 297 | 298 | .pure-u-lrg-1-4, 299 | .pure-u-lrg-3-12 { 300 | width: 25%; 301 | } 302 | 303 | .pure-u-lrg-1-3, 304 | .pure-u-lrg-4-12 { 305 | width: 33.3333%; 306 | } 307 | 308 | .pure-u-lrg-5-12 { 309 | width: 41.6667%; 310 | } 311 | 312 | .pure-u-lrg-1-2, 313 | .pure-u-lrg-6-12 { 314 | width: 50%; 315 | } 316 | 317 | .pure-u-lrg-7-12 { 318 | width: 58.3333%; 319 | } 320 | 321 | .pure-u-lrg-2-3, 322 | .pure-u-lrg-8-12 { 323 | width: 66.6667%; 324 | } 325 | 326 | .pure-u-lrg-3-4, 327 | .pure-u-lrg-9-12 { 328 | width: 75%; 329 | } 330 | 331 | .pure-u-lrg-5-6, 332 | .pure-u-lrg-10-12 { 333 | width: 83.3333%; 334 | } 335 | 336 | .pure-u-lrg-11-12 { 337 | width: 91.6667%; 338 | } 339 | 340 | .pure-u-lrg-1, 341 | .pure-u-lrg-1-1, 342 | .pure-u-lrg-12-12 { 343 | width: 100%; 344 | } 345 | } 346 | 347 | @media screen and (min-width: 75em) { 348 | .pure-u-xl-1, 349 | .pure-u-xl-1-1, 350 | .pure-u-xl-1-2, 351 | .pure-u-xl-1-3, 352 | .pure-u-xl-2-3, 353 | .pure-u-xl-1-4, 354 | .pure-u-xl-3-4, 355 | .pure-u-xl-1-6, 356 | .pure-u-xl-5-6, 357 | .pure-u-xl-1-12, 358 | .pure-u-xl-2-12, 359 | .pure-u-xl-3-12, 360 | .pure-u-xl-4-12, 361 | .pure-u-xl-5-12, 362 | .pure-u-xl-6-12, 363 | .pure-u-xl-7-12, 364 | .pure-u-xl-8-12, 365 | .pure-u-xl-9-12, 366 | .pure-u-xl-10-12, 367 | .pure-u-xl-11-12, 368 | .pure-u-xl-12-12 { 369 | display: inline-block; 370 | letter-spacing: normal; 371 | word-spacing: normal; 372 | vertical-align: top; 373 | text-rendering: auto; 374 | } 375 | 376 | .pure-u-xl-1-12 { 377 | width: 8.3333%; 378 | } 379 | 380 | .pure-u-xl-1-6, 381 | .pure-u-xl-2-12 { 382 | width: 16.6667%; 383 | } 384 | 385 | .pure-u-xl-1-4, 386 | .pure-u-xl-3-12 { 387 | width: 25%; 388 | } 389 | 390 | .pure-u-xl-1-3, 391 | .pure-u-xl-4-12 { 392 | width: 33.3333%; 393 | } 394 | 395 | .pure-u-xl-5-12 { 396 | width: 41.6667%; 397 | } 398 | 399 | .pure-u-xl-1-2, 400 | .pure-u-xl-6-12 { 401 | width: 50%; 402 | } 403 | 404 | .pure-u-xl-7-12 { 405 | width: 58.3333%; 406 | } 407 | 408 | .pure-u-xl-2-3, 409 | .pure-u-xl-8-12 { 410 | width: 66.6667%; 411 | } 412 | 413 | .pure-u-xl-3-4, 414 | .pure-u-xl-9-12 { 415 | width: 75%; 416 | } 417 | 418 | .pure-u-xl-5-6, 419 | .pure-u-xl-10-12 { 420 | width: 83.3333%; 421 | } 422 | 423 | .pure-u-xl-11-12 { 424 | width: 91.6667%; 425 | } 426 | 427 | .pure-u-xl-1, 428 | .pure-u-xl-1-1, 429 | .pure-u-xl-12-12 { 430 | width: 100%; 431 | } 432 | } -------------------------------------------------------------------------------- /test/expected/custom_units.css: -------------------------------------------------------------------------------- 1 | .pure-u-1, 2 | .pure-u-1-1, 3 | .pure-u-1-2, 4 | .pure-u-1-3, 5 | .pure-u-2-3, 6 | .pure-u-1-4, 7 | .pure-u-3-4, 8 | .pure-u-1-6, 9 | .pure-u-5-6, 10 | .pure-u-1-12, 11 | .pure-u-2-12, 12 | .pure-u-3-12, 13 | .pure-u-4-12, 14 | .pure-u-5-12, 15 | .pure-u-6-12, 16 | .pure-u-7-12, 17 | .pure-u-8-12, 18 | .pure-u-9-12, 19 | .pure-u-10-12, 20 | .pure-u-11-12, 21 | .pure-u-12-12 { 22 | display: inline-block; 23 | letter-spacing: normal; 24 | word-spacing: normal; 25 | vertical-align: top; 26 | text-rendering: auto; 27 | } 28 | 29 | .pure-u-1-12 { 30 | width: 8.3333%; 31 | } 32 | 33 | .pure-u-1-6, 34 | .pure-u-2-12 { 35 | width: 16.6667%; 36 | } 37 | 38 | .pure-u-1-4, 39 | .pure-u-3-12 { 40 | width: 25%; 41 | } 42 | 43 | .pure-u-1-3, 44 | .pure-u-4-12 { 45 | width: 33.3333%; 46 | } 47 | 48 | .pure-u-5-12 { 49 | width: 41.6667%; 50 | } 51 | 52 | .pure-u-1-2, 53 | .pure-u-6-12 { 54 | width: 50%; 55 | } 56 | 57 | .pure-u-7-12 { 58 | width: 58.3333%; 59 | } 60 | 61 | .pure-u-2-3, 62 | .pure-u-8-12 { 63 | width: 66.6667%; 64 | } 65 | 66 | .pure-u-3-4, 67 | .pure-u-9-12 { 68 | width: 75%; 69 | } 70 | 71 | .pure-u-5-6, 72 | .pure-u-10-12 { 73 | width: 83.3333%; 74 | } 75 | 76 | .pure-u-11-12 { 77 | width: 91.6667%; 78 | } 79 | 80 | .pure-u-1, 81 | .pure-u-1-1, 82 | .pure-u-12-12 { 83 | width: 100%; 84 | } -------------------------------------------------------------------------------- /test/pure_grids_test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var grunt = require('grunt'); 4 | 5 | /* 6 | ======== A Handy Little Nodeunit Reference ======== 7 | https://github.com/caolan/nodeunit 8 | 9 | Test methods: 10 | test.expect(numAssertions) 11 | test.done() 12 | Test assertions: 13 | test.ok(value, [message]) 14 | test.equal(actual, expected, [message]) 15 | test.notEqual(actual, expected, [message]) 16 | test.deepEqual(actual, expected, [message]) 17 | test.notDeepEqual(actual, expected, [message]) 18 | test.strictEqual(actual, expected, [message]) 19 | test.notStrictEqual(actual, expected, [message]) 20 | test.throws(block, [error], [message]) 21 | test.doesNotThrow(block, [error], [message]) 22 | test.ifError(value) 23 | */ 24 | 25 | exports.pure_grids = { 26 | setUp: function (done) { 27 | // setup here if necessary 28 | done(); 29 | }, 30 | custom_units: function (test) { 31 | test.expect(1); 32 | 33 | var actual = grunt.file.read('tmp/custom_units.css'); 34 | var expected = grunt.file.read('test/expected/custom_units.css'); 35 | test.equal(actual, expected, 'should output Pure Grids CSS for 12 units.'); 36 | 37 | test.done(); 38 | }, 39 | 40 | custom_mqs: function (test) { 41 | test.expect(1); 42 | 43 | var actual = grunt.file.read('tmp/custom_mqs.css'); 44 | var expected = grunt.file.read('test/expected/custom_mqs.css'); 45 | test.equal(actual, expected, 'should output Pure Grids CSS for 12 units with custom Media Queries.'); 46 | 47 | test.done(); 48 | } 49 | }; 50 | --------------------------------------------------------------------------------