├── README.md ├── index.js ├── lib ├── column-flush.js ├── column-selector.js ├── columns.js ├── container.js ├── custom-media.js ├── custom-properties.js ├── defaults.js ├── offsets.js └── row.js ├── package.json └── test ├── options └── index.js ├── test.js └── visual ├── bootstrap-stats.json ├── bootstrap.css ├── bootstrap.html ├── build.js ├── css3-stats.json ├── css3.css ├── css3.html ├── defaults-stats.json ├── defaults.css ├── defaults.html ├── etsy-stats.json ├── etsy.css ├── etsy.html ├── index-template.html ├── index.html ├── minimal-stats.json ├── minimal.css ├── minimal.html ├── suitcss-stats.json ├── suitcss.css ├── suitcss.html └── template.html /README.md: -------------------------------------------------------------------------------- 1 | # autogrid 2 | 3 | Automatic CSS grid generator 4 | 5 | ```bash 6 | npm install autogrid 7 | ``` 8 | 9 | ```js 10 | var fs = require('fs'); 11 | var autogrid = require('autogrid'); 12 | var css = autogrid({ 13 | columns: 16, 14 | gutter: '20px', 15 | container: '960px' 16 | }); 17 | fs.writeFileSync('grid.css', css); 18 | ``` 19 | 20 | 21 | ## Options 22 | 23 | ### `columns` 24 | default: 12 25 | Number of columns used to generate the grid. 26 | 27 | ### `gutter` 28 | default: 32px 29 | Gutter width for columns. 30 | 31 | ### `container` 32 | default: 1024px 33 | Max width for the container style. 34 | 35 | ### `containerPadding` 36 | default: false 37 | Adds left and right padding to the container style. 38 | 39 | ### `row` 40 | default: true 41 | Creates a row style for containing columns. 42 | 43 | ### `customMedia` 44 | default: true 45 | Create CSS custom media declarations and uses them in @media rules. The result can be compiled to CSS3 with Cssnext, Postcss, or Rework. 46 | 47 | ### `customProperties` 48 | default: true 49 | Creates CSS custom properties (variables) and uses them as values. The result can be compiled to CSS3 with Cssnext, Postcss, or Rework. 50 | 51 | ### `breakpoints` 52 | default: 53 | ```js 54 | [ 55 | {}, 56 | { name: 'sm', value: '(min-width: 40em)' }, 57 | { name: 'md', value: '(min-width: 52em)' }, 58 | { name: 'lg', value: '(min-width: 64em)' } 59 | ], 60 | ``` 61 | 62 | ### `method` 63 | default: float 64 | Determines the method (float, inline-block, or flexbox) to used for generating the grid. (Currently not implemented) 65 | 66 | ### `noCollapse` 67 | default: true 68 | Sets min-height 1px to prevent empty columns from collapsing. 69 | 70 | ### `mixedColumns` 71 | default: false 72 | Mixes float and gutter declarations into every column style. 73 | If set to `false`, each breakpoint with generate a column float class that can be used without setting width, and each column width class can be used independently of the grid system. 74 | 75 | ```css 76 | /* Mixed */ 77 | .col-1 { 78 | float: left; 79 | box-sizing: border-box; 80 | padding-left: 32px; 81 | padding-right: 32px; 82 | min-height: 1px 83 | width: 8.333333333333332% 84 | } 85 | 86 | /* Not Mixed */ 87 | .col { 88 | float: left; 89 | box-sizing: border-box; 90 | padding-left: 32px; 91 | padding-right: 32px; 92 | min-height: 1px 93 | } 94 | .col-1 { 95 | width: 8.333333333333332% 96 | } 97 | ``` 98 | 99 | ### `offset` 100 | default: false 101 | Creates column offset (margin-left) utilities. 102 | 103 | ### `prefix` 104 | default '' 105 | Prefixes each class, custom property, and custom media name with a given string. 106 | 107 | ### `containerName` 108 | default: container 109 | Class name for container style. 110 | 111 | ### `rowName` 112 | default: row 113 | Class name for row style. 114 | 115 | ### `columnName` 116 | default: BB-col-NN-MM 117 | Class name for columns and column modifiers, where BB is breakpoint.name, NN is column width number, and MM is modifier. 118 | 119 | ```js 120 | // Example 121 | options.columnName: 'col-BB-MM-NN' 122 | // Results in Bootstrap style naming convention 123 | // e.g. .col-sm-6, .col-sm-offset-3 124 | ``` 125 | 126 | --- 127 | 128 | MIT License 129 | 130 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 2 | var _ = require('lodash'); 3 | var postcss = require('postcss'); 4 | 5 | var defaults = require('./lib/defaults'); 6 | var createContainer = require('./lib/container'); 7 | var createRow = require('./lib/row'); 8 | var createColumns = require('./lib/columns'); 9 | var createCustomProperties = require('./lib/custom-properties'); 10 | var createCustomMedia = require('./lib/custom-media'); 11 | var createOffsets = require('./lib/offsets'); 12 | var createColumnFlush = require('./lib/column-flush'); 13 | 14 | 15 | module.exports = function(options) { 16 | 17 | var options = _.clone(options) || {}; 18 | options = _.defaults(options, defaults); 19 | 20 | var root = postcss.root({ after: '\n' }); 21 | 22 | root.nodes.push(postcss.parse(options.header)); 23 | root.append(createContainer(options)); 24 | root.append(createRow(options)); 25 | root.append(createColumns(options)); 26 | root.append(createOffsets(options)); 27 | root.append(createColumnFlush(options)); 28 | root.append(createCustomMedia(options)); 29 | root.append(createCustomProperties(options)); 30 | 31 | return root.toResult().css; 32 | 33 | }; 34 | 35 | -------------------------------------------------------------------------------- /lib/column-flush.js: -------------------------------------------------------------------------------- 1 | 2 | var postcss = require('postcss'); 3 | var columnSelector = require('./column-selector'); 4 | 5 | module.exports = function(options) { 6 | 7 | var rules = []; 8 | 9 | if (!options.columnFlush) { 10 | return rules; 11 | } 12 | 13 | options.breakpoints.forEach(function(breakpoint) { 14 | var flushRule; 15 | var flushName = (typeof options.columnFlush === 'string') ? options.columnFlush : 'flush'; 16 | 17 | var selector = columnSelector(options, breakpoint.name, false, flushName); 18 | 19 | flushRule = postcss.rule({ 20 | selector: selector, 21 | }) 22 | .append(postcss.decl({ 23 | prop: 'padding-left', 24 | value: 0 25 | })) 26 | .append(postcss.decl({ 27 | prop: 'padding-right', 28 | value: 0 29 | })); 30 | 31 | 32 | if (!breakpoint.value) { 33 | rules.push(flushRule); 34 | } else { 35 | rules.push( 36 | postcss.atRule({ 37 | name: 'media', 38 | params: options.customMedia ? '(--' + options.prefix + 'breakpoint-' + breakpoint.name +')' : breakpoint.value 39 | }) 40 | .append(flushRule) 41 | ); 42 | } 43 | 44 | }); 45 | 46 | return rules; 47 | 48 | }; 49 | 50 | -------------------------------------------------------------------------------- /lib/column-selector.js: -------------------------------------------------------------------------------- 1 | // generate column class name 2 | 3 | module.exports = function(options, breakpoint, number, modifier) { 4 | 5 | var REMOVE_BB_REGEX = /[\-\_]+BB|BB[\-\_]+|BB/; 6 | var REMOVE_NN_REGEX = /[\-\_]+NN|NN[\-\_]+|NN/; 7 | var REMOVE_MM_REGEX = /[\-\_]+MM|MM[\-\_]+|MM/; 8 | 9 | var BB_REGEX = /BB/; 10 | var NN_REGEX = /NN/; 11 | var MM_REGEX = /MM/; 12 | 13 | var prefix = options.prefix; 14 | var selector = options.columnName; 15 | 16 | if (breakpoint) { 17 | selector = selector.replace(BB_REGEX, breakpoint); 18 | } else { 19 | selector = selector.replace(REMOVE_BB_REGEX, ''); 20 | } 21 | 22 | if (number) { 23 | selector = selector.replace(NN_REGEX, number); 24 | } else { 25 | selector = selector.replace(REMOVE_NN_REGEX, ''); 26 | } 27 | 28 | if (modifier) { 29 | selector = selector.replace(MM_REGEX, modifier); 30 | } else { 31 | selector = selector.replace(REMOVE_MM_REGEX, ''); 32 | } 33 | 34 | 35 | return '.' + selector; 36 | 37 | }; 38 | 39 | -------------------------------------------------------------------------------- /lib/columns.js: -------------------------------------------------------------------------------- 1 | 2 | var postcss = require('postcss'); 3 | var columnSelector = require('./column-selector'); 4 | 5 | module.exports = function(options) { 6 | 7 | var rules = []; 8 | var breakpoints = options.breakpoints; 9 | 10 | function floatDeclaration() { 11 | return postcss.decl({ 12 | prop: 'float', 13 | value: 'left' 14 | }); 15 | } 16 | 17 | // Based on suitcss grid 18 | function inlineBlockDeclarations() { 19 | var declarations = []; 20 | declarations.push( 21 | postcss.decl({ prop: 'display', value: 'inline-block' }) 22 | ); 23 | declarations.push( 24 | postcss.decl({ prop: 'font-size', value: options.fontSize }) 25 | ); 26 | declarations.push( 27 | postcss.decl({ prop: 'margin', value: '0' }) 28 | ); 29 | declarations.push( 30 | postcss.decl({ prop: 'padding', value: '0' }) 31 | ); 32 | declarations.push( 33 | postcss.decl({ prop: 'text-align', value: 'left' }) 34 | ); 35 | declarations.push( 36 | postcss.decl({ prop: 'vertical-align', value: 'top' }) 37 | ); 38 | declarations.push( 39 | postcss.decl({ prop: 'width', value: '100%' }) 40 | ); 41 | return declarations; 42 | } 43 | 44 | var columnDeclarations; 45 | if (options.method === 'inline-block') { 46 | columnDeclarations = inlineBlockDeclarations(); 47 | } else { 48 | columnDeclarations = floatDeclaration(); 49 | } 50 | 51 | if (options.mixedColumns) { 52 | var allSelectors = []; 53 | breakpoints.forEach(function(breakpoint) { 54 | allSelectors = allSelectors.concat(combineSelectors(breakpoint)); 55 | }); 56 | 57 | var rule = postcss.rule({ 58 | selectors: allSelectors 59 | }) 60 | .append(postcss.decl({ 61 | prop: 'box-sizing', 62 | value: 'border-box', 63 | })) 64 | .append(postcss.decl({ 65 | prop: 'padding-left', 66 | value: options.customProperties ? 'var(--' + options.prefix + 'gutter-width)' : options.gutter, 67 | })) 68 | .append(postcss.decl({ 69 | prop: 'padding-right', 70 | value: options.customProperties ? 'var(--' + options.prefix + 'gutter-width)' : options.gutter, 71 | })); 72 | if (options.noCollapse) { 73 | rule.append(postcss.decl({ 74 | prop: 'min-height', 75 | value: '1px' 76 | })); 77 | } 78 | rules.push(rule); 79 | 80 | breakpoints.forEach(function(breakpoint) { 81 | var selectors = combineSelectors(breakpoint); 82 | if (!breakpoint.value) { 83 | rules.push(postcss.rule({ 84 | selectors: selectors 85 | }) 86 | .append( 87 | columnDeclarations 88 | //postcss.decl({ prop: 'float', value: 'left' }) 89 | ) 90 | ); 91 | } else { 92 | rules.push(postcss.atRule({ 93 | name: 'media', 94 | params: options.customMedia ? '(--' + options.prefix + 'breakpoint-' + breakpoint.name + ')' : breakpoint.value, 95 | }) 96 | .append(postcss.rule({ 97 | selectors: selectors 98 | }) 99 | .append(postcss.decl({ 100 | prop: 'float', 101 | value: 'left' 102 | })) 103 | ) 104 | ); 105 | } 106 | }); 107 | } else { 108 | // Create basic column float styles 109 | breakpoints.forEach(function(breakpoint) { 110 | var colRule; 111 | var selector = columnSelector(options, breakpoint.name, false, false); 112 | colRule = postcss.rule({ 113 | selector: selector 114 | }) 115 | .append( 116 | columnDeclarations 117 | ) 118 | .append(postcss.decl({ 119 | prop: 'box-sizing', 120 | value: 'border-box', 121 | })) 122 | .append(postcss.decl({ 123 | prop: 'padding-left', 124 | value: options.customProperties ? 'var(--' + options.prefix + 'gutter-width)' : options.gutter, 125 | })) 126 | .append(postcss.decl({ 127 | prop: 'padding-right', 128 | value: options.customProperties ? 'var(--' + options.prefix + 'gutter-width)' : options.gutter, 129 | })); 130 | if (options.noCollapse) { 131 | colRule.append(postcss.decl({ 132 | prop: 'min-height', 133 | value: '1px' 134 | })); 135 | } 136 | if (!breakpoint.value) { 137 | rules.push(colRule); 138 | } else { 139 | rules.push( 140 | postcss.atRule({ 141 | name: 'media', 142 | params: options.customMedia ? '(--' + options.prefix + 'breakpoint-' + breakpoint.name + ')' : breakpoint.value, 143 | }) 144 | .append(colRule) 145 | ); 146 | } 147 | }); 148 | } 149 | 150 | breakpoints.forEach(function(breakpoint) { 151 | createWidthRules(breakpoint); 152 | }); 153 | 154 | function createWidthRules(breakpoint) { 155 | var widthRules = []; 156 | for (var i = 0; i < options.columns; i++) { 157 | var selector = columnSelector(options, breakpoint.name, i+1, false); 158 | widthRules.push( 159 | postcss.rule({ 160 | selector: selector, 161 | after: ' ', 162 | }) 163 | .append(postcss.decl({ 164 | before: ' ', 165 | prop: 'width', 166 | value: ((i+1) / options.columns * 100) + '%' 167 | })) 168 | ); 169 | } 170 | if (!breakpoint.value) { 171 | rules = rules.concat(widthRules); 172 | } else { 173 | rules.push( 174 | postcss.atRule({ 175 | name: 'media', 176 | params: options.customMedia ? '(--' + options.prefix + 'breakpoint-' + breakpoint.name + ')' : breakpoint.value, 177 | }) 178 | .append(widthRules) 179 | ); 180 | } 181 | } 182 | 183 | function combineSelectors(breakpoint) { 184 | var selectors = []; 185 | for (var i = 0; i < options.columns; i++) { 186 | var selector = columnSelector(options, breakpoint.name, i+1, false); 187 | selectors.push(selector); 188 | } 189 | return selectors; 190 | } 191 | 192 | return rules; 193 | 194 | }; 195 | 196 | -------------------------------------------------------------------------------- /lib/container.js: -------------------------------------------------------------------------------- 1 | 2 | var postcss = require('postcss'); 3 | 4 | module.exports = function(options) { 5 | 6 | if (!options.container) { 7 | return []; 8 | }; 9 | 10 | var rule = postcss.rule({ 11 | selector: '.' + options.prefix + options.containerName, 12 | before: '\n' 13 | }).append(postcss.decl({ 14 | prop: 'max-width', 15 | value: options.customProperties ? 'var(--' + options.prefix + 'container-width)' : options.container, 16 | before: '\n ' 17 | })).append(postcss.decl({ 18 | prop: 'margin-left', 19 | value: 'auto', 20 | before: '\n ' 21 | })).append(postcss.decl({ 22 | prop: 'margin-right', 23 | value: 'auto', 24 | before: '\n ' 25 | })); 26 | 27 | if (options.containerPadding) { 28 | var padding = (typeof options.containerPadding === 'string') ? options.containerPadding : options.gutter; 29 | rule.append(postcss.decl({ 30 | prop: 'padding-left', 31 | value: padding 32 | })) 33 | .append(postcss.decl({ 34 | prop: 'padding-right', 35 | value: padding 36 | })); 37 | } 38 | 39 | return rule; 40 | 41 | }; 42 | 43 | -------------------------------------------------------------------------------- /lib/custom-media.js: -------------------------------------------------------------------------------- 1 | 2 | var postcss = require('postcss'); 3 | 4 | module.exports = function(options) { 5 | 6 | if (options.customMedia) { 7 | 8 | var atRules = options.breakpoints.map(function(breakpoint) { 9 | if (!breakpoint.name || !breakpoint.value) { 10 | return postcss.parse(''); 11 | } 12 | return postcss.atRule({ 13 | name: 'custom-media', 14 | params: [ 15 | '--' + options.prefix + 'breakpoint-' + 16 | breakpoint.name + ' ' + 17 | breakpoint.value 18 | ] 19 | }) 20 | }); 21 | 22 | return atRules; 23 | 24 | } else { 25 | return []; 26 | } 27 | 28 | }; 29 | 30 | -------------------------------------------------------------------------------- /lib/custom-properties.js: -------------------------------------------------------------------------------- 1 | 2 | var postcss = require('postcss'); 3 | 4 | module.exports = function(options) { 5 | 6 | if (options.customProperties) { 7 | 8 | var rule = postcss.rule({ 9 | selector: ':root', 10 | before: '\n', 11 | after: '\n' 12 | }) 13 | .append(postcss.decl({ 14 | prop: '--' + options.prefix + 'container-width', 15 | value: options.container, 16 | before: '\n ' 17 | })) 18 | .append(postcss.decl({ 19 | prop: '--' + options.prefix + 'gutter-width', 20 | value: options.gutter, 21 | before: '\n ' 22 | })); 23 | 24 | return rule; 25 | 26 | } else { 27 | return []; 28 | } 29 | 30 | }; 31 | 32 | -------------------------------------------------------------------------------- /lib/defaults.js: -------------------------------------------------------------------------------- 1 | 2 | var pkg = require('../package.json'); 3 | 4 | module.exports = { 5 | columns: 12, 6 | gutter: '32px', // Add support for false 7 | container: '1024px', // or false 8 | containerPadding: false, // or true or string 9 | row: true, 10 | customMedia: true, 11 | customProperties: true, 12 | breakpoints: [ // Add support for false 13 | {}, 14 | { name: 'sm', value: '(min-width: 40em)' }, 15 | { name: 'md', value: '(min-width: 52em)' }, 16 | { name: 'lg', value: '(min-width: 64em)' } 17 | ], 18 | method: 'float', // Add support for inline-block and flex 19 | fontSize: '1rem', // Used for inline-block method 20 | noCollapse: true, 21 | mixedColumns: false, 22 | offset: false, // or true or string (for offset name) 23 | columnFlush: false, // Modifier to remove gutter per column 24 | // right: false, 25 | // center: false, 26 | // push: false, 27 | // pull: false, 28 | prefix: '', 29 | containerName: 'container', 30 | rowName: 'row', 31 | columnName: 'BB-col-NN-MM', 32 | header: '/*\n\n autogrid\n v' + pkg.version + '\n\n*/\n\n', 33 | 34 | // Macros support (e.g. bootstrap, suitcss, inuitcss, foundation, etc) 35 | }; 36 | -------------------------------------------------------------------------------- /lib/offsets.js: -------------------------------------------------------------------------------- 1 | 2 | var postcss = require('postcss'); 3 | var columnSelector = require('./column-selector'); 4 | 5 | module.exports = function(options) { 6 | 7 | var rules = []; 8 | 9 | if (!options.offset) { 10 | return rules; 11 | } 12 | 13 | options.breakpoints.forEach(function(breakpoint) { 14 | var offsetRules = []; 15 | var offsetName = (typeof options.offset === 'string') ? options.offset : 'offset'; 16 | for (var i = 0; i < options.columns - 1; i++) { 17 | var selector = columnSelector(options, breakpoint.name, i+1, offsetName); 18 | offsetRules.push( 19 | postcss.rule({ 20 | selector: selector 21 | }) 22 | .append(postcss.decl({ 23 | prop: 'margin-left', 24 | value: ((i+1) / 12 * 100) + '%' 25 | })) 26 | ); 27 | } 28 | if (!breakpoint.value) { 29 | rules = rules.concat(offsetRules); 30 | } else { 31 | rules.push( 32 | postcss.atRule({ 33 | name: 'media', 34 | params: options.customMedia ? '(--' + options.prefix + 'breakpoint-' + breakpoint.name +')' : breakpoint.value 35 | }) 36 | .append(offsetRules) 37 | ) 38 | } 39 | }); 40 | 41 | return rules; 42 | 43 | }; 44 | 45 | -------------------------------------------------------------------------------- /lib/row.js: -------------------------------------------------------------------------------- 1 | 2 | var postcss = require('postcss'); 3 | 4 | module.exports = function(options) { 5 | 6 | var rules = []; 7 | 8 | if (!options.row) { 9 | return rules; 10 | } 11 | 12 | var selector = '.' + options.prefix + options.rowName; 13 | 14 | rules.push( 15 | postcss.rule({ 16 | selector: selector, 17 | before: '\n' 18 | }) 19 | .append(postcss.decl({ 20 | prop: 'margin-left', 21 | value: options.customProperties ? '-var(--' + options.prefix + 'gutter-width)' : '-' + options.gutter, 22 | before: '\n ' 23 | })) 24 | .append(postcss.decl({ 25 | prop: 'margin-right', 26 | value: options.customProperties ? '-var(--' + options.prefix + 'gutter-width)' : '-' + options.gutter, 27 | before: '\n ' 28 | })) 29 | ); 30 | 31 | if (options.method === 'inline-block') { 32 | rules.push( 33 | postcss.rule({ 34 | selector: selector, 35 | before: '\n' 36 | }) 37 | .append(postcss.decl({ 38 | prop: 'font-size', value: 0 39 | })) 40 | .append(postcss.decl({ 41 | prop: 'text-align', value: 'left' 42 | })) 43 | ) 44 | } else { 45 | rules.push( 46 | postcss.rule({ 47 | selectors: [ 48 | selector + ':before', 49 | selector + ':after' 50 | ], 51 | before: '\n' 52 | }) 53 | .append(postcss.decl({ 54 | prop: 'content', value: '" "', before: '\n ' 55 | })) 56 | .append(postcss.decl({ 57 | prop: 'display', value: 'table', before: '\n ' 58 | })) 59 | ); 60 | 61 | rules.push( 62 | postcss.rule({ 63 | selector: selector + ':after', 64 | before: '\n' 65 | }) 66 | .append(postcss.decl({ 67 | prop: 'clear', value: 'both', before: '\n ' 68 | })) 69 | ); 70 | } 71 | 72 | return rules; 73 | 74 | }; 75 | 76 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "autogrid", 3 | "version": "1.0.6", 4 | "description": "Automatic CSS grid generator", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "mocha test", 8 | "visual": "node test/visual/build" 9 | }, 10 | "keywords": [ 11 | "CSS", 12 | "OOCSS", 13 | "grid", 14 | "layout" 15 | ], 16 | "author": "Brent Jackson", 17 | "license": "MIT", 18 | "devDependencies": { 19 | "css-validator": "^0.5.1", 20 | "cssnext": "^1.1.0", 21 | "cssstats": "^1.4.0", 22 | "humanize-plus": "^1.5.0", 23 | "mocha": "^2.2.1" 24 | }, 25 | "dependencies": { 26 | "lodash": "^3.6.0", 27 | "postcss": "^4.0.6" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /test/options/index.js: -------------------------------------------------------------------------------- 1 | 2 | module.exports = { 3 | defaults: {}, 4 | css3: { 5 | customMedia: false, 6 | customProperties: false 7 | }, 8 | minimal: { 9 | container: false, 10 | row: false, 11 | breakpoints: [{}], 12 | customMedia: false, 13 | customProperties: false 14 | }, 15 | etsy: { 16 | gutter: '18px', 17 | container: false, 18 | mixedColumns: true, 19 | offset: true, 20 | columnFlush: true, 21 | breakpoints: [ 22 | { name: 'xs' }, 23 | { name: 'sm', value: '(min-width: 480px)' }, 24 | { name: 'md', value: '(min-width: 720px)' }, 25 | { name: 'lg', value: '(min-width: 960px)' }, 26 | { name: 'xl', value: '(min-width: 1200px)' }, 27 | { name: 'tv', value: '(min-width: 1600px)' }, 28 | ], 29 | columnName: 'col-MM-BB-NN', 30 | customMedia: false, 31 | customProperties: false 32 | }, 33 | bootstrap: { 34 | customMedia: false, 35 | customProperties: false, 36 | container: '1170px', 37 | containerPadding: true, 38 | gutter: '15px', 39 | offset: 'offset', 40 | mixedColumns: true, 41 | breakpoints: [ 42 | { name: 'xs' }, 43 | { name: 'sm', value: '(min-width: 768px)' }, 44 | { name: 'md', value: '(min-width: 992px)' }, 45 | { name: 'lg', value: '(min-width: 1200px)' }, 46 | ], 47 | containerName: 'container', 48 | rowName: 'row', 49 | columnName: 'col-BB-MM-NN', 50 | }, 51 | suitcss: { 52 | method: 'inline-block', 53 | container: false, 54 | rowName: 'Grid', 55 | columnName: 'Grid-cell-BB-NN', 56 | gutter: '20px', 57 | customMedia: false, 58 | customProperties: false 59 | }, 60 | }; 61 | -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | 2 | var fs = require('fs'); 3 | var path = require('path'); 4 | var assert = require('assert'); 5 | var autogrid = require('..'); 6 | var columnSelector = require('../lib/column-selector'); 7 | var cssnext = require('cssnext'); 8 | var cssstats = require('cssstats'); 9 | var humanize = require('humanize-plus'); 10 | var validate = require('css-validator'); 11 | 12 | var options = require('./options'); 13 | 14 | var stylesheets = {}; 15 | Object.keys(options).forEach(function(key){ 16 | stylesheets[key] = autogrid(options[key]); 17 | }); 18 | 19 | Object.keys(stylesheets).map(function(key) { 20 | var css = stylesheets[key]; 21 | var stats = cssstats(css); 22 | fs.writeFileSync(path.join(__dirname, './visual/' + key + '.css'), css); 23 | fs.writeFileSync(path.join(__dirname, './visual/' + key + '-stats.json'), JSON.stringify(stats.aggregates, null, 2)); 24 | }); 25 | 26 | 27 | describe('autogrid', function() { 28 | 29 | it('should create a string', function() { 30 | assert.equal(typeof stylesheets.defaults, 'string'); 31 | }); 32 | 33 | it('should correctly parse column selector names', function() { 34 | var selector = columnSelector({ prefix: '', columnName: 'BB-column-NN-MM' }, false, 6, false); 35 | assert.equal(selector, '.column-6'); 36 | selector = columnSelector({ prefix: '', columnName: 'BB-column-NN--MM' }, false, 6, 'modifier'); 37 | assert.equal(selector, '.column-6--modifier'); 38 | selector = columnSelector({ prefix: '', columnName: 'BB_col-NN--MM' }, 'sm', 6, 'modifier'); 39 | assert.equal(selector, '.sm_col-6--modifier'); 40 | }); 41 | 42 | it('should create valid css', function(done) { 43 | validate({ text: stylesheets.css3 }, function(err, data) { 44 | if (err) throw err; 45 | assert.equal(data.validity, true); 46 | done(); 47 | }); 48 | }); 49 | 50 | it('should create valid css for inline-block mode', function(done) { 51 | validate({ text: stylesheets.suitcss }, function(err, data) { 52 | if (err) throw err; 53 | assert.equal(data.validity, true); 54 | done(); 55 | }); 56 | }); 57 | 58 | it('should compile with cssnext', function() { 59 | assert.doesNotThrow(function() { 60 | var result = cssnext(stylesheets.defaults); 61 | }); 62 | }); 63 | 64 | it('should be the same as css3', function() { 65 | var result = cssnext(stylesheets.defaults); 66 | assert.equal(stylesheets.css3.trim(), result.trim()); 67 | }); 68 | 69 | }); 70 | 71 | -------------------------------------------------------------------------------- /test/visual/bootstrap-stats.json: -------------------------------------------------------------------------------- 1 | { 2 | "selectors": 193, 3 | "declarations": 110, 4 | "properties": [ 5 | "maxWidth", 6 | "marginLeft", 7 | "marginRight", 8 | "paddingLeft", 9 | "paddingRight", 10 | "content", 11 | "display", 12 | "clear", 13 | "boxSizing", 14 | "minHeight", 15 | "float", 16 | "width" 17 | ], 18 | "mediaQueries": [ 19 | "(minWidth:768px)", 20 | "(minWidth:992px)", 21 | "(minWidth:1200px)" 22 | ], 23 | "maxWidth": { 24 | "total": 1, 25 | "unique": 1 26 | }, 27 | "marginLeft": { 28 | "total": 46, 29 | "unique": 13 30 | }, 31 | "marginRight": { 32 | "total": 2, 33 | "unique": 2 34 | }, 35 | "paddingLeft": { 36 | "total": 2, 37 | "unique": 1 38 | }, 39 | "paddingRight": { 40 | "total": 2, 41 | "unique": 1 42 | }, 43 | "content": { 44 | "total": 1, 45 | "unique": 1 46 | }, 47 | "display": { 48 | "total": 1, 49 | "unique": 1 50 | }, 51 | "clear": { 52 | "total": 1, 53 | "unique": 1 54 | }, 55 | "boxSizing": { 56 | "total": 1, 57 | "unique": 1 58 | }, 59 | "minHeight": { 60 | "total": 1, 61 | "unique": 1 62 | }, 63 | "float": { 64 | "total": 4, 65 | "unique": 1 66 | }, 67 | "width": { 68 | "total": 48, 69 | "unique": 12 70 | }, 71 | "idSelectors": 0, 72 | "classSelectors": 193, 73 | "pseudoClassSelectors": 0, 74 | "pseudoElementSelectors": 3 75 | } -------------------------------------------------------------------------------- /test/visual/bootstrap.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | autogrid 4 | v1.0.5 5 | 6 | */ 7 | 8 | 9 | .container { 10 | max-width: 1170px; 11 | margin-left: auto; 12 | margin-right: auto; 13 | padding-left: 15px; 14 | padding-right: 15px 15 | 16 | } 17 | .row { 18 | margin-left: -15px; 19 | margin-right: -15px 20 | 21 | } 22 | .row:before, .row:after { 23 | content: " "; 24 | display: table 25 | 26 | } 27 | .row:after { 28 | clear: both 29 | 30 | } 31 | .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { 32 | box-sizing: border-box; 33 | padding-left: 15px; 34 | padding-right: 15px; 35 | min-height: 1px 36 | 37 | } 38 | .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { 39 | float: left 40 | 41 | } 42 | @media (min-width: 768px) { 43 | .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { 44 | float: left 45 | 46 | } 47 | 48 | } 49 | @media (min-width: 992px) { 50 | .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { 51 | float: left 52 | 53 | } 54 | 55 | } 56 | @media (min-width: 1200px) { 57 | .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { 58 | float: left 59 | 60 | } 61 | 62 | } 63 | .col-xs-1 { width: 8.333333333333332% } 64 | .col-xs-2 { width: 16.666666666666664% } 65 | .col-xs-3 { width: 25% } 66 | .col-xs-4 { width: 33.33333333333333% } 67 | .col-xs-5 { width: 41.66666666666667% } 68 | .col-xs-6 { width: 50% } 69 | .col-xs-7 { width: 58.333333333333336% } 70 | .col-xs-8 { width: 66.66666666666666% } 71 | .col-xs-9 { width: 75% } 72 | .col-xs-10 { width: 83.33333333333334% } 73 | .col-xs-11 { width: 91.66666666666666% } 74 | .col-xs-12 { width: 100% } 75 | @media (min-width: 768px) { 76 | .col-sm-1 { width: 8.333333333333332% } 77 | .col-sm-2 { width: 16.666666666666664% } 78 | .col-sm-3 { width: 25% } 79 | .col-sm-4 { width: 33.33333333333333% } 80 | .col-sm-5 { width: 41.66666666666667% } 81 | .col-sm-6 { width: 50% } 82 | .col-sm-7 { width: 58.333333333333336% } 83 | .col-sm-8 { width: 66.66666666666666% } 84 | .col-sm-9 { width: 75% } 85 | .col-sm-10 { width: 83.33333333333334% } 86 | .col-sm-11 { width: 91.66666666666666% } 87 | .col-sm-12 { width: 100% } 88 | 89 | } 90 | @media (min-width: 992px) { 91 | .col-md-1 { width: 8.333333333333332% } 92 | .col-md-2 { width: 16.666666666666664% } 93 | .col-md-3 { width: 25% } 94 | .col-md-4 { width: 33.33333333333333% } 95 | .col-md-5 { width: 41.66666666666667% } 96 | .col-md-6 { width: 50% } 97 | .col-md-7 { width: 58.333333333333336% } 98 | .col-md-8 { width: 66.66666666666666% } 99 | .col-md-9 { width: 75% } 100 | .col-md-10 { width: 83.33333333333334% } 101 | .col-md-11 { width: 91.66666666666666% } 102 | .col-md-12 { width: 100% } 103 | 104 | } 105 | @media (min-width: 1200px) { 106 | .col-lg-1 { width: 8.333333333333332% } 107 | .col-lg-2 { width: 16.666666666666664% } 108 | .col-lg-3 { width: 25% } 109 | .col-lg-4 { width: 33.33333333333333% } 110 | .col-lg-5 { width: 41.66666666666667% } 111 | .col-lg-6 { width: 50% } 112 | .col-lg-7 { width: 58.333333333333336% } 113 | .col-lg-8 { width: 66.66666666666666% } 114 | .col-lg-9 { width: 75% } 115 | .col-lg-10 { width: 83.33333333333334% } 116 | .col-lg-11 { width: 91.66666666666666% } 117 | .col-lg-12 { width: 100% } 118 | 119 | } 120 | .col-xs-offset-1 { 121 | margin-left: 8.333333333333332% 122 | 123 | } 124 | .col-xs-offset-2 { 125 | margin-left: 16.666666666666664% 126 | 127 | } 128 | .col-xs-offset-3 { 129 | margin-left: 25% 130 | 131 | } 132 | .col-xs-offset-4 { 133 | margin-left: 33.33333333333333% 134 | 135 | } 136 | .col-xs-offset-5 { 137 | margin-left: 41.66666666666667% 138 | 139 | } 140 | .col-xs-offset-6 { 141 | margin-left: 50% 142 | 143 | } 144 | .col-xs-offset-7 { 145 | margin-left: 58.333333333333336% 146 | 147 | } 148 | .col-xs-offset-8 { 149 | margin-left: 66.66666666666666% 150 | 151 | } 152 | .col-xs-offset-9 { 153 | margin-left: 75% 154 | 155 | } 156 | .col-xs-offset-10 { 157 | margin-left: 83.33333333333334% 158 | 159 | } 160 | .col-xs-offset-11 { 161 | margin-left: 91.66666666666666% 162 | 163 | } 164 | @media (min-width: 768px) { 165 | .col-sm-offset-1 { 166 | margin-left: 8.333333333333332% 167 | 168 | } 169 | .col-sm-offset-2 { 170 | margin-left: 16.666666666666664% 171 | 172 | } 173 | .col-sm-offset-3 { 174 | margin-left: 25% 175 | 176 | } 177 | .col-sm-offset-4 { 178 | margin-left: 33.33333333333333% 179 | 180 | } 181 | .col-sm-offset-5 { 182 | margin-left: 41.66666666666667% 183 | 184 | } 185 | .col-sm-offset-6 { 186 | margin-left: 50% 187 | 188 | } 189 | .col-sm-offset-7 { 190 | margin-left: 58.333333333333336% 191 | 192 | } 193 | .col-sm-offset-8 { 194 | margin-left: 66.66666666666666% 195 | 196 | } 197 | .col-sm-offset-9 { 198 | margin-left: 75% 199 | 200 | } 201 | .col-sm-offset-10 { 202 | margin-left: 83.33333333333334% 203 | 204 | } 205 | .col-sm-offset-11 { 206 | margin-left: 91.66666666666666% 207 | 208 | } 209 | 210 | } 211 | @media (min-width: 992px) { 212 | .col-md-offset-1 { 213 | margin-left: 8.333333333333332% 214 | 215 | } 216 | .col-md-offset-2 { 217 | margin-left: 16.666666666666664% 218 | 219 | } 220 | .col-md-offset-3 { 221 | margin-left: 25% 222 | 223 | } 224 | .col-md-offset-4 { 225 | margin-left: 33.33333333333333% 226 | 227 | } 228 | .col-md-offset-5 { 229 | margin-left: 41.66666666666667% 230 | 231 | } 232 | .col-md-offset-6 { 233 | margin-left: 50% 234 | 235 | } 236 | .col-md-offset-7 { 237 | margin-left: 58.333333333333336% 238 | 239 | } 240 | .col-md-offset-8 { 241 | margin-left: 66.66666666666666% 242 | 243 | } 244 | .col-md-offset-9 { 245 | margin-left: 75% 246 | 247 | } 248 | .col-md-offset-10 { 249 | margin-left: 83.33333333333334% 250 | 251 | } 252 | .col-md-offset-11 { 253 | margin-left: 91.66666666666666% 254 | 255 | } 256 | 257 | } 258 | @media (min-width: 1200px) { 259 | .col-lg-offset-1 { 260 | margin-left: 8.333333333333332% 261 | 262 | } 263 | .col-lg-offset-2 { 264 | margin-left: 16.666666666666664% 265 | 266 | } 267 | .col-lg-offset-3 { 268 | margin-left: 25% 269 | 270 | } 271 | .col-lg-offset-4 { 272 | margin-left: 33.33333333333333% 273 | 274 | } 275 | .col-lg-offset-5 { 276 | margin-left: 41.66666666666667% 277 | 278 | } 279 | .col-lg-offset-6 { 280 | margin-left: 50% 281 | 282 | } 283 | .col-lg-offset-7 { 284 | margin-left: 58.333333333333336% 285 | 286 | } 287 | .col-lg-offset-8 { 288 | margin-left: 66.66666666666666% 289 | 290 | } 291 | .col-lg-offset-9 { 292 | margin-left: 75% 293 | 294 | } 295 | .col-lg-offset-10 { 296 | margin-left: 83.33333333333334% 297 | 298 | } 299 | .col-lg-offset-11 { 300 | margin-left: 91.66666666666666% 301 | 302 | } 303 | 304 | } 305 | -------------------------------------------------------------------------------- /test/visual/bootstrap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | bootstrap 5 | 6 | 21 | 22 | 23 | 24 |
25 |

