├── .editorconfig ├── .gitignore ├── .npmignore ├── .sass-lint.yml ├── .stylintrc ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── gride.scss ├── gride.styl ├── index.js ├── logo.png ├── package.json ├── src ├── scss │ ├── grid │ │ ├── col.scss │ │ ├── config.scss │ │ ├── row.scss │ │ └── span.scss │ ├── gride.scss │ └── utilities │ │ ├── debug.scss │ │ └── offset.scss └── styl │ ├── grid │ ├── col.styl │ ├── config.styl │ ├── row.styl │ └── span.styl │ ├── gride.styl │ └── utilities │ ├── debug.styl │ └── offset.styl └── test ├── fixtures ├── col.scss ├── col.styl ├── debug.scss ├── debug.styl ├── expected-scss │ ├── col.css │ ├── debug.css │ ├── offset.css │ ├── row.css │ └── span.css ├── expected-stylus │ ├── col.css │ ├── debug.css │ ├── offset.css │ ├── row.css │ └── span.css ├── offset.scss ├── offset.styl ├── row.scss ├── row.styl ├── span.scss └── span.styl └── test.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | insert_final_newline = true 8 | trim_trailing_whitespace = true 9 | end_of_line = lf 10 | indent_style = spaces 11 | indent_size = 2 -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | *.pid.lock 11 | 12 | # Directory for instrumented libs generated by jscoverage/JSCover 13 | lib-cov 14 | 15 | # Coverage directory used by tools like istanbul 16 | coverage 17 | 18 | # nyc test coverage 19 | .nyc_output 20 | 21 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 22 | .grunt 23 | 24 | # node-waf configuration 25 | .lock-wscript 26 | 27 | # Compiled binary addons (http://nodejs.org/api/addons.html) 28 | build/Release 29 | 30 | # Dependency directories 31 | node_modules/ 32 | jspm_packages 33 | 34 | # Optional npm cache directory 35 | .npm 36 | 37 | # Optional eslint cache 38 | .eslintcache 39 | 40 | # Optional REPL history 41 | .node_repl_history 42 | 43 | # Output of 'npm pack' 44 | *.tgz 45 | 46 | # Yarn Integrity file 47 | .yarn-integrity 48 | 49 | 50 | # User-specific stuff: 51 | .idea/workspace.xml 52 | .idea/tasks.xml 53 | 54 | # Sensitive or high-churn files: 55 | .idea/dataSources/ 56 | .idea/dataSources.ids 57 | .idea/dataSources.xml 58 | .idea/dataSources.local.xml 59 | .idea/sqlDataSources.xml 60 | .idea/dynamic.xml 61 | .idea/uiDesigner.xml 62 | 63 | # Gradle: 64 | .idea/gradle.xml 65 | .idea/libraries 66 | 67 | # Mongo Explorer plugin: 68 | .idea/mongoSettings.xml 69 | 70 | ## File-based project format: 71 | *.iws 72 | 73 | ## Plugin-specific files: 74 | 75 | # IntelliJ 76 | /out/ 77 | 78 | # mpeltonen/sbt-idea plugin 79 | .idea_modules/ 80 | 81 | # JIRA plugin 82 | atlassian-ide-plugin.xml 83 | 84 | # Crashlytics plugin (for Android Studio and IntelliJ) 85 | com_crashlytics_export_strings.xml 86 | crashlytics.properties 87 | crashlytics-build.properties 88 | fabric.properties 89 | 90 | ### WebStorm Patch ### 91 | # Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721 92 | 93 | # *.iml 94 | # modules.xml 95 | # .idea/misc.xml 96 | # *.ipr 97 | 98 | # End of https://www.gitignore.io/api/webstorm 99 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | test/ 2 | .editorconfig 3 | .sass-lint.yml 4 | .stylintrc 5 | CONTRIBUTING.md 6 | logo.png 7 | -------------------------------------------------------------------------------- /.sass-lint.yml: -------------------------------------------------------------------------------- 1 | files: 2 | include: 'src/scss/**/*.s+(a|c)ss' 3 | rules: 4 | # Extends 5 | extends-before-mixins: 2 6 | extends-before-declarations: 2 7 | placeholder-in-extend: 0 8 | 9 | # Mixins 10 | mixins-before-declarations: 2 11 | 12 | # Line Spacing 13 | one-declaration-per-line: 2 14 | empty-line-between-blocks: 2 15 | single-line-per-selector: 2 16 | 17 | # Disallows 18 | no-attribute-selectors: 0 19 | no-color-hex: 0 20 | no-color-keywords: 1 21 | no-color-literals: 0 22 | no-combinators: 0 23 | no-css-comments: 0 24 | no-debug: 1 25 | no-disallowed-properties: 0 26 | no-duplicate-properties: 1 27 | no-empty-rulesets: 1 28 | no-extends: 1 29 | no-ids: 2 30 | no-important: 1 31 | no-invalid-hex: 1 32 | no-mergeable-selectors: 1 33 | no-misspelled-properties: 2 34 | no-qualifying-elements: 2 35 | no-trailing-whitespace: 2 36 | no-trailing-zero: 2 37 | no-transition-all: 0 38 | no-universal-selectors: 0 39 | no-url-domains: 2 40 | no-url-protocols: 2 41 | no-vendor-prefixes: 2 42 | no-warn: 1 43 | property-units: 0 44 | 45 | # Nesting 46 | declarations-before-nesting: 0 47 | force-attribute-nesting: 0 48 | force-element-nesting: 0 49 | force-pseudo-nesting: 2 50 | 51 | # Name Formats 52 | class-name-format: 0 53 | function-name-format: 0 54 | id-name-format: 0 55 | mixin-name-format: 0 56 | placeholder-name-format: 0 57 | variable-name-format: 0 58 | 59 | # Style Guide 60 | attribute-quotes: 1 61 | bem-depth: 0 62 | border-zero: 2 63 | brace-style: 2 64 | clean-import-paths: 0 65 | empty-args: 0 66 | hex-length: 2 67 | hex-notation: 2 68 | indentation: 2 69 | leading-zero: 2 70 | max-line-length: 0 71 | max-file-line-count: 0 72 | nesting-depth: 0 73 | property-sort-order: 2 74 | pseudo-element: 0 75 | quotes: 2 76 | shorthand-values: 0 77 | url-quotes: 2 78 | variable-for-property: 79 | - 2 80 | - 81 | include: true 82 | zero-unit: 2 83 | 84 | # Inner Spacing 85 | space-after-comma: 0 86 | space-before-colon: 2 87 | space-after-colon: 2 88 | space-before-brace: 2 89 | space-before-bang: 2 90 | space-after-bang: 2 91 | space-between-parens: 2 92 | space-around-operator: 2 93 | 94 | # Final Items 95 | trailing-semicolon: 2 96 | final-newline: 2 97 | -------------------------------------------------------------------------------- /.stylintrc: -------------------------------------------------------------------------------- 1 | { 2 | "blocks": "false", 3 | "brackets": { 4 | "expect": "never", 5 | "error": true 6 | }, 7 | "colons": { 8 | "expect": "never", 9 | "error": true 10 | }, 11 | "colors": { 12 | "expect": "always", 13 | "error": true 14 | }, 15 | "commaSpace": false, 16 | "commentSpace": { 17 | "expect": "always", 18 | "error": true 19 | }, 20 | "cssLiteral": "never", 21 | "customProperties": [], 22 | "depthLimit": { 23 | "expect": 3, 24 | "error": true 25 | }, 26 | "duplicates": true, 27 | "efficient": { 28 | "expect": "always", 29 | "error": true 30 | }, 31 | "exclude": false, 32 | "extendPref": { 33 | "expect": "@extends", 34 | "error": true 35 | }, 36 | "globalDupe": true, 37 | "groupOutputByFile": true, 38 | "indentPref": { 39 | "expect": 2, 40 | "error": true 41 | }, 42 | "leadingZero": { 43 | "expect": "never", 44 | "error": true 45 | }, 46 | "maxErrors": false, 47 | "maxWarnings": false, 48 | "mixed": false, 49 | "mixins": [], 50 | "namingConvention": { 51 | "expect": "lowercase-dash", 52 | "error": true 53 | }, 54 | "namingConventionStrict": false, 55 | "none": { 56 | "expect": "never", 57 | "error": true 58 | }, 59 | "noImportant": true, 60 | "parenSpace": { 61 | "expect": "never", 62 | "error": true 63 | }, 64 | "placeholders": { 65 | "expect": "always", 66 | "error": true 67 | }, 68 | "prefixVarsWithDollar": { 69 | "expect": "always", 70 | "error": true 71 | }, 72 | "quotePref": { 73 | "expect": "single", 74 | "error": true 75 | }, 76 | "reporterOptions": { 77 | "columns": ["lineData", "severity", "description", "rule"], 78 | "columnSplitter": " ", 79 | "showHeaders": false, 80 | "truncate": true 81 | }, 82 | "semicolons": { 83 | "expect": "never", 84 | "error": true 85 | }, 86 | "sortOrder": { 87 | "expect": "alphabetical", 88 | "error": true 89 | }, 90 | "stackedProperties": { 91 | "expect": "never", 92 | "error": true 93 | }, 94 | "trailingWhitespace": { 95 | "expect": "never", 96 | "error": true 97 | }, 98 | "universal": false, 99 | "valid": true, 100 | "zeroUnits": { 101 | "expect": "never", 102 | "error": true 103 | }, 104 | "zIndexNormalize": false 105 | } 106 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Gride 2 | 3 | You want to help? You rock! Now, take a moment to be sure your contributions make sense to everyone else. 4 | 5 | ## Reporting Issues 6 | 7 | Found a problem? Want a new feature? 8 | 9 | - See if your issue or idea has [already been reported]. 10 | - Provide a [reduced test case] or a [live example]. 11 | 12 | Remember, a bug is a _demonstrable problem_ caused by _our_ code. 13 | 14 | ## Submitting Pull Requests 15 | 16 | Pull requests are the greatest contributions, so be sure they are focused in scope, and do avoid unrelated commits. 17 | 18 | 1. To begin, [fork this project], clone your fork, and add our upstream. 19 | 20 | ```bash 21 | # Clone your fork of the repo into the current directory 22 | git clone https://github.com//gride 23 | 24 | # Navigate to the newly cloned directory 25 | cd gride 26 | 27 | # Assign the original repo to a remote called "upstream" 28 | git remote add upstream https://github.com/guuibayer/gride 29 | 30 | # Install the tools necessary for development 31 | npm install 32 | ``` 33 | 34 | 2. Create a branch for your feature or fix: 35 | 36 | ```bash 37 | # Move into a new branch for a feature 38 | git checkout -b feature/thing 39 | ``` 40 | ```bash 41 | # Move into a new branch for a fix 42 | git checkout -b fix/something 43 | ``` 44 | 45 | 3. Push your branch up to your fork: 46 | 47 | ```bash 48 | # Push a feature branch 49 | git push origin feature/thing 50 | ``` 51 | ```bash 52 | # Push a fix branch 53 | git push origin fix/something 54 | ``` 55 | 56 | 4. Now [open a pull request] with a clear title and description. 57 | 58 | [already been reported]: issues 59 | [fork this project]: fork 60 | [live example]: http://codepen.io/pen 61 | [open a pull request]: https://help.github.com/articles/using-pull-requests/ 62 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # License 2 | The MIT License (MIT) 3 | 4 | Copyright (c) 2016 Guilherme Bayer 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions:

