├── .csscomb.dist.json ├── .editorconfig ├── .gitignore ├── .npmignore ├── CHANGELOG.md ├── Gemfile ├── LICENSE ├── README.md ├── _sass └── mcgriddle │ ├── _mcgriddle.scss │ ├── functions │ ├── _column-width.scss │ ├── _gutter-width.scss │ ├── _helpers.scss │ └── _shift-width.scss │ ├── mixins │ ├── _columns.scss │ ├── _container-display.scss │ ├── _container.scss │ ├── _grid-collapse.scss │ ├── _grid-direction.scss │ ├── _grid-flexbox.scss │ ├── _grid-reset.scss │ └── _shift.scss │ └── settings │ └── _grid.scss ├── bower.json ├── bs-config.js ├── config.postcss.json ├── eyeglass-exports.js ├── gulpfile.js ├── index.js ├── lib ├── mcgriddle.rb └── mcgriddle │ └── version.rb ├── mcgriddle.gemspec └── package.json /.csscomb.dist.json: -------------------------------------------------------------------------------- 1 | { 2 | "exclude": [ 3 | ".git/**", 4 | "node_modules/**", 5 | "bower_components/**" 6 | ], 7 | "always-semicolon": true, 8 | "color-case": "lower", 9 | "color-shorthand": true, 10 | "element-case": "lower", 11 | "eof-newline": true, 12 | "leading-zero": false, 13 | "remove-empty-rulesets": true, 14 | "unitless-zero": true, 15 | "sort-order-fallback": "abc", 16 | "sort-order": [ 17 | "font", 18 | "font-family", 19 | "font-size", 20 | "font-weight", 21 | "font-style", 22 | "font-variant", 23 | "font-size-adjust", 24 | "font-stretch", 25 | "font-effect", 26 | "font-emphasize", 27 | "font-emphasize-position", 28 | "font-emphasize-style", 29 | "font-smooth", 30 | "line-height" 31 | "position", 32 | "z-index", 33 | "top", 34 | "right", 35 | "bottom", 36 | "left" 37 | "display", 38 | "visibility", 39 | "float", 40 | "clear", 41 | "overflow", 42 | "overflow-x", 43 | "overflow-y", 44 | "-ms-overflow-x", 45 | "-ms-overflow-y", 46 | "clip", 47 | "zoom", 48 | "flex-direction", 49 | "flex-order", 50 | "flex-pack", 51 | "flex-align" 52 | "-webkit-box-sizing", 53 | "-moz-box-sizing", 54 | "box-sizing", 55 | "width", 56 | "min-width", 57 | "max-width", 58 | "height", 59 | "min-height", 60 | "max-height", 61 | "margin", 62 | "margin-top", 63 | "margin-right", 64 | "margin-bottom", 65 | "margin-left", 66 | "padding", 67 | "padding-top", 68 | "padding-right", 69 | "padding-bottom", 70 | "padding-left" 71 | "table-layout", 72 | "empty-cells", 73 | "caption-side", 74 | "border-spacing", 75 | "border-collapse", 76 | "list-style", 77 | "list-style-position", 78 | "list-style-type", 79 | "list-style-image" 80 | "content", 81 | "quotes", 82 | "counter-reset", 83 | "counter-increment", 84 | "resize", 85 | "cursor", 86 | "-webkit-user-select", 87 | "-moz-user-select", 88 | "-ms-user-select", 89 | "user-select", 90 | "nav-index", 91 | "nav-up", 92 | "nav-right", 93 | "nav-down", 94 | "nav-left", 95 | "-webkit-transition", 96 | "-moz-transition", 97 | "-ms-transition", 98 | "-o-transition", 99 | "transition", 100 | "-webkit-transition-delay", 101 | "-moz-transition-delay", 102 | "-ms-transition-delay", 103 | "-o-transition-delay", 104 | "transition-delay", 105 | "-webkit-transition-timing-function", 106 | "-moz-transition-timing-function", 107 | "-ms-transition-timing-function", 108 | "-o-transition-timing-function", 109 | "transition-timing-function", 110 | "-webkit-transition-duration", 111 | "-moz-transition-duration", 112 | "-ms-transition-duration", 113 | "-o-transition-duration", 114 | "transition-duration", 115 | "-webkit-transition-property", 116 | "-moz-transition-property", 117 | "-ms-transition-property", 118 | "-o-transition-property", 119 | "transition-property", 120 | "-webkit-transform", 121 | "-moz-transform", 122 | "-ms-transform", 123 | "-o-transform", 124 | "transform", 125 | "-webkit-transform-origin", 126 | "-moz-transform-origin", 127 | "-ms-transform-origin", 128 | "-o-transform-origin", 129 | "transform-origin", 130 | "-webkit-animation", 131 | "-moz-animation", 132 | "-ms-animation", 133 | "-o-animation", 134 | "animation", 135 | "-webkit-animation-name", 136 | "-moz-animation-name", 137 | "-ms-animation-name", 138 | "-o-animation-name", 139 | "animation-name", 140 | "-webkit-animation-duration", 141 | "-moz-animation-duration", 142 | "-ms-animation-duration", 143 | "-o-animation-duration", 144 | "animation-duration", 145 | "-webkit-animation-play-state", 146 | "-moz-animation-play-state", 147 | "-ms-animation-play-state", 148 | "-o-animation-play-state", 149 | "animation-play-state", 150 | "-webkit-animation-timing-function", 151 | "-moz-animation-timing-function", 152 | "-ms-animation-timing-function", 153 | "-o-animation-timing-function", 154 | "animation-timing-function", 155 | "-webkit-animation-delay", 156 | "-moz-animation-delay", 157 | "-ms-animation-delay", 158 | "-o-animation-delay", 159 | "animation-delay", 160 | "-webkit-animation-iteration-count", 161 | "-moz-animation-iteration-count", 162 | "-ms-animation-iteration-count", 163 | "-o-animation-iteration-count", 164 | "animation-iteration-count", 165 | "-webkit-animation-direction", 166 | "-moz-animation-direction", 167 | "-ms-animation-direction", 168 | "-o-animation-direction", 169 | "animation-direction", 170 | "text-align", 171 | "-webkit-text-align-last", 172 | "-moz-text-align-last", 173 | "-ms-text-align-last", 174 | "text-align-last", 175 | "vertical-align", 176 | "white-space", 177 | "text-decoration", 178 | "text-emphasis", 179 | "text-emphasis-color", 180 | "text-emphasis-style", 181 | "text-emphasis-position", 182 | "text-indent", 183 | "-ms-text-justify", 184 | "text-justify", 185 | "letter-spacing", 186 | "word-spacing", 187 | "-ms-writing-mode", 188 | "text-outline", 189 | "text-transform", 190 | "text-wrap", 191 | "text-overflow", 192 | "-ms-text-overflow", 193 | "text-overflow-ellipsis", 194 | "text-overflow-mode", 195 | "-ms-word-wrap", 196 | "word-wrap", 197 | "word-break", 198 | "-ms-word-break", 199 | "-moz-tab-size", 200 | "-o-tab-size", 201 | "tab-size", 202 | "-webkit-hyphens", 203 | "-moz-hyphens", 204 | "hyphens", 205 | "pointer-events" 206 | "opacity", 207 | "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity", 208 | "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha", 209 | "-ms-interpolation-mode", 210 | "color", 211 | "border", 212 | "border-width", 213 | "border-style", 214 | "border-color", 215 | "border-top", 216 | "border-top-width", 217 | "border-top-style", 218 | "border-top-color", 219 | "border-right", 220 | "border-right-width", 221 | "border-right-style", 222 | "border-right-color", 223 | "border-bottom", 224 | "border-bottom-width", 225 | "border-bottom-style", 226 | "border-bottom-color", 227 | "border-left", 228 | "border-left-width", 229 | "border-left-style", 230 | "border-left-color", 231 | "-webkit-border-radius", 232 | "-moz-border-radius", 233 | "border-radius", 234 | "-webkit-border-top-left-radius", 235 | "-moz-border-radius-topleft", 236 | "border-top-left-radius", 237 | "-webkit-border-top-right-radius", 238 | "-moz-border-radius-topright", 239 | "border-top-right-radius", 240 | "-webkit-border-bottom-right-radius", 241 | "-moz-border-radius-bottomright", 242 | "border-bottom-right-radius", 243 | "-webkit-border-bottom-left-radius", 244 | "-moz-border-radius-bottomleft", 245 | "border-bottom-left-radius", 246 | "-webkit-border-image", 247 | "-moz-border-image", 248 | "-o-border-image", 249 | "border-image", 250 | "-webkit-border-image-source", 251 | "-moz-border-image-source", 252 | "-o-border-image-source", 253 | "border-image-source", 254 | "-webkit-border-image-slice", 255 | "-moz-border-image-slice", 256 | "-o-border-image-slice", 257 | "border-image-slice", 258 | "-webkit-border-image-width", 259 | "-moz-border-image-width", 260 | "-o-border-image-width", 261 | "border-image-width", 262 | "-webkit-border-image-outset", 263 | "-moz-border-image-outset", 264 | "-o-border-image-outset", 265 | "border-image-outset", 266 | "-webkit-border-image-repeat", 267 | "-moz-border-image-repeat", 268 | "-o-border-image-repeat", 269 | "border-image-repeat", 270 | "outline", 271 | "outline-width", 272 | "outline-style", 273 | "outline-color", 274 | "outline-offset", 275 | "background", 276 | "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader", 277 | "background-color", 278 | "background-image", 279 | "background-repeat", 280 | "background-attachment", 281 | "background-position", 282 | "background-position-x", 283 | "-ms-background-position-x", 284 | "background-position-y", 285 | "-ms-background-position-y", 286 | "-webkit-background-clip", 287 | "-moz-background-clip", 288 | "background-clip", 289 | "background-origin", 290 | "-webkit-background-size", 291 | "-moz-background-size", 292 | "-o-background-size", 293 | "background-size", 294 | "box-decoration-break", 295 | "-webkit-box-shadow", 296 | "-moz-box-shadow", 297 | "box-shadow", 298 | "filter:progid:DXImageTransform.Microsoft.gradient", 299 | "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient", 300 | "text-shadow" 301 | ] 302 | } 303 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_size = 2 7 | indent_style = space 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *gem 2 | .DS_Store 3 | bower_components 4 | node_modules 5 | css 6 | yarn.lock 7 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | bower.json 2 | Gemfile 3 | lib/ 4 | mcgriddle.gemspec 5 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | Changelog for McGriddle. 4 | 5 | ## [0.5.0] - 11/30/2016 6 | - Add [Eyeglass](http://eyeglass.rocks/) support. 7 | 8 | ## [0.4.2] - 11/29/2016 9 | - Minor release-related and documentation tweaks. 10 | 11 | ## [0.4.1] - 11/28/2016 12 | - Public release. 13 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | gemspec 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Jonathan Suh (jonsuh.com) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # McGriddle 2 | 3 | McGriddle is a get-out-of-your-way Sass library designed to help you build based a grid system. Suports [flexbox](#grid-flexbox) (the grid is based on floats, by default). Set up your grid system… 4 | 5 | ```scss 6 | $grid-width : 64em; 7 | $grid-gutter : 1.875em; 8 | $grid-columns: 12; 9 | ``` 10 | 11 | …and you’re ready to build. 12 | 13 | ```html 14 |
15 |
16 |
17 |
18 | ``` 19 | 20 | ```scss 21 | .container { @include container; } 22 | .article { @include columns(8); } 23 | .sidebar { @include columns(4, last); } 24 | ``` 25 | 26 | ## Installation 27 | 28 | 1. Install via [npm](https://www.npmjs.com/package/mcgriddle), yarn or [Bower](http://bower.io). 29 | ``` 30 | npm install mcgriddle 31 | 32 | yarn add mcgriddle 33 | 34 | bower install mcgriddle 35 | ``` 36 | 37 | Also available as a [Ruby gem](https://rubygems.org/gems/mcgriddle) to use within your Rails application—see [below](#install-for-ruby-on-rails) for more information. 38 | 39 | Or to manually install it, [download](https://github.com/jonsuh/mcgriddle/archive/master.zip) and unzip the source files. Then copy the files from the `_sass/mcgriddle` directory into your project. 40 | 41 | 2. Import the `_mcgriddle.scss` file in your Sass manifest file: 42 | 43 | ```scss 44 | @import "mcgriddle"; 45 | ``` 46 | 47 | ### Install for Ruby on Rails 48 | 49 | 1. Add McGriddle to your Gemfile. 50 | 51 | ``` 52 | gem 'mcgriddle' 53 | ``` 54 | 55 | 2. Run `bundle install`. 56 | 3. Include McGriddle by using Sass’s native `@import`* 57 | 58 | ```scss 59 | // application.scss 60 | @import "mcgriddle"; 61 | ``` 62 | 63 | \* [More information](https://blog.pivotal.io/pivotal-labs/labs/structure-your-sass-files-with-import) on why Sass’s native `@import` + why you should ditch Sprockets directives altogether. 64 | 65 | ## Usage 66 | 67 | First, create a settings file (`_mcgriddle-settings.scss`) and import it _before_ importing McGriddle. 68 | 69 | ```scss 70 | @import "mcgriddle-settings"; 71 | @import "mcgriddle"; 72 | ``` 73 | 74 | Then edit the settings file to customize/override default grid settings. The following is a list of settings and its defaults: 75 | 76 | ```scss 77 | $grid-width : 64em; 78 | $grid-gutter : 1.875em; 79 | $grid-columns : 12; 80 | $grid-minor : 1/3; 81 | $grid-collapse : false; 82 | $grid-rtl : false; 83 | 84 | $grid-flexbox : false; 85 | $grid-flexbox-wrap : wrap; 86 | $grid-flexbox-justify: flex-start; 87 | ``` 88 | 89 | --- 90 | 91 | ### Read the [documentation](https://jonsuh.com/mcgriddle/) for a full list and explanation of settings, mixins and functions. 92 | 93 | --- 94 | 95 | Features: 96 | 97 | 1. [Containers](#container) 98 | 2. [Columns](#columns) 99 | 3. [Collapse gutters](#grid-collapse) 100 | 4. [Flexbox support](#grid-flexbox) 101 | 5. [Right-to-left support](#grid-rtl) 102 | 103 | #### `container()` 104 | 105 | You’ll need a container to wrap the columns in. 106 | 107 | ```scss 108 | .container { 109 | @include container; 110 | } 111 | 112 | // Container with no max width ($grid-width) 113 | .container--full { 114 | @include container(false); 115 | } 116 | ``` 117 | 118 | #### `columns()` 119 | 120 | Then use `columns()` on an element to specify how many columns wide it should be. 121 | 122 | ```scss 123 | .column { 124 | @include columns(8); 125 | } 126 | 127 | .column-decimal { 128 | @include columns(5.6); 129 | } 130 | 131 | // Last column 132 | .column-last { 133 | @include columns(4, last); 134 | } 135 | 136 | // Centered column 137 | .column-center { 138 | @include columns(8, center); 139 | } 140 | 141 | // Relative columns 142 | .column-4-9 { 143 | @include columns(4 of 9); 144 | } 145 | .column-5-9 { 146 | @include columns(5 of 9, last); 147 | } 148 | ``` 149 | 150 | Nest columns by wrapping nested columns in a container. 151 | 152 | ```html 153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 | ``` 163 | 164 | Push an element however many columns with `shift()`. 165 | 166 | ```scss 167 | // Shift a column over 2 columns 168 | .column { 169 | @include columns(6); 170 | @include shift(2); 171 | } 172 | ``` 173 | 174 | #### `$grid-collapse` 175 | 176 | Collapse gutters: `$grid-collapse: true`. (Default is `false`) 177 | 178 | ```scss 179 | $grid-collapse: true; 180 | .container { @include container; } 181 | ``` 182 | 183 | #### `$grid-flexbox` 184 | 185 | Flexbox support (as opposed to floats): `$grid-flexbox: true`. (Default is `false`) 186 | 187 | ```scss 188 | $grid-flexbox: true; 189 | .container { @include container; } 190 | ``` 191 | 192 | #### `$grid-rtl` 193 | 194 | Right-to-left support for RTL languages: `$grid-rtl: true`. (Default is `false`) 195 | 196 | ```scss 197 | $grid-rtl: true; 198 | .container { @include container; } 199 | ``` 200 | 201 | _Be sure to read the [documentation](https://jonsuh.com/mcgriddle/) for a full list of settings, mixins and functions._ 202 | 203 | ## That’s it? 204 | 205 | The documentation is still a work-in-progress, so there are features and functionality that have yet to be properly documented. I also have a couple more features I’d like to build (when and if I decide to), but aside from that… yep, that’s it. 206 | 207 | I originally created McGriddle for me—I wanted something stupid simple and straight forward. Therefore if you’re looking for something more robust, I’d suggest [Bourbon Neat](https://github.com/thoughtbot/neat) or [Susy](http://susy.oddbird.net/). 208 | -------------------------------------------------------------------------------- /_sass/mcgriddle/_mcgriddle.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * McGriddle 3 | * @description 4 | * @author Jonathan Suh @jonsuh 5 | * @site https://jonsuh.com/mcgriddle 6 | * @link https://github.com/jonsuh/mcgriddle 7 | */ 8 | 9 | // Settings 10 | // ================================================== 11 | @import "settings/grid"; 12 | 13 | // Functions 14 | // ================================================== 15 | @import "functions/helpers"; 16 | 17 | @import "functions/gutter-width"; 18 | @import "functions/column-width"; 19 | @import "functions/shift-width"; 20 | 21 | // Mixins 22 | // ================================================== 23 | @import "mixins/grid-collapse"; 24 | @import "mixins/grid-direction"; 25 | @import "mixins/grid-flexbox"; 26 | @import "mixins/grid-reset"; 27 | @import "mixins/container-display"; 28 | 29 | @import "mixins/container"; 30 | @import "mixins/columns"; 31 | @import "mixins/shift"; 32 | -------------------------------------------------------------------------------- /_sass/mcgriddle/functions/_column-width.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Column Width 3 | // ================================================== 4 | @function column-width($_columns: 1, $_percent: true) { 5 | $_grid-columns : $grid-columns; 6 | 7 | $_column-width : $grid-width; 8 | $_column-width-percent: 100%; 9 | 10 | // major or minor 11 | @if $_columns == major or $_columns == minor { 12 | @if $_columns == major { 13 | $_columns: 1 - $grid-minor; 14 | } 15 | @else { 16 | $_columns: $grid-minor; 17 | } 18 | 19 | $_columns: $grid-columns * $_columns; 20 | } 21 | // '#/#' 22 | @else if type-of($_columns) == string { 23 | $_columns : str-replace($_columns, " "); 24 | $_index : str-index($_columns, "/"); 25 | $_index-offset: 1; 26 | 27 | @if $_index == null { 28 | $_index : str-index($_columns, "of"); 29 | $_index-offset: 2; 30 | } 31 | 32 | @if $_index { 33 | $_grid-columns: to-number(str-slice($_columns, $_index + $_index-offset, str-length($_columns))); 34 | $_columns : to-number(str-slice($_columns, 1, $_index - 1)); 35 | } 36 | } 37 | // # of # or # # 38 | @else if type-of($_columns) == list { 39 | @if length($_columns) == 3 { 40 | $_grid-columns: nth($_columns, 3); 41 | } 42 | @else { 43 | $_grid-columns: nth($_columns, 2); 44 | } 45 | 46 | $_columns: nth($_columns, 1); 47 | } 48 | 49 | // calculate column width 50 | @if $grid-collapse == true { 51 | $_column-width: ($grid-width / $_grid-columns) * $_columns; 52 | 53 | @if $_percent == true { 54 | $_column-width-percent: $_column-width * 100% / $grid-width; 55 | } 56 | } 57 | @else { 58 | // $_column-count : ceil($_grid-columns / $_columns); 59 | $_column-count : $_grid-columns / $_columns; 60 | 61 | $_gutter-total-width : $grid-gutter * ($_column-count - 1); 62 | $_grid-remainder-width: $grid-width - $_gutter-total-width; 63 | 64 | $_column-width : $_grid-remainder-width / $_column-count; 65 | 66 | @if $_percent == true { 67 | $_column-width-percent: $_column-width * 100% / $grid-width; 68 | } 69 | } 70 | 71 | // return column width in absolute or percent value 72 | @if $_percent == true { 73 | @return $_column-width-percent; 74 | } 75 | @else { 76 | @return $_column-width; 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /_sass/mcgriddle/functions/_gutter-width.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Gutter Width 3 | // ================================================== 4 | @function gutter-width($_percent: true) { 5 | $_gutter-width-fraction: $grid-gutter / $grid-width; 6 | 7 | @if $_percent == true { 8 | $_gutter-width-percent : $_gutter-width-fraction * 100%; 9 | 10 | @return $_gutter-width-percent; 11 | } 12 | @else { 13 | @return $grid-gutter; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /_sass/mcgriddle/functions/_helpers.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Replace `$search` with `$replace` in `$string` 3 | // @author Hugo Giraudel 4 | // 5 | // @param {String} $string - Initial string 6 | // @param {String} $search - Substring to replace 7 | // @param {String} $replace ('') - New value 8 | // 9 | // @return {String} - Updated string 10 | // 11 | @function str-replace($string, $search, $replace: '') { 12 | $index: str-index($string, $search); 13 | 14 | @if $index { 15 | @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); 16 | } 17 | 18 | @return $string; 19 | } 20 | 21 | // 22 | // String to number converter 23 | // @author Hugo Giraudel 24 | // @access private 25 | // 26 | // @param {String | Number} $value - Value to be parsed 27 | // 28 | // @return {Number} 29 | // 30 | @function to-number($value) { 31 | @if type-of($value) == 'number' { 32 | @return $value; 33 | } @else if type-of($value) != 'string' { 34 | $_: log('Value for `to-number` should be a number or a string.'); 35 | } 36 | 37 | $result: 0; 38 | $digits: 0; 39 | $minus: str-slice($value, 1, 1) == '-'; 40 | $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9); 41 | 42 | @for $i from if($minus, 2, 1) through str-length($value) { 43 | $character: str-slice($value, $i, $i); 44 | 45 | @if not (index(map-keys($numbers), $character) or $character == '.') { 46 | @return to-length(if($minus, -$result, $result), str-slice($value, $i)) 47 | } 48 | 49 | @if $character == '.' { 50 | $digits: 1; 51 | } @else if $digits == 0 { 52 | $result: $result * 10 + map-get($numbers, $character); 53 | } @else { 54 | $digits: $digits * 10; 55 | $result: $result + map-get($numbers, $character) / $digits; 56 | } 57 | } 58 | 59 | @return if($minus, -$result, $result); 60 | } 61 | -------------------------------------------------------------------------------- /_sass/mcgriddle/functions/_shift-width.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Shift Width 3 | // ================================================== 4 | @function shift-width($_columns: 1, $_percent: true) { 5 | $_shift: column-width($_columns, $_percent) + gutter-width($_percent); 6 | 7 | @return $_shift; 8 | } 9 | -------------------------------------------------------------------------------- /_sass/mcgriddle/mixins/_columns.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Columns 3 | // ================================================== 4 | @mixin columns($_columns: 1, $_position: default, $_max-width: false) { 5 | @if $_max-width == max or $_max-width == true { 6 | $_column-width: column-width($_columns, false); 7 | 8 | @if $grid-flexbox == true { 9 | width: 100%; 10 | } 11 | max-width: $_column-width; 12 | } 13 | @else { // $_max-width == default 14 | width: column-width($_columns); 15 | } 16 | 17 | @if $_position == center { 18 | margin-left: auto; 19 | margin-right: auto; 20 | } 21 | @else { 22 | $_float: left; 23 | $_margin: right; 24 | 25 | @if $grid-rtl == true { 26 | $_float: right; 27 | $_margin: left; 28 | } 29 | 30 | @if $_position != last and $grid-collapse == false { 31 | margin-#{$_margin}: gutter-width(); 32 | } 33 | 34 | @if $grid-flexbox == false { 35 | float: $_float; 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /_sass/mcgriddle/mixins/_container-display.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Container Display 3 | // ================================================== 4 | @mixin container-display($_flexbox: default) { 5 | @if $_flexbox == default { 6 | $_flexbox: $grid-flexbox; 7 | } 8 | 9 | @if $_flexbox == true { 10 | width: 100%; 11 | display: flex; 12 | flex-wrap: $grid-flexbox-wrap; 13 | justify-content: $grid-flexbox-justify; 14 | &:after { 15 | display: none; 16 | } 17 | } 18 | @else { 19 | &:after { 20 | content: " "; 21 | display: block; 22 | clear: both; 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /_sass/mcgriddle/mixins/_container.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Container 3 | // ================================================== 4 | @mixin container($_columns: true) { 5 | @include container-display; 6 | 7 | @if type-of($_columns) == number and $_columns > 0 { 8 | max-width: column-width($_columns, false); 9 | } 10 | @else if $_columns == true or $_columns != false { 11 | margin-left: auto; 12 | margin-right: auto; 13 | max-width: $grid-width; 14 | } 15 | 16 | @if $grid-rtl == true { 17 | direction: rtl; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /_sass/mcgriddle/mixins/_grid-collapse.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Grid Collapse 3 | // ================================================== 4 | @mixin grid-collapse($_collapse: default) { 5 | @if $_collapse == default or $_collapse != true { 6 | $_collapse: false; 7 | } 8 | @else if $_collapse == true { 9 | $_collapse: true; 10 | } 11 | 12 | $grid-collapse: $_collapse !global; 13 | } 14 | -------------------------------------------------------------------------------- /_sass/mcgriddle/mixins/_grid-direction.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Grid Direction 3 | // ================================================== 4 | @mixin grid-direction($_rtl: default) { 5 | @if $_rtl == default or $_rtl != rtl { 6 | $_rtl: false; 7 | } 8 | @else if $_rtl == rtl { 9 | $_rtl: true; 10 | } 11 | 12 | $grid-rtl: $_rtl !global; 13 | } 14 | -------------------------------------------------------------------------------- /_sass/mcgriddle/mixins/_grid-flexbox.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Grid Flexbox 3 | // ================================================== 4 | @mixin grid-flexbox($_flexbox: default) { 5 | @if $_flexbox == default or $_flexbox != true { 6 | $_flexbox: false; 7 | } 8 | @else if $_flexbox == true { 9 | $_flexbox: true; 10 | } 11 | 12 | $grid-flexbox: $_flexbox !global; 13 | } 14 | -------------------------------------------------------------------------------- /_sass/mcgriddle/mixins/_grid-reset.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Grid Reset 3 | // ================================================== 4 | @mixin grid-reset { 5 | $grid-collapse: false !global; 6 | $grid-flexbox : false !global; 7 | $grid-rtl : false !global; 8 | } 9 | -------------------------------------------------------------------------------- /_sass/mcgriddle/mixins/_shift.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Shift 3 | // ================================================== 4 | @mixin shift($_columns: 1, $_percent: true) { 5 | $_margin: left; 6 | 7 | @if $grid-rtl == true { 8 | $_margin: right; 9 | } 10 | 11 | $_shift: shift-width($_columns, $_percent); 12 | 13 | margin-#{$_margin}: $_shift; 14 | } 15 | -------------------------------------------------------------------------------- /_sass/mcgriddle/settings/_grid.scss: -------------------------------------------------------------------------------- 1 | // ================================================== 2 | // Settings 3 | // ================================================== 4 | $grid-width : 64em !default; 5 | $grid-gutter : 1.875em !default; 6 | $grid-columns : 12 !default; 7 | $grid-minor : 1/3 !default; 8 | $grid-collapse : false !default; 9 | $grid-rtl : false !default; 10 | 11 | $grid-flexbox : false !default; 12 | $grid-flexbox-wrap : wrap !default; 13 | $grid-flexbox-justify: flex-start !default; 14 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mcgriddle", 3 | "version": "0.5.0", 4 | "description": "A get-out-of-your-way Sass grid library. Supports flexbox.", 5 | "homepage": "https://jonsuh.com/mcgriddle", 6 | "license": "MIT", 7 | "author": { 8 | "name": "Jonathan Suh", 9 | "email": "hello@jonsuh.com", 10 | "url": "https://jonsuh.com/mcgriddle" 11 | }, 12 | "main": "_sass/mcgriddle/_mcgriddle.scss", 13 | "keywords": [ 14 | "css", 15 | "grid", 16 | "flexbox", 17 | "sass", 18 | "scss" 19 | ], 20 | "repository": { 21 | "type": "git", 22 | "url": "https://github.com/jonsuh/mcgriddle.git" 23 | }, 24 | "bugs": { 25 | "url": "https://github.com/jonsuh/mcgriddle/issues" 26 | }, 27 | "ignore": [ 28 | "Gemfile", 29 | "lib/", 30 | "mcgriddle.gemspec", 31 | "package.json", 32 | "yarn.lock" 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /bs-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "server": { 3 | baseDir: "./" 4 | }, 5 | "files": [ 6 | "css/**/*.css" 7 | ], 8 | "browser": "default", 9 | "injectChanges": true, 10 | "online": false, 11 | "open": false, 12 | "port": 3000, 13 | "proxy": false, 14 | "notify": false, 15 | "watchTask": true 16 | }; 17 | -------------------------------------------------------------------------------- /config.postcss.json: -------------------------------------------------------------------------------- 1 | { 2 | "use": ["autoprefixer"], 3 | "autoprefixer": { 4 | "browsers": ["last 2 versions"] 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /eyeglass-exports.js: -------------------------------------------------------------------------------- 1 | var mcgriddle = require("./index"); 2 | 3 | module.exports = function(eyeglass, sass) { 4 | return { 5 | sassDir: mcgriddle.includePaths[0] 6 | }; 7 | }; 8 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var browserSync = require('browser-sync'); 3 | var autoprefixer = require('gulp-autoprefixer'); 4 | var csscomb = require('gulp-csscomb'); 5 | var cssnano = require('gulp-cssnano'); 6 | var notify = require('gulp-notify'); 7 | var plumber = require('gulp-plumber'); 8 | var sass = require('gulp-sass'); 9 | var sourcemaps = require('gulp-sourcemaps'); 10 | 11 | var onError = function(err) { 12 | notify.onError({ 13 | title: "Error", 14 | message: "<%= error %>", 15 | })(err); 16 | this.emit('end'); 17 | }; 18 | 19 | var plumberOptions = { 20 | errorHandler: onError, 21 | }; 22 | 23 | gulp.task('sass', function() { 24 | var postCSSOptions = require('./config.postcss.json'); 25 | var autoprefixerOptions = postCSSOptions.autoprefixer; 26 | 27 | var sassOptions = { 28 | includePaths: [ 29 | 'node_modules/mq-sass/stylesheets', 30 | ] 31 | }; 32 | 33 | return gulp.src('_sass/**/*.scss') 34 | .pipe(plumber(plumberOptions)) 35 | .pipe(sourcemaps.init()) 36 | .pipe(sass(sassOptions)) 37 | .pipe(autoprefixer(autoprefixerOptions)) 38 | .pipe(sourcemaps.write('./')) 39 | .pipe(gulp.dest('css')); 40 | }); 41 | 42 | gulp.task('dist:css', function() { 43 | return gulp.src('css/**/*.css') 44 | .pipe(csscomb('.csscomb.dist.json')) 45 | .pipe(cssnano()) 46 | .pipe(gulp.dest('css')); 47 | }); 48 | 49 | gulp.task('watch', function() { 50 | var browserSyncConfig = require('./bs-config.js'); 51 | 52 | browserSync.init(browserSyncConfig); 53 | 54 | gulp.watch('_sass/**/*.scss', ['sass']); 55 | }); 56 | 57 | gulp.task('build', ['sass']); 58 | 59 | gulp.task('dist', ['build'], function() { 60 | gulp.start('dist:css'); 61 | }); 62 | 63 | gulp.task('default', ['build', 'watch']); 64 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var path = require("path"); 2 | 3 | module.exports = { 4 | includePaths: [ 5 | path.join(__dirname, "_sass/mcgriddle") 6 | ] 7 | }; 8 | -------------------------------------------------------------------------------- /lib/mcgriddle.rb: -------------------------------------------------------------------------------- 1 | dir = File.dirname(__FILE__) 2 | $LOAD_PATH.unshift dir unless $LOAD_PATH.include?(dir) 3 | 4 | unless defined?(Sass) 5 | require 'sass' 6 | end 7 | 8 | module McGriddle 9 | if defined?(Rails) && defined?(Rails::Engine) 10 | class Engine < ::Rails::Engine 11 | 12 | end 13 | end 14 | 15 | mcgriddle_path = File.expand_path("../../_sass/mcgriddle", __FILE__) 16 | ENV["SASS_PATH"] = [ENV["SASS_PATH"], mcgriddle_path].compact.join(File::PATH_SEPARATOR) 17 | end 18 | -------------------------------------------------------------------------------- /lib/mcgriddle/version.rb: -------------------------------------------------------------------------------- 1 | module McGriddle 2 | VERSION = "0.5.0" 3 | end 4 | -------------------------------------------------------------------------------- /mcgriddle.gemspec: -------------------------------------------------------------------------------- 1 | $:.push File.expand_path("../lib", __FILE__) 2 | require "mcgriddle/version" 3 | 4 | Gem::Specification.new do |spec| 5 | spec.name = "mcgriddle" 6 | spec.version = McGriddle::VERSION 7 | spec.platform = Gem::Platform::RUBY 8 | spec.authors = ["Jonathan Suh"] 9 | spec.email = ["hello@jonsuh.com"] 10 | spec.homepage = "https://jonsuh.com/mcgriddle" 11 | spec.summary = "A get-out-of-your-way Sass grid library. Supports flexbox." 12 | spec.description = "A get-out-of-your-way Sass library designed to help you build based a grid system. Supports flexbox." 13 | spec.license = "MIT" 14 | 15 | spec.files = `git ls-files`.split("\n") 16 | spec.require_paths = ["lib"] 17 | end 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mcgriddle", 3 | "version": "0.5.0", 4 | "description": "A get-out-of-your-way Sass grid library. Supports flexbox.", 5 | "homepage": "https://jonsuh.com/mcgriddle", 6 | "license": "MIT", 7 | "author": { 8 | "name": "Jonathan Suh", 9 | "email": "hello@jonsuh.com", 10 | "url": "https://jonsuh.com/mcgriddle" 11 | }, 12 | "main": "index.js", 13 | "eyeglass": { 14 | "needs": "*", 15 | "exports": "eyeglass-exports.js" 16 | }, 17 | "keywords": [ 18 | "css", 19 | "grid", 20 | "flexbox", 21 | "sass", 22 | "scss" 23 | ], 24 | "repository": { 25 | "type": "git", 26 | "url": "https://github.com/jonsuh/mcgriddle.git" 27 | }, 28 | "bugs": { 29 | "url": "https://github.com/jonsuh/mcgriddle/issues" 30 | }, 31 | "dependencies": {}, 32 | "devDependencies": { 33 | "browser-sync": "^2.18.1", 34 | "gulp": "^3.9.0", 35 | "gulp-autoprefixer": "^3.1.1", 36 | "gulp-csscomb": "^3.0.8", 37 | "gulp-cssnano": "^2.1.2", 38 | "gulp-notify": "^2.2.0", 39 | "gulp-plumber": "^1.1.0", 40 | "gulp-sass": "^2.3.2", 41 | "gulp-sourcemaps": "^1.9.0" 42 | } 43 | } 44 | --------------------------------------------------------------------------------