bootstrap

26 |
27 | 28 |
29 |

30 | widths 31 |

32 |
33 | 34 |
35 |
36 |
37 | .col-xs-1 38 |
39 |
40 |
41 |
42 | .col-xs-11 43 |
44 |
45 |
46 | 47 |
48 |
49 |
50 | .col-xs-2 51 |
52 |
53 |
54 |
55 | .col-xs-10 56 |
57 |
58 |
59 | 60 |
61 |
62 |
63 | .col-xs-3 64 |
65 |
66 |
67 |
68 | .col-xs-9 69 |
70 |
71 |
72 | 73 |
74 |
75 |
76 | .col-xs-4 77 |
78 |
79 |
80 |
81 | .col-xs-8 82 |
83 |
84 |
85 | 86 |
87 |
88 |
89 | .col-xs-5 90 |
91 |
92 |
93 |
94 | .col-xs-7 95 |
96 |
97 |
98 | 99 |
100 |
101 |
102 | .col-xs-6 103 |
104 |
105 |
106 |
107 | .col-xs-6 108 |
109 |
110 |
111 | 112 |
113 |
114 |
115 | .col-xs-7 116 |
117 |
118 |
119 |
120 | .col-xs-5 121 |
122 |
123 |
124 | 125 |
126 |
127 |
128 | .col-xs-8 129 |
130 |
131 |
132 |
133 | .col-xs-4 134 |
135 |
136 |
137 | 138 |
139 |
140 |
141 | .col-xs-9 142 |
143 |
144 |
145 |
146 | .col-xs-3 147 |
148 |
149 |
150 | 151 |
152 |
153 |
154 | .col-xs-10 155 |
156 |
157 |
158 |
159 | .col-xs-2 160 |
161 |
162 |
163 | 164 |
165 |
166 |
167 | .col-xs-11 168 |
169 |
170 |
171 |
172 | .col-xs-1 173 |
174 |
175 |
176 | 177 |
178 |
179 | 180 |
181 |