12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software.

14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | 5 |

6 | 7 | 8 | 9 |

10 | 11 |

12 | Gride is a stylus and scss, simple and flexible grid system, gride use simple units percent or fractions, use only display inline-block and vertical-align, not floats, positions or flexbox. 13 |

14 | 15 | ## Documentation 16 | See the [documentation](https://guuibayer.github.io/gride) for all methods and others. 17 | 18 | ## Contributing 19 | Gride in construction, help build it! 20 | 21 | See the [projects](https://github.com/guuibayer/gride/projects/1). 22 | 23 | Want to contribute? [Follow these recommendations](https://github.com/guuibayer/gride/blob/master/CONTRIBUTING.md). 24 | 25 | ## Changelog 26 | See [here](https://github.com/guuibayer/gride/releases) the last releases of gride. 27 | 28 | ## License 29 | [MIT License](https://github.com/guuibayer/gride/blob/master/LICENSE.md) 30 | -------------------------------------------------------------------------------- /gride.scss: -------------------------------------------------------------------------------- 1 | @import 'src/scss/gride'; 2 | -------------------------------------------------------------------------------- /gride.styl: -------------------------------------------------------------------------------- 1 | @import 'src/styl/gride' 2 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | , pkg = require('./package.json'); 3 | 4 | var gridePath = path.join(__dirname, 'src/styl/gride') 5 | 6 | exports = module.exports = function (opts) { 7 | var implicit = (opts && opts.implicit == false) ? false : true; 8 | 9 | return function (style) { 10 | style.include(__dirname); 11 | 12 | if (implicit) { 13 | style.import(gridePath); 14 | } 15 | } 16 | } 17 | 18 | exports.libname = pkg.name; 19 | exports.path = gridePath; 20 | exports.version = pkg.version; -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamgbayer/gride/81dc1bce413bd22247ae428dd82a002466c47cef/logo.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gride", 3 | "version": "0.3.2", 4 | "description": "Gride is a stylus and scss, simple and flexible grid system", 5 | "main": "./index.js", 6 | "scripts": { 7 | "test": "tape -r babel-register test/*.js", 8 | "test:watch": "tape-watch -r babel-register test/*.js -p tap-diff", 9 | "lint:styl": "stylint ./src/styl/ -c .stylintrc", 10 | "lint:scss": "sass-lint -c .sass-lint.yml -v", 11 | "lint": "npm run lint:styl && npm run lint:scss", 12 | "precommit": "npm run lint && npm test", 13 | "prepush": "npm run lint && npm test" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/guuibayer/gride.git" 18 | }, 19 | "babel": { 20 | "presets": [ 21 | "es2015" 22 | ], 23 | "sourceMaps": "inline" 24 | }, 25 | "keywords": [ 26 | "grid", 27 | "stylus", 28 | "scss", 29 | "flexible", 30 | "grid system", 31 | "utility" 32 | ], 33 | "author": "guuibayer", 34 | "license": "MIT", 35 | "bugs": { 36 | "url": "https://github.com/guuibayer/gride/issues" 37 | }, 38 | "homepage": "https://github.com/guuibayer/gride#readme", 39 | "devDependencies": { 40 | "babel-core": "^6.18.2", 41 | "babel-preset-es2015": "^6.18.0", 42 | "babel-register": "^6.18.0", 43 | "css-parse": "^2.0.0", 44 | "husky": "^0.12.0", 45 | "node-sass": "^4.0.0", 46 | "sass-lint": "^1.10.2", 47 | "stylint": "^1.5.9", 48 | "stylus": "^0.54.5", 49 | "tap-diff": "^0.1.1", 50 | "tape": "^4.6.3", 51 | "tape-watch": "^2.2.4" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/scss/grid/col.scss: -------------------------------------------------------------------------------- 1 | // * 2 | // * Column 3 | // * @mixin col($column, $align: (middle, top, bottom), $padding: $grid-column-gutter) 4 | // * 5 | @mixin col($column, $align: top, $padding: $grid-column-gutter) { 6 | display: inline-block; 7 | font-size: initial; 8 | padding: 0 $padding; 9 | vertical-align: $align; 10 | width: $column * 100%; 11 | } 12 | -------------------------------------------------------------------------------- /src/scss/grid/config.scss: -------------------------------------------------------------------------------- 1 | $grid-column-gutter: 15px; 2 | $grid-row-gutter: 0; 3 | $grid-row-width: 1024px; 4 | -------------------------------------------------------------------------------- /src/scss/grid/row.scss: -------------------------------------------------------------------------------- 1 | // * 2 | // * Row 3 | // * @mixin row($width: $grid-row-width, $padding: $grid-row-gutter) 4 | // * 5 | @mixin row($width: $grid-row-width, $padding: $grid-row-gutter) { 6 | display: block; 7 | font-size: 0; 8 | margin: 0 auto; 9 | max-width: $width; 10 | padding: 0 $padding; 11 | width: 100%; 12 | } 13 | -------------------------------------------------------------------------------- /src/scss/grid/span.scss: -------------------------------------------------------------------------------- 1 | // * 2 | // * Span 3 | // * @mixin span($column, $align: (middle, top, bottom)) 4 | // * 5 | @mixin span($column, $align: top) { 6 | display: inline-block; 7 | font-size: initial; 8 | padding: 0; 9 | vertical-align: $align; 10 | width: $column * 100%; 11 | } 12 | -------------------------------------------------------------------------------- /src/scss/gride.scss: -------------------------------------------------------------------------------- 1 | @import 'utilities/debug'; 2 | @import 'utilities/offset'; 3 | 4 | @import 'grid/config'; 5 | @import 'grid/row'; 6 | @import 'grid/span'; 7 | @import 'grid/col'; 8 | -------------------------------------------------------------------------------- /src/scss/utilities/debug.scss: -------------------------------------------------------------------------------- 1 | @mixin debug($color: #e74c3c) { 2 | * { 3 | background-color: rgba($color, .2); 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/scss/utilities/offset.scss: -------------------------------------------------------------------------------- 1 | // * 2 | // * Offset 3 | // * @mixin offset($column, $side: (left, right)) 4 | // * 5 | 6 | @mixin offset($column, $side) { 7 | margin-#{$side}: $column * 100%; 8 | } 9 | -------------------------------------------------------------------------------- /src/styl/grid/col.styl: -------------------------------------------------------------------------------- 1 | /** 2 | * Collumn 3 | * col($column, $align = (middle, top, bottom), $padding = $grid-column-gutter) 4 | */ 5 | col($column, $align = top, $padding = $grid-column-gutter) 6 | display inline-block 7 | font-size initial 8 | padding 0 $padding 9 | vertical-align $align 10 | width $column * 100% 11 | -------------------------------------------------------------------------------- /src/styl/grid/config.styl: -------------------------------------------------------------------------------- 1 | $grid-column-gutter = 15px 2 | $grid-row-gutter = 0 3 | $grid-row-width = 1024px 4 | -------------------------------------------------------------------------------- /src/styl/grid/row.styl: -------------------------------------------------------------------------------- 1 | /** 2 | * Row 3 | * row($width = $grid-row-width, $padding = $grid-row-gutter) 4 | */ 5 | row($width = $grid-row-width, $padding = $grid-row-gutter) 6 | display block 7 | font-size 0 8 | margin 0 auto 9 | max-width $width 10 | padding 0 $padding 11 | width 100% 12 | -------------------------------------------------------------------------------- /src/styl/grid/span.styl: -------------------------------------------------------------------------------- 1 | /** 2 | * Span 3 | * span($column, $align = (middle, top, bottom)) 4 | */ 5 | span($column, $align = top) 6 | display inline-block 7 | font-size initial 8 | padding 0 9 | vertical-align $align 10 | width $column * 100% 11 | -------------------------------------------------------------------------------- /src/styl/gride.styl: -------------------------------------------------------------------------------- 1 | @import 'utilities/debug' 2 | @import 'utilities/offset' 3 | 4 | @import 'grid/config' 5 | @import 'grid/row' 6 | @import 'grid/span' 7 | @import 'grid/col' 8 | -------------------------------------------------------------------------------- /src/styl/utilities/debug.styl: -------------------------------------------------------------------------------- 1 | /** 2 | * Debug 3 | * debug($color) 4 | */ 5 | debug($color = #e74c3c) 6 | * 7 | background-color alpha($color, 20%) 8 | -------------------------------------------------------------------------------- /src/styl/utilities/offset.styl: -------------------------------------------------------------------------------- 1 | /** 2 | * Offset 3 | * offset($column, $side = (left, right)) 4 | */ 5 | offset($column, $side) 6 | margin-{$side} $column * 100% -------------------------------------------------------------------------------- /test/fixtures/col.scss: -------------------------------------------------------------------------------- 1 | @import 'gride.scss'; 2 | 3 | .col-1 { 4 | @include col(1); 5 | } 6 | 7 | .col-align-middle { 8 | @include col(1, middle); 9 | } 10 | 11 | .col-align-bottom { 12 | @include col(1, bottom); 13 | } 14 | -------------------------------------------------------------------------------- /test/fixtures/col.styl: -------------------------------------------------------------------------------- 1 | .col-1 2 | col(1) 3 | 4 | .col-align-middle 5 | col(1, middle) 6 | 7 | .col-align-bottom 8 | col(1, bottom) -------------------------------------------------------------------------------- /test/fixtures/debug.scss: -------------------------------------------------------------------------------- 1 | @import 'gride.scss'; 2 | @include debug(#fff); 3 | @include debug(); 4 | -------------------------------------------------------------------------------- /test/fixtures/debug.styl: -------------------------------------------------------------------------------- 1 | debug(#fff) 2 | debug() 3 | -------------------------------------------------------------------------------- /test/fixtures/expected-scss/col.css: -------------------------------------------------------------------------------- 1 | .col-1 { 2 | display: inline-block; 3 | font-size: initial; 4 | padding: 0 15px; 5 | vertical-align: top; 6 | width: 100%; 7 | } 8 | 9 | .col-align-middle { 10 | display: inline-block; 11 | font-size: initial; 12 | padding: 0 15px; 13 | vertical-align: middle; 14 | width: 100%; 15 | } 16 | 17 | .col-align-bottom { 18 | display: inline-block; 19 | font-size: initial; 20 | padding: 0 15px; 21 | vertical-align: bottom; 22 | width: 100%; 23 | } 24 | -------------------------------------------------------------------------------- /test/fixtures/expected-scss/debug.css: -------------------------------------------------------------------------------- 1 | * { 2 | background-color: rgba(255, 255, 255, 0.2); 3 | } 4 | 5 | * { 6 | background-color: rgba(231, 76, 60, 0.2); 7 | } 8 | -------------------------------------------------------------------------------- /test/fixtures/expected-scss/offset.css: -------------------------------------------------------------------------------- 1 | .offset-left { 2 | margin-left: 20%; 3 | } 4 | 5 | .offset-right { 6 | margin-right: 20%; 7 | } 8 | -------------------------------------------------------------------------------- /test/fixtures/expected-scss/row.css: -------------------------------------------------------------------------------- 1 | .row { 2 | display: block; 3 | font-size: 0; 4 | margin: 0 auto; 5 | max-width: 1024px; 6 | padding: 0 0; 7 | width: 100%; 8 | } 9 | 10 | .row-custom-width { 11 | display: block; 12 | font-size: 0; 13 | margin: 0 auto; 14 | max-width: 300px; 15 | padding: 0 0; 16 | width: 100%; 17 | } 18 | 19 | .row-custom-gutter { 20 | display: block; 21 | font-size: 0; 22 | margin: 0 auto; 23 | max-width: 1024px; 24 | padding: 0 12px; 25 | width: 100%; 26 | } 27 | 28 | .row-custom-gutter-and-width { 29 | display: block; 30 | font-size: 0; 31 | margin: 0 auto; 32 | max-width: 300px; 33 | padding: 0 12px; 34 | width: 100%; 35 | } 36 | -------------------------------------------------------------------------------- /test/fixtures/expected-scss/span.css: -------------------------------------------------------------------------------- 1 | .span { 2 | display: inline-block; 3 | font-size: initial; 4 | padding: 0; 5 | vertical-align: top; 6 | width: 100%; 7 | } 8 | 9 | .span-align-middle { 10 | display: inline-block; 11 | font-size: initial; 12 | padding: 0; 13 | vertical-align: middle; 14 | width: 100%; 15 | } 16 | 17 | .span-align-bottom { 18 | display: inline-block; 19 | font-size: initial; 20 | padding: 0; 21 | vertical-align: bottom; 22 | width: 100%; 23 | } 24 | -------------------------------------------------------------------------------- /test/fixtures/expected-stylus/col.css: -------------------------------------------------------------------------------- 1 | .col-1 { 2 | display: inline-block; 3 | font-size: initial; 4 | padding: 0 15px; 5 | vertical-align: top; 6 | width: 100%; 7 | } 8 | .col-align-middle { 9 | display: inline-block; 10 | font-size: initial; 11 | padding: 0 15px; 12 | vertical-align: middle; 13 | width: 100%; 14 | } 15 | .col-align-bottom { 16 | display: inline-block; 17 | font-size: initial; 18 | padding: 0 15px; 19 | vertical-align: bottom; 20 | width: 100%; 21 | } 22 | -------------------------------------------------------------------------------- /test/fixtures/expected-stylus/debug.css: -------------------------------------------------------------------------------- 1 | * { 2 | background-color: rgba(255,255,255,0.2); 3 | } 4 | * { 5 | background-color: rgba(231,76,60,0.2); 6 | } 7 | -------------------------------------------------------------------------------- /test/fixtures/expected-stylus/offset.css: -------------------------------------------------------------------------------- 1 | .offset-left { 2 | margin-left: 20%; 3 | } 4 | .offset-right { 5 | margin-right: 20%; 6 | } -------------------------------------------------------------------------------- /test/fixtures/expected-stylus/row.css: -------------------------------------------------------------------------------- 1 | .row { 2 | display: block; 3 | font-size: 0; 4 | margin: 0 auto; 5 | max-width: 1024px; 6 | padding: 0 0; 7 | width: 100%; 8 | } 9 | .row-custom-width { 10 | display: block; 11 | font-size: 0; 12 | margin: 0 auto; 13 | max-width: 300px; 14 | padding: 0 0; 15 | width: 100%; 16 | } 17 | .row-custom-gutter { 18 | display: block; 19 | font-size: 0; 20 | margin: 0 auto; 21 | max-width: 1024px; 22 | padding: 0 12px; 23 | width: 100%; 24 | } 25 | .row-custom-gutter-and-width { 26 | display: block; 27 | font-size: 0; 28 | margin: 0 auto; 29 | max-width: 300px; 30 | padding: 0 12px; 31 | width: 100%; 32 | } 33 | -------------------------------------------------------------------------------- /test/fixtures/expected-stylus/span.css: -------------------------------------------------------------------------------- 1 | .span { 2 | display: inline-block; 3 | font-size: initial; 4 | padding: 0; 5 | vertical-align: top; 6 | width: 100%; 7 | } 8 | .span-align-middle { 9 | display: inline-block; 10 | font-size: initial; 11 | padding: 0; 12 | vertical-align: middle; 13 | width: 100%; 14 | } 15 | .span-align-bottom { 16 | display: inline-block; 17 | font-size: initial; 18 | padding: 0; 19 | vertical-align: bottom; 20 | width: 100%; 21 | } 22 | -------------------------------------------------------------------------------- /test/fixtures/offset.scss: -------------------------------------------------------------------------------- 1 | @import 'gride.scss'; 2 | 3 | .offset-left { 4 | @include offset(2 / 10, left); 5 | } 6 | 7 | .offset-right { 8 | @include offset(2 / 10, right); 9 | } 10 | -------------------------------------------------------------------------------- /test/fixtures/offset.styl: -------------------------------------------------------------------------------- 1 | .offset-left 2 | offset(2 / 10, left) 3 | 4 | .offset-right 5 | offset(2 / 10, right) 6 | -------------------------------------------------------------------------------- /test/fixtures/row.scss: -------------------------------------------------------------------------------- 1 | @import 'gride.scss'; 2 | 3 | .row { 4 | @include row(); 5 | } 6 | 7 | .row-custom-width { 8 | @include row(300px); 9 | } 10 | 11 | .row-custom-gutter { 12 | @include row($grid-row-width, 12px); 13 | } 14 | 15 | .row-custom-gutter-and-width { 16 | @include row(300px, 12px); 17 | } 18 | -------------------------------------------------------------------------------- /test/fixtures/row.styl: -------------------------------------------------------------------------------- 1 | .row 2 | row() 3 | 4 | .row-custom-width 5 | row(300px) 6 | 7 | .row-custom-gutter 8 | row(, 12px) 9 | 10 | .row-custom-gutter-and-width 11 | row(300px, 12px) 12 | -------------------------------------------------------------------------------- /test/fixtures/span.scss: -------------------------------------------------------------------------------- 1 | @import 'gride.scss'; 2 | 3 | .span { 4 | @include span(1); 5 | } 6 | 7 | .span-align-middle { 8 | @include span(1, middle); 9 | } 10 | 11 | .span-align-bottom { 12 | @include span(1, bottom); 13 | } 14 | -------------------------------------------------------------------------------- /test/fixtures/span.styl: -------------------------------------------------------------------------------- 1 | .span 2 | span(1) 3 | 4 | .span-align-middle 5 | span(1, middle) 6 | 7 | .span-align-bottom 8 | span(1, bottom) 9 | 10 | -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | import fs from 'fs' 2 | import parse from 'css-parse' 3 | import path from 'path' 4 | import sass from 'node-sass' 5 | import stylus from 'stylus' 6 | import test from 'tape' 7 | import gride from '../index' 8 | import {StringDecoder} from 'string_decoder' 9 | 10 | const testPath = path.join(__dirname, './fixtures') 11 | 12 | function getStylusOutput(file) { 13 | let actualOutput = '' 14 | 15 | stylus(fs.readFileSync(path.join(testPath, file), 'utf8')) 16 | .use(gride()) 17 | .render((err, css) => { 18 | if (err) { 19 | actualOutput = err 20 | } 21 | actualOutput = css 22 | }) 23 | 24 | return JSON.stringify(parse(actualOutput)) 25 | } 26 | 27 | function getSassOutput(file) { 28 | let out = sass.renderSync({ 29 | file: path.join(testPath, file), 30 | includePaths: [path.resolve(__dirname, '/..')], 31 | outputStyle: 'expanded' 32 | }) 33 | const decoder = new StringDecoder('utf8'); 34 | const actualOutput = decoder.write(new Buffer(out.css)) 35 | 36 | return JSON.stringify(parse(actualOutput)) 37 | } 38 | 39 | function getExpectedOutput(file, extension) { 40 | const expectedOutput = 41 | fs.readFileSync(path.join(testPath, 'expected-' + extension, file), 'utf8') 42 | 43 | return JSON.stringify(parse(expectedOutput)) 44 | } 45 | 46 | test('col', t => { 47 | const actualStylus = getStylusOutput('col.styl') 48 | const actualSass = getSassOutput('col.scss') 49 | const expectedStylus = getExpectedOutput('col.css', 'stylus') 50 | const expectedSass = getExpectedOutput('col.css', 'scss') 51 | 52 | t.equal(actualStylus, expectedStylus) 53 | t.equal(actualSass, expectedSass) 54 | t.end() 55 | }) 56 | 57 | test('debug', t => { 58 | const actualStylus = getStylusOutput('debug.styl') 59 | const expectedStylus = getExpectedOutput('debug.css', 'stylus') 60 | const actualSass = getSassOutput('debug.scss') 61 | const expectedSass = getExpectedOutput('debug.css', 'scss') 62 | 63 | t.equal(actualStylus, expectedStylus) 64 | t.equal(actualSass, expectedSass) 65 | t.end() 66 | }) 67 | 68 | test('offset', t => { 69 | const actualStylus = getStylusOutput('offset.styl') 70 | const actualSass = getSassOutput('offset.scss') 71 | const expectedStylus = getExpectedOutput('offset.css', 'stylus') 72 | const expectedSass = getExpectedOutput('offset.css', 'scss') 73 | 74 | t.equal(actualStylus, expectedStylus) 75 | t.equal(actualSass, expectedSass) 76 | t.end() 77 | }) 78 | 79 | test('row', t => { 80 | const actualStylus = getStylusOutput('row.styl') 81 | const actualSass = getSassOutput('row.scss') 82 | const expectedStylus = getExpectedOutput('row.css', 'stylus') 83 | const expectedSass = getExpectedOutput('row.css', 'scss') 84 | 85 | t.equal(actualStylus, expectedStylus) 86 | t.equal(actualSass, expectedSass) 87 | t.end() 88 | }) 89 | 90 | test('span stylus', t => { 91 | const actualStylus = getStylusOutput('span.styl') 92 | const actualSass = getSassOutput('span.scss') 93 | const expectedStylus = getExpectedOutput('span.css', 'stylus') 94 | const expectedSass = getExpectedOutput('span.css', 'scss') 95 | 96 | t.equal(actualStylus, expectedStylus) 97 | t.equal(actualSass, expectedSass) 98 | t.end() 99 | }) 100 | --------------------------------------------------------------------------------