182 | wrapping 183 |

184 |
185 |
186 | 187 |
188 |
189 | .col-xs-4 190 |
191 |
192 | 193 |
194 |
195 | .col-xs-4 196 |
197 |
198 | 199 |
200 |
201 | .col-xs-4 202 |
203 |
204 | 205 |
206 |
207 | .col-xs-4 208 |
209 |
210 | 211 |
212 |
213 | .col-xs-4 214 |
215 |
216 | 217 |
218 |
219 | .col-xs-4 220 |
221 |
222 | 223 |
224 |
225 | .col-xs-4 226 |
227 |
228 | 229 |
230 |
231 | .col-xs-4 232 |
233 |
234 | 235 |
236 |
237 | .col-xs-4 238 |
239 |
240 | 241 |
242 |
243 | .col-xs-4 244 |
245 |
246 | 247 |
248 |
249 | .col-xs-4 250 |
251 |
252 | 253 |
254 |
255 | .col-xs-4 256 |
257 |
258 | 259 |
260 |
261 |
262 | 263 |
264 |

265 | nesting 266 |

267 |
268 |
269 | 270 |
271 |
272 | .col-xs-6 273 |
274 | 275 |
276 |
277 | .col-xs-6 278 |
279 |
280 | 281 |
282 |
283 | .col-xs-6 284 |
285 |
286 | 287 |
288 |
289 |
290 | 291 |
292 |
293 | .col-xs-6 294 |
295 | 296 |
297 |
298 | .col-xs-6 299 |
300 |
301 | 302 |
303 |
304 | .col-xs-6 305 |
306 |
307 | 308 |
309 |
310 |
311 | 312 |
313 |
314 |
315 | 316 | 317 |
318 |

319 | flush 320 |

321 |
322 |
323 | 324 |
327 |
328 | .col-xs-3 329 |
330 |
331 | 332 |
335 |
336 | .col-xs-3 337 |
338 |
339 | 340 |
343 |
344 | .col-xs-3 345 |
346 |
347 | 348 |
351 |
352 | .col-xs-3 353 |
354 |
355 | 356 |
357 |
358 |
359 | 360 |
361 |

362 | heights 363 |

364 |
365 |
366 | 367 |
368 |
369 | .col-xs-3 370 | 371 |
372 |
373 | 374 |
375 |
376 | .col-xs-3 377 |
tall column
378 |
379 |
380 | 381 |
382 |
383 | .col-xs-3 384 | 385 |
386 |
387 | 388 |
389 |
390 | .col-xs-3 391 |
tall column
392 |
393 |
394 | 395 |
396 |
397 |
398 | 399 | 400 | 401 | -------------------------------------------------------------------------------- /test/visual/build.js: -------------------------------------------------------------------------------- 1 | // Create HTML test pages for in-browser visual testing 2 | 3 | var _ = require('lodash'); 4 | var fs = require('fs'); 5 | var path = require('path'); 6 | 7 | var defaults = require('../../lib/defaults'); 8 | var options = require('../options'); 9 | var columnSelector = require('../../lib/column-selector'); 10 | var indexTpl = _.template(fs.readFileSync(path.join(__dirname, './index-template.html'), 'utf8')); 11 | var tpl = _.template(fs.readFileSync(path.join(__dirname, './template.html'), 'utf8')); 12 | 13 | // tests [ 14 | // { name: 'widths' } 15 | // ] 16 | // classnames: 17 | // container 18 | // rowClass 19 | // column 20 | // widths 21 | 22 | var data = { 23 | tests: [ 24 | { name: 'widths' }, 25 | ] 26 | }; 27 | 28 | var index = indexTpl({ options: options }); 29 | fs.writeFileSync(path.join(__dirname, './index.html'), index); 30 | 31 | Object.keys(options).forEach(function(key) { 32 | 33 | var opts = options[key]; 34 | opts = _.defaults(opts, defaults); 35 | 36 | data.stylesheet = key + '.css'; 37 | data.stats = require('./' + key + '-stats.json'); 38 | data.name = key; 39 | data.columns = opts.columns; 40 | data.container = opts.containerName; 41 | data.row = opts.rowName; 42 | data.col = columnSelector(opts, false, opts.breakpoints[0].name, false).replace(/^\./,''); 43 | data.cols = []; 44 | for (var i = 0; i < opts.columns; i++) { 45 | data.cols.push( columnSelector(opts, opts.breakpoints[0].name, i+1, false).replace(/^\./,'') ); 46 | } 47 | var flushName = (typeof opts.columnFlush === 'string') ? opts.columnFlush : 'flush'; 48 | data.colFlush = columnSelector(opts, opts.breakpoints[0].name, false, flushName).replace(/^\./,''); 49 | 50 | var html = tpl(data); 51 | 52 | fs.writeFileSync(path.join(__dirname, './' + key + '.html'), html); 53 | 54 | }); 55 | 56 | -------------------------------------------------------------------------------- /test/visual/css3-stats.json: -------------------------------------------------------------------------------- 1 | { 2 | "selectors": 57, 3 | "declarations": 76, 4 | "properties": [ 5 | "maxWidth", 6 | "marginLeft", 7 | "marginRight", 8 | "content", 9 | "display", 10 | "clear", 11 | "float", 12 | "boxSizing", 13 | "paddingLeft", 14 | "paddingRight", 15 | "minHeight", 16 | "width" 17 | ], 18 | "mediaQueries": [ 19 | "(minWidth:40em)", 20 | "(minWidth:52em)", 21 | "(minWidth:64em)" 22 | ], 23 | "maxWidth": { 24 | "total": 1, 25 | "unique": 1 26 | }, 27 | "marginLeft": { 28 | "total": 2, 29 | "unique": 2 30 | }, 31 | "marginRight": { 32 | "total": 2, 33 | "unique": 2 34 | }, 35 | "content": { 36 | "total": 1, 37 | "unique": 1 38 | }, 39 | "display": { 40 | "total": 1, 41 | "unique": 1 42 | }, 43 | "clear": { 44 | "total": 1, 45 | "unique": 1 46 | }, 47 | "float": { 48 | "total": 4, 49 | "unique": 1 50 | }, 51 | "boxSizing": { 52 | "total": 4, 53 | "unique": 1 54 | }, 55 | "paddingLeft": { 56 | "total": 4, 57 | "unique": 1 58 | }, 59 | "paddingRight": { 60 | "total": 4, 61 | "unique": 1 62 | }, 63 | "minHeight": { 64 | "total": 4, 65 | "unique": 1 66 | }, 67 | "width": { 68 | "total": 48, 69 | "unique": 12 70 | }, 71 | "idSelectors": 0, 72 | "classSelectors": 57, 73 | "pseudoClassSelectors": 0, 74 | "pseudoElementSelectors": 3 75 | } -------------------------------------------------------------------------------- /test/visual/css3.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | autogrid 4 | v1.0.5 5 | 6 | */ 7 | 8 | 9 | .container { 10 | max-width: 1024px; 11 | margin-left: auto; 12 | margin-right: auto 13 | 14 | } 15 | .row { 16 | margin-left: -32px; 17 | margin-right: -32px 18 | 19 | } 20 | .row:before, .row:after { 21 | content: " "; 22 | display: table 23 | 24 | } 25 | .row:after { 26 | clear: both 27 | 28 | } 29 | .col { 30 | float: left; 31 | box-sizing: border-box; 32 | padding-left: 32px; 33 | padding-right: 32px; 34 | min-height: 1px 35 | 36 | } 37 | @media (min-width: 40em) { 38 | .sm-col { 39 | float: left; 40 | box-sizing: border-box; 41 | padding-left: 32px; 42 | padding-right: 32px; 43 | min-height: 1px 44 | 45 | } 46 | 47 | } 48 | @media (min-width: 52em) { 49 | .md-col { 50 | float: left; 51 | box-sizing: border-box; 52 | padding-left: 32px; 53 | padding-right: 32px; 54 | min-height: 1px 55 | 56 | } 57 | 58 | } 59 | @media (min-width: 64em) { 60 | .lg-col { 61 | float: left; 62 | box-sizing: border-box; 63 | padding-left: 32px; 64 | padding-right: 32px; 65 | min-height: 1px 66 | 67 | } 68 | 69 | } 70 | .col-1 { width: 8.333333333333332% } 71 | .col-2 { width: 16.666666666666664% } 72 | .col-3 { width: 25% } 73 | .col-4 { width: 33.33333333333333% } 74 | .col-5 { width: 41.66666666666667% } 75 | .col-6 { width: 50% } 76 | .col-7 { width: 58.333333333333336% } 77 | .col-8 { width: 66.66666666666666% } 78 | .col-9 { width: 75% } 79 | .col-10 { width: 83.33333333333334% } 80 | .col-11 { width: 91.66666666666666% } 81 | .col-12 { width: 100% } 82 | @media (min-width: 40em) { 83 | .sm-col-1 { width: 8.333333333333332% } 84 | .sm-col-2 { width: 16.666666666666664% } 85 | .sm-col-3 { width: 25% } 86 | .sm-col-4 { width: 33.33333333333333% } 87 | .sm-col-5 { width: 41.66666666666667% } 88 | .sm-col-6 { width: 50% } 89 | .sm-col-7 { width: 58.333333333333336% } 90 | .sm-col-8 { width: 66.66666666666666% } 91 | .sm-col-9 { width: 75% } 92 | .sm-col-10 { width: 83.33333333333334% } 93 | .sm-col-11 { width: 91.66666666666666% } 94 | .sm-col-12 { width: 100% } 95 | 96 | } 97 | @media (min-width: 52em) { 98 | .md-col-1 { width: 8.333333333333332% } 99 | .md-col-2 { width: 16.666666666666664% } 100 | .md-col-3 { width: 25% } 101 | .md-col-4 { width: 33.33333333333333% } 102 | .md-col-5 { width: 41.66666666666667% } 103 | .md-col-6 { width: 50% } 104 | .md-col-7 { width: 58.333333333333336% } 105 | .md-col-8 { width: 66.66666666666666% } 106 | .md-col-9 { width: 75% } 107 | .md-col-10 { width: 83.33333333333334% } 108 | .md-col-11 { width: 91.66666666666666% } 109 | .md-col-12 { width: 100% } 110 | 111 | } 112 | @media (min-width: 64em) { 113 | .lg-col-1 { width: 8.333333333333332% } 114 | .lg-col-2 { width: 16.666666666666664% } 115 | .lg-col-3 { width: 25% } 116 | .lg-col-4 { width: 33.33333333333333% } 117 | .lg-col-5 { width: 41.66666666666667% } 118 | .lg-col-6 { width: 50% } 119 | .lg-col-7 { width: 58.333333333333336% } 120 | .lg-col-8 { width: 66.66666666666666% } 121 | .lg-col-9 { width: 75% } 122 | .lg-col-10 { width: 83.33333333333334% } 123 | .lg-col-11 { width: 91.66666666666666% } 124 | .lg-col-12 { width: 100% } 125 | 126 | } 127 | -------------------------------------------------------------------------------- /test/visual/css3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | css3 5 | 6 | 21 | 22 | 23 | 24 |
25 |

css3

26 |
27 | 28 |
29 |

30 | widths 31 |

32 |
33 | 34 |
35 |
36 |
37 | .col-1 38 |
39 |
40 |
41 |
42 | .col-11 43 |
44 |
45 |
46 | 47 |
48 |
49 |
50 | .col-2 51 |
52 |
53 |
54 |
55 | .col-10 56 |
57 |
58 |
59 | 60 |
61 |
62 |
63 | .col-3 64 |
65 |
66 |
67 |
68 | .col-9 69 |
70 |
71 |
72 | 73 |
74 |
75 |
76 | .col-4 77 |
78 |
79 |
80 |
81 | .col-8 82 |
83 |
84 |
85 | 86 |
87 |
88 |
89 | .col-5 90 |
91 |
92 |
93 |
94 | .col-7 95 |
96 |
97 |
98 | 99 |
100 |
101 |
102 | .col-6 103 |
104 |
105 |
106 |
107 | .col-6 108 |
109 |
110 |
111 | 112 |
113 |
114 |
115 | .col-7 116 |
117 |
118 |
119 |
120 | .col-5 121 |
122 |
123 |
124 | 125 |
126 |
127 |
128 | .col-8 129 |
130 |
131 |
132 |
133 | .col-4 134 |
135 |
136 |
137 | 138 |
139 |
140 |
141 | .col-9 142 |
143 |
144 |
145 |
146 | .col-3 147 |
148 |
149 |
150 | 151 |
152 |
153 |
154 | .col-10 155 |
156 |
157 |
158 |
159 | .col-2 160 |
161 |
162 |
163 | 164 |
165 |
166 |
167 | .col-11 168 |
169 |
170 |
171 |
172 | .col-1 173 |
174 |
175 |
176 | 177 |
178 |
179 | 180 |
181 |

182 | wrapping 183 |

184 |
185 |
186 | 187 |
188 |
189 | .col-4 190 |
191 |
192 | 193 |
194 |
195 | .col-4 196 |
197 |
198 | 199 |
200 |
201 | .col-4 202 |
203 |
204 | 205 |
206 |
207 | .col-4 208 |
209 |
210 | 211 |
212 |
213 | .col-4 214 |
215 |
216 | 217 |
218 |
219 | .col-4 220 |
221 |
222 | 223 |
224 |
225 | .col-4 226 |
227 |
228 | 229 |
230 |
231 | .col-4 232 |
233 |
234 | 235 |
236 |
237 | .col-4 238 |
239 |
240 | 241 |
242 |
243 | .col-4 244 |
245 |
246 | 247 |
248 |
249 | .col-4 250 |
251 |
252 | 253 |
254 |
255 | .col-4 256 |
257 |
258 | 259 |
260 |
261 |
262 | 263 |
264 |

265 | nesting 266 |

267 |
268 |
269 | 270 |
271 |
272 | .col-6 273 |
274 | 275 |
276 |
277 | .col-6 278 |
279 |
280 | 281 |
282 |
283 | .col-6 284 |
285 |
286 | 287 |
288 |
289 |
290 | 291 |
292 |
293 | .col-6 294 |
295 | 296 |
297 |
298 | .col-6 299 |
300 |
301 | 302 |
303 |
304 | .col-6 305 |
306 |
307 | 308 |
309 |
310 |
311 | 312 |
313 |
314 |
315 | 316 | 317 |
318 |

319 | flush 320 |

321 |
322 |
323 | 324 |
327 |
328 | .col-3 329 |
330 |
331 | 332 |
335 |
336 | .col-3 337 |
338 |
339 | 340 |
343 |
344 | .col-3 345 |
346 |
347 | 348 |
351 |
352 | .col-3 353 |
354 |
355 | 356 |
357 |
358 |
359 | 360 |
361 |

362 | heights 363 |

364 |
365 |
366 | 367 |
368 |
369 | .col-3 370 | 371 |
372 |
373 | 374 |
375 |
376 | .col-3 377 |
tall column
378 |
379 |
380 | 381 |
382 |
383 | .col-3 384 | 385 |
386 |
387 | 388 |
389 |
390 | .col-3 391 |
tall column
392 |
393 |
394 | 395 |
396 |
397 |
398 | 399 | 400 | 401 | -------------------------------------------------------------------------------- /test/visual/defaults-stats.json: -------------------------------------------------------------------------------- 1 | { 2 | "selectors": 58, 3 | "declarations": 78, 4 | "properties": [ 5 | "maxWidth", 6 | "marginLeft", 7 | "marginRight", 8 | "content", 9 | "display", 10 | "clear", 11 | "float", 12 | "boxSizing", 13 | "paddingLeft", 14 | "paddingRight", 15 | "minHeight", 16 | "width", 17 | "containerWidth", 18 | "gutterWidth" 19 | ], 20 | "mediaQueries": [ 21 | "(BreakpointSm)", 22 | "(BreakpointMd)", 23 | "(BreakpointLg)" 24 | ], 25 | "maxWidth": { 26 | "total": 1, 27 | "unique": 1 28 | }, 29 | "marginLeft": { 30 | "total": 2, 31 | "unique": 2 32 | }, 33 | "marginRight": { 34 | "total": 2, 35 | "unique": 2 36 | }, 37 | "content": { 38 | "total": 1, 39 | "unique": 1 40 | }, 41 | "display": { 42 | "total": 1, 43 | "unique": 1 44 | }, 45 | "clear": { 46 | "total": 1, 47 | "unique": 1 48 | }, 49 | "float": { 50 | "total": 4, 51 | "unique": 1 52 | }, 53 | "boxSizing": { 54 | "total": 4, 55 | "unique": 1 56 | }, 57 | "paddingLeft": { 58 | "total": 4, 59 | "unique": 1 60 | }, 61 | "paddingRight": { 62 | "total": 4, 63 | "unique": 1 64 | }, 65 | "minHeight": { 66 | "total": 4, 67 | "unique": 1 68 | }, 69 | "width": { 70 | "total": 48, 71 | "unique": 12 72 | }, 73 | "containerWidth": { 74 | "total": 1, 75 | "unique": 1 76 | }, 77 | "gutterWidth": { 78 | "total": 1, 79 | "unique": 1 80 | }, 81 | "idSelectors": 0, 82 | "classSelectors": 57, 83 | "pseudoClassSelectors": 1, 84 | "pseudoElementSelectors": 3 85 | } -------------------------------------------------------------------------------- /test/visual/defaults.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | autogrid 4 | v1.0.5 5 | 6 | */ 7 | 8 | 9 | .container { 10 | max-width: var(--container-width); 11 | margin-left: auto; 12 | margin-right: auto 13 | 14 | } 15 | .row { 16 | margin-left: -var(--gutter-width); 17 | margin-right: -var(--gutter-width) 18 | 19 | } 20 | .row:before, .row:after { 21 | content: " "; 22 | display: table 23 | 24 | } 25 | .row:after { 26 | clear: both 27 | 28 | } 29 | .col { 30 | float: left; 31 | box-sizing: border-box; 32 | padding-left: var(--gutter-width); 33 | padding-right: var(--gutter-width); 34 | min-height: 1px 35 | 36 | } 37 | @media (--breakpoint-sm) { 38 | .sm-col { 39 | float: left; 40 | box-sizing: border-box; 41 | padding-left: var(--gutter-width); 42 | padding-right: var(--gutter-width); 43 | min-height: 1px 44 | 45 | } 46 | 47 | } 48 | @media (--breakpoint-md) { 49 | .md-col { 50 | float: left; 51 | box-sizing: border-box; 52 | padding-left: var(--gutter-width); 53 | padding-right: var(--gutter-width); 54 | min-height: 1px 55 | 56 | } 57 | 58 | } 59 | @media (--breakpoint-lg) { 60 | .lg-col { 61 | float: left; 62 | box-sizing: border-box; 63 | padding-left: var(--gutter-width); 64 | padding-right: var(--gutter-width); 65 | min-height: 1px 66 | 67 | } 68 | 69 | } 70 | .col-1 { width: 8.333333333333332% } 71 | .col-2 { width: 16.666666666666664% } 72 | .col-3 { width: 25% } 73 | .col-4 { width: 33.33333333333333% } 74 | .col-5 { width: 41.66666666666667% } 75 | .col-6 { width: 50% } 76 | .col-7 { width: 58.333333333333336% } 77 | .col-8 { width: 66.66666666666666% } 78 | .col-9 { width: 75% } 79 | .col-10 { width: 83.33333333333334% } 80 | .col-11 { width: 91.66666666666666% } 81 | .col-12 { width: 100% } 82 | @media (--breakpoint-sm) { 83 | .sm-col-1 { width: 8.333333333333332% } 84 | .sm-col-2 { width: 16.666666666666664% } 85 | .sm-col-3 { width: 25% } 86 | .sm-col-4 { width: 33.33333333333333% } 87 | .sm-col-5 { width: 41.66666666666667% } 88 | .sm-col-6 { width: 50% } 89 | .sm-col-7 { width: 58.333333333333336% } 90 | .sm-col-8 { width: 66.66666666666666% } 91 | .sm-col-9 { width: 75% } 92 | .sm-col-10 { width: 83.33333333333334% } 93 | .sm-col-11 { width: 91.66666666666666% } 94 | .sm-col-12 { width: 100% } 95 | 96 | } 97 | @media (--breakpoint-md) { 98 | .md-col-1 { width: 8.333333333333332% } 99 | .md-col-2 { width: 16.666666666666664% } 100 | .md-col-3 { width: 25% } 101 | .md-col-4 { width: 33.33333333333333% } 102 | .md-col-5 { width: 41.66666666666667% } 103 | .md-col-6 { width: 50% } 104 | .md-col-7 { width: 58.333333333333336% } 105 | .md-col-8 { width: 66.66666666666666% } 106 | .md-col-9 { width: 75% } 107 | .md-col-10 { width: 83.33333333333334% } 108 | .md-col-11 { width: 91.66666666666666% } 109 | .md-col-12 { width: 100% } 110 | 111 | } 112 | @media (--breakpoint-lg) { 113 | .lg-col-1 { width: 8.333333333333332% } 114 | .lg-col-2 { width: 16.666666666666664% } 115 | .lg-col-3 { width: 25% } 116 | .lg-col-4 { width: 33.33333333333333% } 117 | .lg-col-5 { width: 41.66666666666667% } 118 | .lg-col-6 { width: 50% } 119 | .lg-col-7 { width: 58.333333333333336% } 120 | .lg-col-8 { width: 66.66666666666666% } 121 | .lg-col-9 { width: 75% } 122 | .lg-col-10 { width: 83.33333333333334% } 123 | .lg-col-11 { width: 91.66666666666666% } 124 | .lg-col-12 { width: 100% } 125 | 126 | } 127 | @custom-media --breakpoint-sm (min-width: 40em); 128 | @custom-media --breakpoint-md (min-width: 52em); 129 | @custom-media --breakpoint-lg (min-width: 64em); 130 | :root { 131 | --container-width: 1024px; 132 | --gutter-width: 32px 133 | } 134 | -------------------------------------------------------------------------------- /test/visual/defaults.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | defaults 5 | 6 | 21 | 22 | 23 | 24 |
25 |

defaults

26 |
27 | 28 |
29 |

30 | widths 31 |

32 |
33 | 34 |
35 |
36 |
37 | .col-1 38 |
39 |
40 |
41 |
42 | .col-11 43 |
44 |
45 |
46 | 47 |
48 |
49 |
50 | .col-2 51 |
52 |
53 |
54 |
55 | .col-10 56 |
57 |
58 |
59 | 60 |
61 |
62 |
63 | .col-3 64 |
65 |
66 |
67 |
68 | .col-9 69 |
70 |
71 |
72 | 73 |
74 |
75 |
76 | .col-4 77 |
78 |
79 |
80 |
81 | .col-8 82 |
83 |
84 |
85 | 86 |
87 |
88 |
89 | .col-5 90 |
91 |
92 |
93 |
94 | .col-7 95 |
96 |
97 |
98 | 99 |
100 |
101 |
102 | .col-6 103 |
104 |
105 |
106 |
107 | .col-6 108 |
109 |
110 |
111 | 112 |
113 |
114 |
115 | .col-7 116 |
117 |
118 |
119 |
120 | .col-5 121 |
122 |
123 |
124 | 125 |
126 |
127 |
128 | .col-8 129 |
130 |
131 |
132 |
133 | .col-4 134 |
135 |
136 |
137 | 138 |
139 |
140 |
141 | .col-9 142 |
143 |
144 |
145 |
146 | .col-3 147 |
148 |
149 |
150 | 151 |
152 |
153 |
154 | .col-10 155 |
156 |
157 |
158 |
159 | .col-2 160 |
161 |
162 |
163 | 164 |
165 |
166 |
167 | .col-11 168 |
169 |
170 |
171 |
172 | .col-1 173 |
174 |
175 |
176 | 177 |
178 |
179 | 180 |
181 |

182 | wrapping 183 |

184 |
185 |
186 | 187 |
188 |
189 | .col-4 190 |
191 |
192 | 193 |
194 |
195 | .col-4 196 |
197 |
198 | 199 |
200 |
201 | .col-4 202 |
203 |
204 | 205 |
206 |
207 | .col-4 208 |
209 |
210 | 211 |
212 |
213 | .col-4 214 |
215 |
216 | 217 |
218 |
219 | .col-4 220 |
221 |
222 | 223 |
224 |
225 | .col-4 226 |
227 |
228 | 229 |
230 |
231 | .col-4 232 |
233 |
234 | 235 |
236 |
237 | .col-4 238 |
239 |
240 | 241 |
242 |
243 | .col-4 244 |
245 |
246 | 247 |
248 |
249 | .col-4 250 |
251 |
252 | 253 |
254 |
255 | .col-4 256 |
257 |
258 | 259 |
260 |
261 |
262 | 263 |
264 |

265 | nesting 266 |

267 |
268 |
269 | 270 |
271 |
272 | .col-6 273 |
274 | 275 |
276 |
277 | .col-6 278 |
279 |
280 | 281 |
282 |
283 | .col-6 284 |
285 |
286 | 287 |
288 |
289 |
290 | 291 |
292 |
293 | .col-6 294 |
295 | 296 |
297 |
298 | .col-6 299 |
300 |
301 | 302 |
303 |
304 | .col-6 305 |
306 |
307 | 308 |
309 |
310 |
311 | 312 |
313 |
314 |
315 | 316 | 317 |
318 |

319 | flush 320 |

321 |
322 |
323 | 324 |
327 |
328 | .col-3 329 |
330 |
331 | 332 |
335 |
336 | .col-3 337 |
338 |
339 | 340 |
343 |
344 | .col-3 345 |
346 |
347 | 348 |
351 |
352 | .col-3 353 |
354 |
355 | 356 |
357 |
358 |
359 | 360 |
361 |

362 | heights 363 |

364 |
365 |
366 | 367 |
368 |
369 | .col-3 370 | 371 |
372 |
373 | 374 |
375 |
376 | .col-3 377 |
tall column
378 |
379 |
380 | 381 |
382 |
383 | .col-3 384 | 385 |
386 |
387 | 388 |
389 |
390 | .col-3 391 |
tall column
392 |
393 |
394 | 395 |
396 |
397 |
398 | 399 | 400 | 401 | -------------------------------------------------------------------------------- /test/visual/etsy-stats.json: -------------------------------------------------------------------------------- 1 | { 2 | "selectors": 292, 3 | "declarations": 165, 4 | "properties": [ 5 | "marginLeft", 6 | "marginRight", 7 | "content", 8 | "display", 9 | "clear", 10 | "boxSizing", 11 | "paddingLeft", 12 | "paddingRight", 13 | "minHeight", 14 | "float", 15 | "width" 16 | ], 17 | "mediaQueries": [ 18 | "(minWidth:480px)", 19 | "(minWidth:720px)", 20 | "(minWidth:960px)", 21 | "(minWidth:1200px)", 22 | "(minWidth:1600px)" 23 | ], 24 | "marginLeft": { 25 | "total": 67, 26 | "unique": 12 27 | }, 28 | "marginRight": { 29 | "total": 1, 30 | "unique": 1 31 | }, 32 | "content": { 33 | "total": 1, 34 | "unique": 1 35 | }, 36 | "display": { 37 | "total": 1, 38 | "unique": 1 39 | }, 40 | "clear": { 41 | "total": 1, 42 | "unique": 1 43 | }, 44 | "boxSizing": { 45 | "total": 1, 46 | "unique": 1 47 | }, 48 | "paddingLeft": { 49 | "total": 7, 50 | "unique": 2 51 | }, 52 | "paddingRight": { 53 | "total": 7, 54 | "unique": 2 55 | }, 56 | "minHeight": { 57 | "total": 1, 58 | "unique": 1 59 | }, 60 | "float": { 61 | "total": 6, 62 | "unique": 1 63 | }, 64 | "width": { 65 | "total": 72, 66 | "unique": 12 67 | }, 68 | "idSelectors": 0, 69 | "classSelectors": 292, 70 | "pseudoClassSelectors": 0, 71 | "pseudoElementSelectors": 3 72 | } -------------------------------------------------------------------------------- /test/visual/etsy.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | autogrid 4 | v1.0.5 5 | 6 | */ 7 | 8 | 9 | .row { 10 | margin-left: -18px; 11 | margin-right: -18px 12 | 13 | } 14 | .row:before, .row:after { 15 | content: " "; 16 | display: table 17 | 18 | } 19 | .row:after { 20 | clear: both 21 | 22 | } 23 | .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-tv-1, .col-tv-2, .col-tv-3, .col-tv-4, .col-tv-5, .col-tv-6, .col-tv-7, .col-tv-8, .col-tv-9, .col-tv-10, .col-tv-11, .col-tv-12 { 24 | box-sizing: border-box; 25 | padding-left: 18px; 26 | padding-right: 18px; 27 | min-height: 1px 28 | 29 | } 30 | .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { 31 | float: left 32 | 33 | } 34 | @media (min-width: 480px) { 35 | .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { 36 | float: left 37 | 38 | } 39 | 40 | } 41 | @media (min-width: 720px) { 42 | .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { 43 | float: left 44 | 45 | } 46 | 47 | } 48 | @media (min-width: 960px) { 49 | .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { 50 | float: left 51 | 52 | } 53 | 54 | } 55 | @media (min-width: 1200px) { 56 | .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 { 57 | float: left 58 | 59 | } 60 | 61 | } 62 | @media (min-width: 1600px) { 63 | .col-tv-1, .col-tv-2, .col-tv-3, .col-tv-4, .col-tv-5, .col-tv-6, .col-tv-7, .col-tv-8, .col-tv-9, .col-tv-10, .col-tv-11, .col-tv-12 { 64 | float: left 65 | 66 | } 67 | 68 | } 69 | .col-xs-1 { width: 8.333333333333332% } 70 | .col-xs-2 { width: 16.666666666666664% } 71 | .col-xs-3 { width: 25% } 72 | .col-xs-4 { width: 33.33333333333333% } 73 | .col-xs-5 { width: 41.66666666666667% } 74 | .col-xs-6 { width: 50% } 75 | .col-xs-7 { width: 58.333333333333336% } 76 | .col-xs-8 { width: 66.66666666666666% } 77 | .col-xs-9 { width: 75% } 78 | .col-xs-10 { width: 83.33333333333334% } 79 | .col-xs-11 { width: 91.66666666666666% } 80 | .col-xs-12 { width: 100% } 81 | @media (min-width: 480px) { 82 | .col-sm-1 { width: 8.333333333333332% } 83 | .col-sm-2 { width: 16.666666666666664% } 84 | .col-sm-3 { width: 25% } 85 | .col-sm-4 { width: 33.33333333333333% } 86 | .col-sm-5 { width: 41.66666666666667% } 87 | .col-sm-6 { width: 50% } 88 | .col-sm-7 { width: 58.333333333333336% } 89 | .col-sm-8 { width: 66.66666666666666% } 90 | .col-sm-9 { width: 75% } 91 | .col-sm-10 { width: 83.33333333333334% } 92 | .col-sm-11 { width: 91.66666666666666% } 93 | .col-sm-12 { width: 100% } 94 | 95 | } 96 | @media (min-width: 720px) { 97 | .col-md-1 { width: 8.333333333333332% } 98 | .col-md-2 { width: 16.666666666666664% } 99 | .col-md-3 { width: 25% } 100 | .col-md-4 { width: 33.33333333333333% } 101 | .col-md-5 { width: 41.66666666666667% } 102 | .col-md-6 { width: 50% } 103 | .col-md-7 { width: 58.333333333333336% } 104 | .col-md-8 { width: 66.66666666666666% } 105 | .col-md-9 { width: 75% } 106 | .col-md-10 { width: 83.33333333333334% } 107 | .col-md-11 { width: 91.66666666666666% } 108 | .col-md-12 { width: 100% } 109 | 110 | } 111 | @media (min-width: 960px) { 112 | .col-lg-1 { width: 8.333333333333332% } 113 | .col-lg-2 { width: 16.666666666666664% } 114 | .col-lg-3 { width: 25% } 115 | .col-lg-4 { width: 33.33333333333333% } 116 | .col-lg-5 { width: 41.66666666666667% } 117 | .col-lg-6 { width: 50% } 118 | .col-lg-7 { width: 58.333333333333336% } 119 | .col-lg-8 { width: 66.66666666666666% } 120 | .col-lg-9 { width: 75% } 121 | .col-lg-10 { width: 83.33333333333334% } 122 | .col-lg-11 { width: 91.66666666666666% } 123 | .col-lg-12 { width: 100% } 124 | 125 | } 126 | @media (min-width: 1200px) { 127 | .col-xl-1 { width: 8.333333333333332% } 128 | .col-xl-2 { width: 16.666666666666664% } 129 | .col-xl-3 { width: 25% } 130 | .col-xl-4 { width: 33.33333333333333% } 131 | .col-xl-5 { width: 41.66666666666667% } 132 | .col-xl-6 { width: 50% } 133 | .col-xl-7 { width: 58.333333333333336% } 134 | .col-xl-8 { width: 66.66666666666666% } 135 | .col-xl-9 { width: 75% } 136 | .col-xl-10 { width: 83.33333333333334% } 137 | .col-xl-11 { width: 91.66666666666666% } 138 | .col-xl-12 { width: 100% } 139 | 140 | } 141 | @media (min-width: 1600px) { 142 | .col-tv-1 { width: 8.333333333333332% } 143 | .col-tv-2 { width: 16.666666666666664% } 144 | .col-tv-3 { width: 25% } 145 | .col-tv-4 { width: 33.33333333333333% } 146 | .col-tv-5 { width: 41.66666666666667% } 147 | .col-tv-6 { width: 50% } 148 | .col-tv-7 { width: 58.333333333333336% } 149 | .col-tv-8 { width: 66.66666666666666% } 150 | .col-tv-9 { width: 75% } 151 | .col-tv-10 { width: 83.33333333333334% } 152 | .col-tv-11 { width: 91.66666666666666% } 153 | .col-tv-12 { width: 100% } 154 | 155 | } 156 | .col-offset-xs-1 { 157 | margin-left: 8.333333333333332% 158 | 159 | } 160 | .col-offset-xs-2 { 161 | margin-left: 16.666666666666664% 162 | 163 | } 164 | .col-offset-xs-3 { 165 | margin-left: 25% 166 | 167 | } 168 | .col-offset-xs-4 { 169 | margin-left: 33.33333333333333% 170 | 171 | } 172 | .col-offset-xs-5 { 173 | margin-left: 41.66666666666667% 174 | 175 | } 176 | .col-offset-xs-6 { 177 | margin-left: 50% 178 | 179 | } 180 | .col-offset-xs-7 { 181 | margin-left: 58.333333333333336% 182 | 183 | } 184 | .col-offset-xs-8 { 185 | margin-left: 66.66666666666666% 186 | 187 | } 188 | .col-offset-xs-9 { 189 | margin-left: 75% 190 | 191 | } 192 | .col-offset-xs-10 { 193 | margin-left: 83.33333333333334% 194 | 195 | } 196 | .col-offset-xs-11 { 197 | margin-left: 91.66666666666666% 198 | 199 | } 200 | @media (min-width: 480px) { 201 | .col-offset-sm-1 { 202 | margin-left: 8.333333333333332% 203 | 204 | } 205 | .col-offset-sm-2 { 206 | margin-left: 16.666666666666664% 207 | 208 | } 209 | .col-offset-sm-3 { 210 | margin-left: 25% 211 | 212 | } 213 | .col-offset-sm-4 { 214 | margin-left: 33.33333333333333% 215 | 216 | } 217 | .col-offset-sm-5 { 218 | margin-left: 41.66666666666667% 219 | 220 | } 221 | .col-offset-sm-6 { 222 | margin-left: 50% 223 | 224 | } 225 | .col-offset-sm-7 { 226 | margin-left: 58.333333333333336% 227 | 228 | } 229 | .col-offset-sm-8 { 230 | margin-left: 66.66666666666666% 231 | 232 | } 233 | .col-offset-sm-9 { 234 | margin-left: 75% 235 | 236 | } 237 | .col-offset-sm-10 { 238 | margin-left: 83.33333333333334% 239 | 240 | } 241 | .col-offset-sm-11 { 242 | margin-left: 91.66666666666666% 243 | 244 | } 245 | 246 | } 247 | @media (min-width: 720px) { 248 | .col-offset-md-1 { 249 | margin-left: 8.333333333333332% 250 | 251 | } 252 | .col-offset-md-2 { 253 | margin-left: 16.666666666666664% 254 | 255 | } 256 | .col-offset-md-3 { 257 | margin-left: 25% 258 | 259 | } 260 | .col-offset-md-4 { 261 | margin-left: 33.33333333333333% 262 | 263 | } 264 | .col-offset-md-5 { 265 | margin-left: 41.66666666666667% 266 | 267 | } 268 | .col-offset-md-6 { 269 | margin-left: 50% 270 | 271 | } 272 | .col-offset-md-7 { 273 | margin-left: 58.333333333333336% 274 | 275 | } 276 | .col-offset-md-8 { 277 | margin-left: 66.66666666666666% 278 | 279 | } 280 | .col-offset-md-9 { 281 | margin-left: 75% 282 | 283 | } 284 | .col-offset-md-10 { 285 | margin-left: 83.33333333333334% 286 | 287 | } 288 | .col-offset-md-11 { 289 | margin-left: 91.66666666666666% 290 | 291 | } 292 | 293 | } 294 | @media (min-width: 960px) { 295 | .col-offset-lg-1 { 296 | margin-left: 8.333333333333332% 297 | 298 | } 299 | .col-offset-lg-2 { 300 | margin-left: 16.666666666666664% 301 | 302 | } 303 | .col-offset-lg-3 { 304 | margin-left: 25% 305 | 306 | } 307 | .col-offset-lg-4 { 308 | margin-left: 33.33333333333333% 309 | 310 | } 311 | .col-offset-lg-5 { 312 | margin-left: 41.66666666666667% 313 | 314 | } 315 | .col-offset-lg-6 { 316 | margin-left: 50% 317 | 318 | } 319 | .col-offset-lg-7 { 320 | margin-left: 58.333333333333336% 321 | 322 | } 323 | .col-offset-lg-8 { 324 | margin-left: 66.66666666666666% 325 | 326 | } 327 | .col-offset-lg-9 { 328 | margin-left: 75% 329 | 330 | } 331 | .col-offset-lg-10 { 332 | margin-left: 83.33333333333334% 333 | 334 | } 335 | .col-offset-lg-11 { 336 | margin-left: 91.66666666666666% 337 | 338 | } 339 | 340 | } 341 | @media (min-width: 1200px) { 342 | .col-offset-xl-1 { 343 | margin-left: 8.333333333333332% 344 | 345 | } 346 | .col-offset-xl-2 { 347 | margin-left: 16.666666666666664% 348 | 349 | } 350 | .col-offset-xl-3 { 351 | margin-left: 25% 352 | 353 | } 354 | .col-offset-xl-4 { 355 | margin-left: 33.33333333333333% 356 | 357 | } 358 | .col-offset-xl-5 { 359 | margin-left: 41.66666666666667% 360 | 361 | } 362 | .col-offset-xl-6 { 363 | margin-left: 50% 364 | 365 | } 366 | .col-offset-xl-7 { 367 | margin-left: 58.333333333333336% 368 | 369 | } 370 | .col-offset-xl-8 { 371 | margin-left: 66.66666666666666% 372 | 373 | } 374 | .col-offset-xl-9 { 375 | margin-left: 75% 376 | 377 | } 378 | .col-offset-xl-10 { 379 | margin-left: 83.33333333333334% 380 | 381 | } 382 | .col-offset-xl-11 { 383 | margin-left: 91.66666666666666% 384 | 385 | } 386 | 387 | } 388 | @media (min-width: 1600px) { 389 | .col-offset-tv-1 { 390 | margin-left: 8.333333333333332% 391 | 392 | } 393 | .col-offset-tv-2 { 394 | margin-left: 16.666666666666664% 395 | 396 | } 397 | .col-offset-tv-3 { 398 | margin-left: 25% 399 | 400 | } 401 | .col-offset-tv-4 { 402 | margin-left: 33.33333333333333% 403 | 404 | } 405 | .col-offset-tv-5 { 406 | margin-left: 41.66666666666667% 407 | 408 | } 409 | .col-offset-tv-6 { 410 | margin-left: 50% 411 | 412 | } 413 | .col-offset-tv-7 { 414 | margin-left: 58.333333333333336% 415 | 416 | } 417 | .col-offset-tv-8 { 418 | margin-left: 66.66666666666666% 419 | 420 | } 421 | .col-offset-tv-9 { 422 | margin-left: 75% 423 | 424 | } 425 | .col-offset-tv-10 { 426 | margin-left: 83.33333333333334% 427 | 428 | } 429 | .col-offset-tv-11 { 430 | margin-left: 91.66666666666666% 431 | 432 | } 433 | 434 | } 435 | .col-flush-xs { 436 | padding-left: 0; 437 | padding-right: 0 438 | 439 | } 440 | @media (min-width: 480px) { 441 | .col-flush-sm { 442 | padding-left: 0; 443 | padding-right: 0 444 | 445 | } 446 | 447 | } 448 | @media (min-width: 720px) { 449 | .col-flush-md { 450 | padding-left: 0; 451 | padding-right: 0 452 | 453 | } 454 | 455 | } 456 | @media (min-width: 960px) { 457 | .col-flush-lg { 458 | padding-left: 0; 459 | padding-right: 0 460 | 461 | } 462 | 463 | } 464 | @media (min-width: 1200px) { 465 | .col-flush-xl { 466 | padding-left: 0; 467 | padding-right: 0 468 | 469 | } 470 | 471 | } 472 | @media (min-width: 1600px) { 473 | .col-flush-tv { 474 | padding-left: 0; 475 | padding-right: 0 476 | 477 | } 478 | 479 | } 480 | -------------------------------------------------------------------------------- /test/visual/etsy.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | etsy 5 | 6 | 21 | 22 | 23 | 24 |
25 |

etsy

26 |
27 | 28 |
29 |

30 | widths 31 |

32 |
33 | 34 |
35 |
36 |
37 | .col-xs-1 38 |
39 |
40 |
41 |
42 | .col-xs-11 43 |
44 |
45 |
46 | 47 |
48 |
49 |
50 | .col-xs-2 51 |
52 |
53 |
54 |
55 | .col-xs-10 56 |
57 |
58 |
59 | 60 |
61 |
62 |
63 | .col-xs-3 64 |
65 |
66 |
67 |
68 | .col-xs-9 69 |
70 |
71 |
72 | 73 |
74 |
75 |
76 | .col-xs-4 77 |
78 |
79 |
80 |
81 | .col-xs-8 82 |
83 |
84 |
85 | 86 |
87 |
88 |
89 | .col-xs-5 90 |
91 |
92 |
93 |
94 | .col-xs-7 95 |
96 |
97 |
98 | 99 |
100 |
101 |
102 | .col-xs-6 103 |
104 |
105 |
106 |
107 | .col-xs-6 108 |
109 |
110 |
111 | 112 |
113 |
114 |
115 | .col-xs-7 116 |
117 |
118 |
119 |
120 | .col-xs-5 121 |
122 |
123 |
124 | 125 |
126 |
127 |
128 | .col-xs-8 129 |
130 |
131 |
132 |
133 | .col-xs-4 134 |
135 |
136 |
137 | 138 |
139 |
140 |
141 | .col-xs-9 142 |
143 |
144 |
145 |
146 | .col-xs-3 147 |
148 |
149 |
150 | 151 |
152 |
153 |
154 | .col-xs-10 155 |
156 |
157 |
158 |
159 | .col-xs-2 160 |
161 |
162 |
163 | 164 |
165 |
166 |
167 | .col-xs-11 168 |
169 |
170 |
171 |
172 | .col-xs-1 173 |
174 |
175 |
176 | 177 |
178 |
179 | 180 |
181 |

182 | wrapping 183 |

184 |
185 |
186 | 187 |
188 |
189 | .col-xs-4 190 |
191 |
192 | 193 |
194 |
195 | .col-xs-4 196 |
197 |
198 | 199 |
200 |
201 | .col-xs-4 202 |
203 |
204 | 205 |
206 |
207 | .col-xs-4 208 |
209 |
210 | 211 |
212 |
213 | .col-xs-4 214 |
215 |
216 | 217 |
218 |
219 | .col-xs-4 220 |
221 |
222 | 223 |
224 |
225 | .col-xs-4 226 |
227 |
228 | 229 |
230 |
231 | .col-xs-4 232 |
233 |
234 | 235 |
236 |
237 | .col-xs-4 238 |
239 |
240 | 241 |
242 |
243 | .col-xs-4 244 |
245 |
246 | 247 |
248 |
249 | .col-xs-4 250 |
251 |
252 | 253 |
254 |
255 | .col-xs-4 256 |
257 |
258 | 259 |
260 |
261 |
262 | 263 |
264 |

265 | nesting 266 |

267 |
268 |
269 | 270 |
271 |
272 | .col-xs-6 273 |
274 | 275 |
276 |
277 | .col-xs-6 278 |
279 |
280 | 281 |
282 |
283 | .col-xs-6 284 |
285 |
286 | 287 |
288 |
289 |
290 | 291 |
292 |
293 | .col-xs-6 294 |
295 | 296 |
297 |
298 | .col-xs-6 299 |
300 |
301 | 302 |
303 |
304 | .col-xs-6 305 |
306 |
307 | 308 |
309 |
310 |
311 | 312 |
313 |
314 |
315 | 316 | 317 |
318 |

319 | flush 320 |

321 |
322 |
323 | 324 |
327 |
328 | .col-xs-3 329 |
330 |
331 | 332 |
335 |
336 | .col-xs-3 337 |
338 |
339 | 340 |
343 |
344 | .col-xs-3 345 |
346 |
347 | 348 |
351 |
352 | .col-xs-3 353 |
354 |
355 | 356 |
357 |
358 |
359 | 360 |
361 |

362 | heights 363 |

364 |
365 |
366 | 367 |
368 |
369 | .col-xs-3 370 | 371 |
372 |
373 | 374 |
375 |
376 | .col-xs-3 377 |
tall column
378 |
379 |
380 | 381 |
382 |
383 | .col-xs-3 384 | 385 |
386 |
387 | 388 |
389 |
390 | .col-xs-3 391 |
tall column
392 |
393 |
394 | 395 |
396 |
397 |
398 | 399 | 400 | 401 | -------------------------------------------------------------------------------- /test/visual/index-template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | 17 | 18 | 19 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /test/visual/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | 17 | 18 | 19 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /test/visual/minimal-stats.json: -------------------------------------------------------------------------------- 1 | { 2 | "selectors": 13, 3 | "declarations": 17, 4 | "properties": [ 5 | "float", 6 | "boxSizing", 7 | "paddingLeft", 8 | "paddingRight", 9 | "minHeight", 10 | "width" 11 | ], 12 | "mediaQueries": [], 13 | "float": { 14 | "total": 1, 15 | "unique": 1 16 | }, 17 | "boxSizing": { 18 | "total": 1, 19 | "unique": 1 20 | }, 21 | "paddingLeft": { 22 | "total": 1, 23 | "unique": 1 24 | }, 25 | "paddingRight": { 26 | "total": 1, 27 | "unique": 1 28 | }, 29 | "minHeight": { 30 | "total": 1, 31 | "unique": 1 32 | }, 33 | "width": { 34 | "total": 12, 35 | "unique": 12 36 | }, 37 | "idSelectors": 0, 38 | "classSelectors": 13, 39 | "pseudoClassSelectors": 0, 40 | "pseudoElementSelectors": 0 41 | } -------------------------------------------------------------------------------- /test/visual/minimal.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | autogrid 4 | v1.0.5 5 | 6 | */ 7 | 8 | 9 | .col { float: left; box-sizing: border-box; padding-left: 32px; padding-right: 32px; min-height: 1px 10 | 11 | } 12 | .col-1 { width: 8.333333333333332% } 13 | .col-2 { width: 16.666666666666664% } 14 | .col-3 { width: 25% } 15 | .col-4 { width: 33.33333333333333% } 16 | .col-5 { width: 41.66666666666667% } 17 | .col-6 { width: 50% } 18 | .col-7 { width: 58.333333333333336% } 19 | .col-8 { width: 66.66666666666666% } 20 | .col-9 { width: 75% } 21 | .col-10 { width: 83.33333333333334% } 22 | .col-11 { width: 91.66666666666666% } 23 | .col-12 { width: 100% } 24 | -------------------------------------------------------------------------------- /test/visual/minimal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | minimal 5 | 6 | 21 | 22 | 23 | 24 |
25 |

minimal

26 |
27 | 28 |
29 |

30 | widths 31 |

32 |
33 | 34 |
35 |
36 |
37 | .col-1 38 |
39 |
40 |
41 |
42 | .col-11 43 |
44 |
45 |
46 | 47 |
48 |
49 |
50 | .col-2 51 |
52 |
53 |
54 |
55 | .col-10 56 |
57 |
58 |
59 | 60 |
61 |
62 |
63 | .col-3 64 |
65 |
66 |
67 |
68 | .col-9 69 |
70 |
71 |
72 | 73 |
74 |
75 |
76 | .col-4 77 |
78 |
79 |
80 |
81 | .col-8 82 |
83 |
84 |
85 | 86 |
87 |
88 |
89 | .col-5 90 |
91 |
92 |
93 |
94 | .col-7 95 |
96 |
97 |
98 | 99 |
100 |
101 |
102 | .col-6 103 |
104 |
105 |
106 |
107 | .col-6 108 |
109 |
110 |
111 | 112 |
113 |
114 |
115 | .col-7 116 |
117 |
118 |
119 |
120 | .col-5 121 |
122 |
123 |
124 | 125 |
126 |
127 |
128 | .col-8 129 |
130 |
131 |
132 |
133 | .col-4 134 |
135 |
136 |
137 | 138 |
139 |
140 |
141 | .col-9 142 |
143 |
144 |
145 |
146 | .col-3 147 |
148 |
149 |
150 | 151 |
152 |
153 |
154 | .col-10 155 |
156 |
157 |
158 |
159 | .col-2 160 |
161 |
162 |
163 | 164 |
165 |
166 |
167 | .col-11 168 |
169 |
170 |
171 |
172 | .col-1 173 |
174 |
175 |
176 | 177 |
178 |
179 | 180 |
181 |

182 | wrapping 183 |

184 |
185 |
186 | 187 |
188 |
189 | .col-4 190 |
191 |
192 | 193 |
194 |
195 | .col-4 196 |
197 |
198 | 199 |
200 |
201 | .col-4 202 |
203 |
204 | 205 |
206 |
207 | .col-4 208 |
209 |
210 | 211 |
212 |
213 | .col-4 214 |
215 |
216 | 217 |
218 |
219 | .col-4 220 |
221 |
222 | 223 |
224 |
225 | .col-4 226 |
227 |
228 | 229 |
230 |
231 | .col-4 232 |
233 |
234 | 235 |
236 |
237 | .col-4 238 |
239 |
240 | 241 |
242 |
243 | .col-4 244 |
245 |
246 | 247 |
248 |
249 | .col-4 250 |
251 |
252 | 253 |
254 |
255 | .col-4 256 |
257 |
258 | 259 |
260 |
261 |
262 | 263 |
264 |

265 | nesting 266 |

267 |
268 |
269 | 270 |
271 |
272 | .col-6 273 |
274 | 275 |
276 |
277 | .col-6 278 |
279 |
280 | 281 |
282 |
283 | .col-6 284 |
285 |
286 | 287 |
288 |
289 |
290 | 291 |
292 |
293 | .col-6 294 |
295 | 296 |
297 |
298 | .col-6 299 |
300 |
301 | 302 |
303 |
304 | .col-6 305 |
306 |
307 | 308 |
309 |
310 |
311 | 312 |
313 |
314 |
315 | 316 | 317 |
318 |

319 | flush 320 |

321 |
322 |
323 | 324 |
327 |
328 | .col-3 329 |
330 |
331 | 332 |
335 |
336 | .col-3 337 |
338 |
339 | 340 |
343 |
344 | .col-3 345 |
346 |
347 | 348 |
351 |
352 | .col-3 353 |
354 |
355 | 356 |
357 |
358 |
359 | 360 |
361 |

362 | heights 363 |

364 |
365 |
366 | 367 |
368 |
369 | .col-3 370 | 371 |
372 |
373 | 374 |
375 |
376 | .col-3 377 |
tall column
378 |
379 |
380 | 381 |
382 |
383 | .col-3 384 | 385 |
386 |
387 | 388 |
389 |
390 | .col-3 391 |
tall column
392 |
393 |
394 | 395 |
396 |
397 |
398 | 399 | 400 | 401 | -------------------------------------------------------------------------------- /test/visual/suitcss-stats.json: -------------------------------------------------------------------------------- 1 | { 2 | "selectors": 54, 3 | "declarations": 96, 4 | "properties": [ 5 | "marginLeft", 6 | "marginRight", 7 | "fontSize", 8 | "textAlign", 9 | "display", 10 | "margin", 11 | "padding", 12 | "verticalAlign", 13 | "width", 14 | "boxSizing", 15 | "paddingLeft", 16 | "paddingRight", 17 | "minHeight" 18 | ], 19 | "mediaQueries": [ 20 | "(minWidth:40em)", 21 | "(minWidth:52em)", 22 | "(minWidth:64em)" 23 | ], 24 | "marginLeft": { 25 | "total": 1, 26 | "unique": 1 27 | }, 28 | "marginRight": { 29 | "total": 1, 30 | "unique": 1 31 | }, 32 | "fontSize": { 33 | "total": 5, 34 | "unique": 2 35 | }, 36 | "textAlign": { 37 | "total": 5, 38 | "unique": 1 39 | }, 40 | "display": { 41 | "total": 4, 42 | "unique": 1 43 | }, 44 | "margin": { 45 | "total": 4, 46 | "unique": 1 47 | }, 48 | "padding": { 49 | "total": 4, 50 | "unique": 1 51 | }, 52 | "verticalAlign": { 53 | "total": 4, 54 | "unique": 1 55 | }, 56 | "width": { 57 | "total": 52, 58 | "unique": 12 59 | }, 60 | "boxSizing": { 61 | "total": 4, 62 | "unique": 1 63 | }, 64 | "paddingLeft": { 65 | "total": 4, 66 | "unique": 1 67 | }, 68 | "paddingRight": { 69 | "total": 4, 70 | "unique": 1 71 | }, 72 | "minHeight": { 73 | "total": 4, 74 | "unique": 1 75 | }, 76 | "idSelectors": 0, 77 | "classSelectors": 54, 78 | "pseudoClassSelectors": 0, 79 | "pseudoElementSelectors": 0 80 | } -------------------------------------------------------------------------------- /test/visual/suitcss.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | autogrid 4 | v1.0.5 5 | 6 | */ 7 | 8 | 9 | .Grid { 10 | margin-left: -20px; 11 | margin-right: -20px 12 | 13 | } 14 | .Grid { 15 | font-size: 0; 16 | text-align: left 17 | 18 | } 19 | .Grid-cell { 20 | display: inline-block; 21 | font-size: 1rem; 22 | margin: 0; 23 | padding: 0; 24 | text-align: left; 25 | vertical-align: top; 26 | width: 100%; 27 | box-sizing: border-box; 28 | padding-left: 20px; 29 | padding-right: 20px; 30 | min-height: 1px 31 | 32 | } 33 | @media (min-width: 40em) { 34 | .Grid-cell-sm { 35 | display: inline-block; 36 | font-size: 1rem; 37 | margin: 0; 38 | padding: 0; 39 | text-align: left; 40 | vertical-align: top; 41 | width: 100%; 42 | box-sizing: border-box; 43 | padding-left: 20px; 44 | padding-right: 20px; 45 | min-height: 1px 46 | 47 | } 48 | 49 | } 50 | @media (min-width: 52em) { 51 | .Grid-cell-md { 52 | display: inline-block; 53 | font-size: 1rem; 54 | margin: 0; 55 | padding: 0; 56 | text-align: left; 57 | vertical-align: top; 58 | width: 100%; 59 | box-sizing: border-box; 60 | padding-left: 20px; 61 | padding-right: 20px; 62 | min-height: 1px 63 | 64 | } 65 | 66 | } 67 | @media (min-width: 64em) { 68 | .Grid-cell-lg { 69 | display: inline-block; 70 | font-size: 1rem; 71 | margin: 0; 72 | padding: 0; 73 | text-align: left; 74 | vertical-align: top; 75 | width: 100%; 76 | box-sizing: border-box; 77 | padding-left: 20px; 78 | padding-right: 20px; 79 | min-height: 1px 80 | 81 | } 82 | 83 | } 84 | .Grid-cell-1 { width: 8.333333333333332% } 85 | .Grid-cell-2 { width: 16.666666666666664% } 86 | .Grid-cell-3 { width: 25% } 87 | .Grid-cell-4 { width: 33.33333333333333% } 88 | .Grid-cell-5 { width: 41.66666666666667% } 89 | .Grid-cell-6 { width: 50% } 90 | .Grid-cell-7 { width: 58.333333333333336% } 91 | .Grid-cell-8 { width: 66.66666666666666% } 92 | .Grid-cell-9 { width: 75% } 93 | .Grid-cell-10 { width: 83.33333333333334% } 94 | .Grid-cell-11 { width: 91.66666666666666% } 95 | .Grid-cell-12 { width: 100% } 96 | @media (min-width: 40em) { 97 | .Grid-cell-sm-1 { width: 8.333333333333332% } 98 | .Grid-cell-sm-2 { width: 16.666666666666664% } 99 | .Grid-cell-sm-3 { width: 25% } 100 | .Grid-cell-sm-4 { width: 33.33333333333333% } 101 | .Grid-cell-sm-5 { width: 41.66666666666667% } 102 | .Grid-cell-sm-6 { width: 50% } 103 | .Grid-cell-sm-7 { width: 58.333333333333336% } 104 | .Grid-cell-sm-8 { width: 66.66666666666666% } 105 | .Grid-cell-sm-9 { width: 75% } 106 | .Grid-cell-sm-10 { width: 83.33333333333334% } 107 | .Grid-cell-sm-11 { width: 91.66666666666666% } 108 | .Grid-cell-sm-12 { width: 100% } 109 | 110 | } 111 | @media (min-width: 52em) { 112 | .Grid-cell-md-1 { width: 8.333333333333332% } 113 | .Grid-cell-md-2 { width: 16.666666666666664% } 114 | .Grid-cell-md-3 { width: 25% } 115 | .Grid-cell-md-4 { width: 33.33333333333333% } 116 | .Grid-cell-md-5 { width: 41.66666666666667% } 117 | .Grid-cell-md-6 { width: 50% } 118 | .Grid-cell-md-7 { width: 58.333333333333336% } 119 | .Grid-cell-md-8 { width: 66.66666666666666% } 120 | .Grid-cell-md-9 { width: 75% } 121 | .Grid-cell-md-10 { width: 83.33333333333334% } 122 | .Grid-cell-md-11 { width: 91.66666666666666% } 123 | .Grid-cell-md-12 { width: 100% } 124 | 125 | } 126 | @media (min-width: 64em) { 127 | .Grid-cell-lg-1 { width: 8.333333333333332% } 128 | .Grid-cell-lg-2 { width: 16.666666666666664% } 129 | .Grid-cell-lg-3 { width: 25% } 130 | .Grid-cell-lg-4 { width: 33.33333333333333% } 131 | .Grid-cell-lg-5 { width: 41.66666666666667% } 132 | .Grid-cell-lg-6 { width: 50% } 133 | .Grid-cell-lg-7 { width: 58.333333333333336% } 134 | .Grid-cell-lg-8 { width: 66.66666666666666% } 135 | .Grid-cell-lg-9 { width: 75% } 136 | .Grid-cell-lg-10 { width: 83.33333333333334% } 137 | .Grid-cell-lg-11 { width: 91.66666666666666% } 138 | .Grid-cell-lg-12 { width: 100% } 139 | 140 | } 141 | -------------------------------------------------------------------------------- /test/visual/suitcss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | suitcss 5 | 6 | 21 | 22 | 23 | 24 |
25 |

suitcss

26 |
27 | 28 |
29 |

30 | widths 31 |

32 |
33 | 34 |
35 |
36 |
37 | .Grid-cell-1 38 |
39 |
40 |
41 |
42 | .Grid-cell-11 43 |
44 |
45 |
46 | 47 |
48 |
49 |
50 | .Grid-cell-2 51 |
52 |
53 |
54 |
55 | .Grid-cell-10 56 |
57 |
58 |
59 | 60 |
61 |
62 |
63 | .Grid-cell-3 64 |
65 |
66 |
67 |
68 | .Grid-cell-9 69 |
70 |
71 |
72 | 73 |
74 |
75 |
76 | .Grid-cell-4 77 |
78 |
79 |
80 |
81 | .Grid-cell-8 82 |
83 |
84 |
85 | 86 |
87 |
88 |
89 | .Grid-cell-5 90 |
91 |
92 |
93 |
94 | .Grid-cell-7 95 |
96 |
97 |
98 | 99 |
100 |
101 |
102 | .Grid-cell-6 103 |
104 |
105 |
106 |
107 | .Grid-cell-6 108 |
109 |
110 |
111 | 112 |
113 |
114 |
115 | .Grid-cell-7 116 |
117 |
118 |
119 |
120 | .Grid-cell-5 121 |
122 |
123 |
124 | 125 |
126 |
127 |
128 | .Grid-cell-8 129 |
130 |
131 |
132 |
133 | .Grid-cell-4 134 |
135 |
136 |
137 | 138 |
139 |
140 |
141 | .Grid-cell-9 142 |
143 |
144 |
145 |
146 | .Grid-cell-3 147 |
148 |
149 |
150 | 151 |
152 |
153 |
154 | .Grid-cell-10 155 |
156 |
157 |
158 |
159 | .Grid-cell-2 160 |
161 |
162 |
163 | 164 |
165 |
166 |
167 | .Grid-cell-11 168 |
169 |
170 |
171 |
172 | .Grid-cell-1 173 |
174 |
175 |
176 | 177 |
178 |
179 | 180 |
181 |

182 | wrapping 183 |

184 |
185 |
186 | 187 |
188 |
189 | .Grid-cell-4 190 |
191 |
192 | 193 |
194 |
195 | .Grid-cell-4 196 |
197 |
198 | 199 |
200 |
201 | .Grid-cell-4 202 |
203 |
204 | 205 |
206 |
207 | .Grid-cell-4 208 |
209 |
210 | 211 |
212 |
213 | .Grid-cell-4 214 |
215 |
216 | 217 |
218 |
219 | .Grid-cell-4 220 |
221 |
222 | 223 |
224 |
225 | .Grid-cell-4 226 |
227 |
228 | 229 |
230 |
231 | .Grid-cell-4 232 |
233 |
234 | 235 |
236 |
237 | .Grid-cell-4 238 |
239 |
240 | 241 |
242 |
243 | .Grid-cell-4 244 |
245 |
246 | 247 |
248 |
249 | .Grid-cell-4 250 |
251 |
252 | 253 |
254 |
255 | .Grid-cell-4 256 |
257 |
258 | 259 |
260 |
261 |
262 | 263 |
264 |

265 | nesting 266 |

267 |
268 |
269 | 270 |
271 |
272 | .Grid-cell-6 273 |
274 | 275 |
276 |
277 | .Grid-cell-6 278 |
279 |
280 | 281 |
282 |
283 | .Grid-cell-6 284 |
285 |
286 | 287 |
288 |
289 |
290 | 291 |
292 |
293 | .Grid-cell-6 294 |
295 | 296 |
297 |
298 | .Grid-cell-6 299 |
300 |
301 | 302 |
303 |
304 | .Grid-cell-6 305 |
306 |
307 | 308 |
309 |
310 |
311 | 312 |
313 |
314 |
315 | 316 | 317 |
318 |

319 | flush 320 |

321 |
322 |
323 | 324 |
327 |
328 | .Grid-cell-3 329 |
330 |
331 | 332 |
335 |
336 | .Grid-cell-3 337 |
338 |
339 | 340 |
343 |
344 | .Grid-cell-3 345 |
346 |
347 | 348 |
351 |
352 | .Grid-cell-3 353 |
354 |
355 | 356 |
357 |
358 |
359 | 360 |
361 |

362 | heights 363 |

364 |
365 |
366 | 367 |
368 |
369 | .Grid-cell-3 370 | 371 |
372 |
373 | 374 |
375 |
376 | .Grid-cell-3 377 |
tall column
378 |
379 |
380 | 381 |
382 |
383 | .Grid-cell-3 384 | 385 |
386 |
387 | 388 |
389 |
390 | .Grid-cell-3 391 |
tall column
392 |
393 |
394 | 395 |
396 |
397 |
398 | 399 | 400 | 401 | -------------------------------------------------------------------------------- /test/visual/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | <%= name %> 5 | 6 | 21 | 22 | 23 | 24 |
25 |

<%= name %>

26 |
27 | 28 |
29 |

30 | widths 31 |

32 |
33 | <% for (var i = 0; i < columns - 1; i++) { 34 | var second = columns - 2 - i; %> 35 |
36 |
37 |
38 | <%= '.' + cols[i] %> 39 |
40 |
41 |
42 |
43 | <%= '.' + cols[second] %> 44 |
45 |
46 |
47 | <% } %> 48 |
49 |
50 | 51 |
52 |

53 | wrapping 54 |

55 |
56 |
57 | <% for (var i = 0; i < 12; i++) { %> 58 |
59 |
60 | <%= '.' + cols[3] %> 61 |
62 |
63 | <% } %> 64 |
65 |
66 |
67 | 68 |
69 |

70 | nesting 71 |

72 |
73 |
74 | <% for (var i = 0; i < 2; i++) { %> 75 |
76 |
77 | <%= '.' + cols[5] %> 78 |
79 | <% for (var j = 0; j < 2; j++) { %> 80 |
81 |
82 | <%= '.' + cols[5] %> 83 |
84 |
85 | <% } %> 86 |
87 |
88 |
89 | <% } %> 90 |
91 |
92 |
93 | 94 | 95 |
96 |

97 | flush 98 |

99 |
100 |
101 | <% for (var i = 0; i < 4; i++) { %> 102 |
105 |
106 | <%= '.' + cols[2] %> 107 |
108 |
109 | <% } %> 110 |
111 |
112 |
113 | 114 |
115 |

116 | heights 117 |

118 |
119 |
120 | <% for (var i = 0; i < 4; i++) { %> 121 |
122 |
123 | <%= '.' + cols[2] %> 124 | <%= i%2 ? '
tall column
' : '' %> 125 |
126 |
127 | <% } %> 128 |
129 |
130 |
131 | 132 | 133 | 134 | --------------------------------------------------------------------------------