├── .gitignore ├── LICENSE ├── README.md ├── flexiblegs-scss-plus.scss ├── flexiblegs-settings.scss ├── main.scss └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | npm-debug.log 4 | yarn.lock 5 | package-lock.json 6 | npm-shrinkwrap.json 7 | node_modules 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 - Doğukan Güven Nomak 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [flexiblegs-scss-plus](https://dnomak.com/flexiblegs/) 2 | 3 | Flexible Grid System Scss Plus 4 | 5 | ## Install 6 | 7 | ### [Settings download](https://raw.githubusercontent.com/flexiblegs/flexiblegs-scss-plus/master/flexiblegs-settings.scss) 8 | ```scss 9 | $flexiblegs-method: ( 10 | "css" 11 | // "bem" 12 | ); 13 | $flexiblegs-breakpoint: ( 14 | "xl" : "", 15 | "lg" : "(max-width: 1024px)", 16 | "md" : "(max-width: 768px)", 17 | "sm" : "(max-width: 667px)" 18 | ); 19 | $wrap-col: ( 20 | "auto", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 21 | ); 22 | $wrap-prop: ( 23 | "table", 24 | "flexbox", 25 | "normal", 26 | "left", 27 | "center", 28 | "right", 29 | "top", 30 | "middle", 31 | "bottom", 32 | "stretch", 33 | "between", 34 | "around", 35 | "baseline", 36 | "reverse", 37 | "not-reverse" 38 | ); 39 | $col-row: ( 40 | 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 41 | ); 42 | $col-width: (); 43 | $col-prop: ( 44 | "hidden", 45 | "not-hidden", 46 | "first", 47 | "not-first", 48 | "last", 49 | "not-last" 50 | ); 51 | $wrap-gutter: ( 52 | 0, 8, 16, 24, 40 53 | ); 54 | $wrap-outside: ( 55 | 0, 8, 16, 24, 40 56 | ); 57 | 58 | @import "node_modules/flexiblegs-scss/flexiblegs-scss"; 59 | @import "node_modules/flexiblegs-scss-plus/flexiblegs-scss-plus"; 60 | ``` 61 | 62 | ### [npm](https://www.npmjs.com/package/flexiblegs-scss-plus) 63 | ```bash 64 | $ npm install --save flexiblegs-scss flexiblegs-scss-plus 65 | ``` 66 | 67 | ## Build 68 | ```bash 69 | $ git clone git@github.com:flexiblegs/flexiblegs-scss-plus.git 70 | $ cd flexiblegs-scss-plus 71 | $ npm install 72 | $ npm run build 73 | ``` 74 | 75 | ## License 76 | Flexible Grid System is licensed under the [MIT](LICENSE) license. 77 | -------------------------------------------------------------------------------- /flexiblegs-scss-plus.scss: -------------------------------------------------------------------------------- 1 | /*! Flexible Grid System 5.6.0 | Scss Plus | MIT License | dnomak.com/flexiblegs */ 2 | 3 | .wrap { 4 | @include wrap; 5 | } 6 | 7 | @each $flexiblegs-method-val in $flexiblegs-method { 8 | @if $flexiblegs-method-val=="css" { 9 | .col { 10 | @include col; 11 | } 12 | } 13 | @else if $flexiblegs-method-val=="bem" { 14 | .wrap__col { 15 | @include col; 16 | } 17 | } 18 | @each $flexiblegs-breakpoint-key, $flexiblegs-breakpoint-val in $flexiblegs-breakpoint { 19 | @if $flexiblegs-breakpoint-val=="" { 20 | @each $wrap-col-val in $wrap-col { 21 | @if $wrap-col-val=="auto" { 22 | @if $flexiblegs-method-val=="css" { 23 | .#{$flexiblegs-breakpoint-key}-#{$wrap-col-val} { 24 | @include wrap($prop: $wrap-col-val); 25 | } 26 | } 27 | @else if $flexiblegs-method-val=="bem" { 28 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-col-val} { 29 | @include wrap($prop: $wrap-col-val); 30 | } 31 | } 32 | } 33 | @else { 34 | @if $flexiblegs-method-val=="css" { 35 | .#{$flexiblegs-breakpoint-key}-#{$wrap-col-val} { 36 | @include wrap($prop: $wrap-col-val); 37 | } 38 | } 39 | @else if $flexiblegs-method-val=="bem" { 40 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-col-val} { 41 | @include wrap($prop: $wrap-col-val); 42 | } 43 | } 44 | } 45 | } 46 | @each $wrap-prop-val in $wrap-prop { 47 | @if $wrap-prop-val=="table" { 48 | @if $flexiblegs-method-val=="css" { 49 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 50 | @include wrap($prop: $wrap-prop-val); 51 | } 52 | } 53 | @else if $flexiblegs-method-val=="bem" { 54 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 55 | @include wrap($prop: $wrap-prop-val); 56 | } 57 | } 58 | } 59 | @else if $wrap-prop-val=="flexbox" { 60 | @if $flexiblegs-method-val=="css" { 61 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 62 | @include wrap($prop: $wrap-prop-val); 63 | } 64 | } 65 | @else if $flexiblegs-method-val=="bem" { 66 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 67 | @include wrap($prop: $wrap-prop-val); 68 | } 69 | } 70 | } 71 | @else if $wrap-prop-val=="normal" { 72 | @if $flexiblegs-method-val=="css" { 73 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 74 | @include wrap($prop: $wrap-prop-val); 75 | } 76 | } 77 | @else if $flexiblegs-method-val=="bem" { 78 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 79 | @include wrap($prop: $wrap-prop-val); 80 | } 81 | } 82 | } 83 | @else if $wrap-prop-val=="left" { 84 | @if $flexiblegs-method-val=="css" { 85 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 86 | @include wrap($prop: $wrap-prop-val); 87 | } 88 | } 89 | @else if $flexiblegs-method-val=="bem" { 90 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 91 | @include wrap($prop: $wrap-prop-val); 92 | } 93 | } 94 | } 95 | @else if $wrap-prop-val=="center" { 96 | @if $flexiblegs-method-val=="css" { 97 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 98 | @include wrap($prop: $wrap-prop-val); 99 | } 100 | } 101 | @else if $flexiblegs-method-val=="bem" { 102 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 103 | @include wrap($prop: $wrap-prop-val); 104 | } 105 | } 106 | } 107 | @else if $wrap-prop-val=="right" { 108 | @if $flexiblegs-method-val=="css" { 109 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 110 | @include wrap($prop: $wrap-prop-val); 111 | } 112 | } 113 | @else if $flexiblegs-method-val=="bem" { 114 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 115 | @include wrap($prop: $wrap-prop-val); 116 | } 117 | } 118 | } 119 | @else if $wrap-prop-val=="top" { 120 | @if $flexiblegs-method-val=="css" { 121 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 122 | @include wrap($prop: $wrap-prop-val); 123 | } 124 | } 125 | @else if $flexiblegs-method-val=="bem" { 126 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 127 | @include wrap($prop: $wrap-prop-val); 128 | } 129 | } 130 | } 131 | @else if $wrap-prop-val=="middle" { 132 | @if $flexiblegs-method-val=="css" { 133 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 134 | @include wrap($prop: $wrap-prop-val); 135 | } 136 | } 137 | @else if $flexiblegs-method-val=="bem" { 138 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 139 | @include wrap($prop: $wrap-prop-val); 140 | } 141 | } 142 | } 143 | @else if $wrap-prop-val=="bottom" { 144 | @if $flexiblegs-method-val=="css" { 145 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 146 | @include wrap($prop: $wrap-prop-val); 147 | } 148 | } 149 | @else if $flexiblegs-method-val=="bem" { 150 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 151 | @include wrap($prop: $wrap-prop-val); 152 | } 153 | } 154 | } 155 | @else if $wrap-prop-val=="stretch" { 156 | @if $flexiblegs-method-val=="css" { 157 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 158 | @include wrap($prop: $wrap-prop-val); 159 | } 160 | } 161 | @else if $flexiblegs-method-val=="bem" { 162 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 163 | @include wrap($prop: $wrap-prop-val); 164 | } 165 | } 166 | } 167 | @else if $wrap-prop-val=="between" { 168 | @if $flexiblegs-method-val=="css" { 169 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 170 | @include wrap($prop: $wrap-prop-val); 171 | } 172 | } 173 | @else if $flexiblegs-method-val=="bem" { 174 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 175 | @include wrap($prop: $wrap-prop-val); 176 | } 177 | } 178 | } 179 | @else if $wrap-prop-val=="around" { 180 | @if $flexiblegs-method-val=="css" { 181 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 182 | @include wrap($prop: $wrap-prop-val); 183 | } 184 | } 185 | @else if $flexiblegs-method-val=="bem" { 186 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 187 | @include wrap($prop: $wrap-prop-val); 188 | } 189 | } 190 | } 191 | @else if $wrap-prop-val=="baseline" { 192 | @if $flexiblegs-method-val=="css" { 193 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 194 | @include wrap($prop: $wrap-prop-val); 195 | } 196 | } 197 | @else if $flexiblegs-method-val=="bem" { 198 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 199 | @include wrap($prop: $wrap-prop-val); 200 | } 201 | } 202 | } 203 | @else if $wrap-prop-val=="reverse" { 204 | @if $flexiblegs-method-val=="css" { 205 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 206 | @include wrap($prop: $wrap-prop-val); 207 | } 208 | } 209 | @else if $flexiblegs-method-val=="bem" { 210 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 211 | @include wrap($prop: $wrap-prop-val); 212 | } 213 | } 214 | } 215 | @else if $wrap-prop-val=="not-reverse" { 216 | @if $flexiblegs-method-val=="css" { 217 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 218 | @include wrap($prop: $wrap-prop-val); 219 | } 220 | } 221 | @else if $flexiblegs-method-val=="bem" { 222 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 223 | @include wrap($prop: $wrap-prop-val); 224 | } 225 | } 226 | } 227 | } 228 | @each $col-row-val in $col-row { 229 | @if $col-row-val==1 { 230 | @if $flexiblegs-method-val=="css" { 231 | .#{$flexiblegs-breakpoint-key}-#{$col-row-val}-#{$col-row-val} { 232 | @include col($prop: $col-row-val, $val: $col-row-val); 233 | } 234 | } 235 | @else if $flexiblegs-method-val=="bem" { 236 | .wrap__col--#{$flexiblegs-breakpoint-key}-#{$col-row-val}-#{$col-row-val} { 237 | @include col($prop: $col-row-val, $val: $col-row-val); 238 | } 239 | } 240 | } 241 | @else { 242 | @for $i from 1 through $col-row-val { 243 | @if $i !=$col-row-val { 244 | @if $flexiblegs-method-val=="css" { 245 | .#{$flexiblegs-breakpoint-key}-#{$i}-#{$col-row-val} { 246 | @include col($prop: $i, $val: $col-row-val); 247 | } 248 | } 249 | @else if $flexiblegs-method-val=="bem" { 250 | .wrap__col--#{$flexiblegs-breakpoint-key}-#{$i}-#{$col-row-val} { 251 | @include col($prop: $i, $val: $col-row-val); 252 | } 253 | } 254 | } 255 | } 256 | } 257 | } 258 | @each $col-width-val in $col-width { 259 | @if $flexiblegs-method-val=="css" { 260 | .#{$flexiblegs-breakpoint-key}-width-#{$col-width-val} { 261 | @include col("width", $val: $col-width-val); 262 | } 263 | } 264 | @else if $flexiblegs-method-val=="bem" { 265 | .wrap__col--#{$flexiblegs-breakpoint-key}-width-#{$col-width-val} { 266 | @include col("width", $val: $col-width-val); 267 | } 268 | } 269 | } 270 | @each $col-prop-val in $col-prop { 271 | @if $col-prop-val=="hidden" { 272 | @if $flexiblegs-method-val=="css" { 273 | .#{$flexiblegs-breakpoint-key}-#{$col-prop-val} { 274 | @include col($prop: $col-prop-val); 275 | } 276 | } 277 | @else if $flexiblegs-method-val=="bem" { 278 | .wrap__col--#{$flexiblegs-breakpoint-key}-#{$col-prop-val} { 279 | @include col($prop: $col-prop-val); 280 | } 281 | } 282 | } 283 | @else if $col-prop-val=="not-hidden" { 284 | @if $flexiblegs-method-val=="css" { 285 | .#{$flexiblegs-breakpoint-key}-#{$col-prop-val} { 286 | @include col($prop: $col-prop-val); 287 | } 288 | } 289 | @else if $flexiblegs-method-val=="bem" { 290 | .wrap__col--#{$flexiblegs-breakpoint-key}-#{$col-prop-val} { 291 | @include col($prop: $col-prop-val); 292 | } 293 | } 294 | } 295 | @else if $col-prop-val=="first" { 296 | @if $flexiblegs-method-val=="css" { 297 | .#{$flexiblegs-breakpoint-key}-#{$col-prop-val} { 298 | @include col($prop: $col-prop-val); 299 | } 300 | } 301 | @else if $flexiblegs-method-val=="bem" { 302 | .wrap__col--#{$flexiblegs-breakpoint-key}-#{$col-prop-val} { 303 | @include col($prop: $col-prop-val); 304 | } 305 | } 306 | } 307 | @else if $col-prop-val=="not-first" { 308 | @if $flexiblegs-method-val=="css" { 309 | .#{$flexiblegs-breakpoint-key}-#{$col-prop-val} { 310 | @include col($prop: $col-prop-val); 311 | } 312 | } 313 | @else if $flexiblegs-method-val=="bem" { 314 | .wrap__col--#{$flexiblegs-breakpoint-key}-#{$col-prop-val} { 315 | @include col($prop: $col-prop-val); 316 | } 317 | } 318 | } 319 | @else if $col-prop-val=="last" { 320 | @if $flexiblegs-method-val=="css" { 321 | .#{$flexiblegs-breakpoint-key}-#{$col-prop-val} { 322 | @include col($prop: $col-prop-val); 323 | } 324 | } 325 | @else if $flexiblegs-method-val=="bem" { 326 | .wrap__col--#{$flexiblegs-breakpoint-key}-#{$col-prop-val} { 327 | @include col($prop: $col-prop-val); 328 | } 329 | } 330 | } 331 | @else if $col-prop-val=="not-last" { 332 | @if $flexiblegs-method-val=="css" { 333 | .#{$flexiblegs-breakpoint-key}-#{$col-prop-val} { 334 | @include col($prop: $col-prop-val); 335 | } 336 | } 337 | @else if $flexiblegs-method-val=="bem" { 338 | .wrap__col--#{$flexiblegs-breakpoint-key}-#{$col-prop-val} { 339 | @include col($prop: $col-prop-val); 340 | } 341 | } 342 | } 343 | } 344 | @each $wrap-gutter-val in $wrap-gutter { 345 | @if $flexiblegs-method-val=="css" { 346 | .#{$flexiblegs-breakpoint-key}-gutter-#{$wrap-gutter-val} { 347 | @include wrap("gutter", $val: $wrap-gutter-val); 348 | } 349 | } 350 | @else if $flexiblegs-method-val=="bem" { 351 | .wrap--#{$flexiblegs-breakpoint-key}-gutter-#{$wrap-gutter-val} { 352 | @include wrap("gutter", $val: $wrap-gutter-val); 353 | } 354 | } 355 | } 356 | @each $wrap-outside-val in $wrap-outside { 357 | @if $flexiblegs-method-val=="css" { 358 | .#{$flexiblegs-breakpoint-key}-outside-#{$wrap-outside-val} { 359 | @include wrap("outside", $val: $wrap-outside-val); 360 | } 361 | } 362 | @else if $flexiblegs-method-val=="bem" { 363 | .wrap--#{$flexiblegs-breakpoint-key}-outside-#{$wrap-outside-val} { 364 | @include wrap("outside", $val: $wrap-outside-val); 365 | } 366 | } 367 | } 368 | } 369 | @else { 370 | @media #{$flexiblegs-breakpoint-val} { 371 | @each $wrap-col-val in $wrap-col { 372 | @if $wrap-col-val=="auto" { 373 | @if $flexiblegs-method-val=="css" { 374 | .#{$flexiblegs-breakpoint-key}-#{$wrap-col-val} { 375 | @include wrap($prop: $wrap-col-val); 376 | } 377 | } 378 | @else if $flexiblegs-method-val=="bem" { 379 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-col-val} { 380 | @include wrap($prop: $wrap-col-val); 381 | } 382 | } 383 | } 384 | @else { 385 | @if $flexiblegs-method-val=="css" { 386 | .#{$flexiblegs-breakpoint-key}-#{$wrap-col-val} { 387 | @include wrap($prop: $wrap-col-val); 388 | } 389 | } 390 | @else if $flexiblegs-method-val=="bem" { 391 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-col-val} { 392 | @include wrap($prop: $wrap-col-val); 393 | } 394 | } 395 | } 396 | } 397 | @each $wrap-prop-val in $wrap-prop { 398 | @if $wrap-prop-val=="table" { 399 | @if $flexiblegs-method-val=="css" { 400 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 401 | @include wrap($prop: $wrap-prop-val); 402 | } 403 | } 404 | @else if $flexiblegs-method-val=="bem" { 405 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 406 | @include wrap($prop: $wrap-prop-val); 407 | } 408 | } 409 | } 410 | @else if $wrap-prop-val=="flexbox" { 411 | @if $flexiblegs-method-val=="css" { 412 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 413 | @include wrap($prop: $wrap-prop-val); 414 | } 415 | } 416 | @else if $flexiblegs-method-val=="bem" { 417 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 418 | @include wrap($prop: $wrap-prop-val); 419 | } 420 | } 421 | } 422 | @else if $wrap-prop-val=="normal" { 423 | @if $flexiblegs-method-val=="css" { 424 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 425 | @include wrap($prop: $wrap-prop-val); 426 | } 427 | } 428 | @else if $flexiblegs-method-val=="bem" { 429 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 430 | @include wrap($prop: $wrap-prop-val); 431 | } 432 | } 433 | } 434 | @else if $wrap-prop-val=="left" { 435 | @if $flexiblegs-method-val=="css" { 436 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 437 | @include wrap($prop: $wrap-prop-val); 438 | } 439 | } 440 | @else if $flexiblegs-method-val=="bem" { 441 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 442 | @include wrap($prop: $wrap-prop-val); 443 | } 444 | } 445 | } 446 | @else if $wrap-prop-val=="center" { 447 | @if $flexiblegs-method-val=="css" { 448 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 449 | @include wrap($prop: $wrap-prop-val); 450 | } 451 | } 452 | @else if $flexiblegs-method-val=="bem" { 453 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 454 | @include wrap($prop: $wrap-prop-val); 455 | } 456 | } 457 | } 458 | @else if $wrap-prop-val=="right" { 459 | @if $flexiblegs-method-val=="css" { 460 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 461 | @include wrap($prop: $wrap-prop-val); 462 | } 463 | } 464 | @else if $flexiblegs-method-val=="bem" { 465 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 466 | @include wrap($prop: $wrap-prop-val); 467 | } 468 | } 469 | } 470 | @else if $wrap-prop-val=="top" { 471 | @if $flexiblegs-method-val=="css" { 472 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 473 | @include wrap($prop: $wrap-prop-val); 474 | } 475 | } 476 | @else if $flexiblegs-method-val=="bem" { 477 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 478 | @include wrap($prop: $wrap-prop-val); 479 | } 480 | } 481 | } 482 | @else if $wrap-prop-val=="middle" { 483 | @if $flexiblegs-method-val=="css" { 484 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 485 | @include wrap($prop: $wrap-prop-val); 486 | } 487 | } 488 | @else if $flexiblegs-method-val=="bem" { 489 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 490 | @include wrap($prop: $wrap-prop-val); 491 | } 492 | } 493 | } 494 | @else if $wrap-prop-val=="bottom" { 495 | @if $flexiblegs-method-val=="css" { 496 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 497 | @include wrap($prop: $wrap-prop-val); 498 | } 499 | } 500 | @else if $flexiblegs-method-val=="bem" { 501 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 502 | @include wrap($prop: $wrap-prop-val); 503 | } 504 | } 505 | } 506 | @else if $wrap-prop-val=="stretch" { 507 | @if $flexiblegs-method-val=="css" { 508 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 509 | @include wrap($prop: $wrap-prop-val); 510 | } 511 | } 512 | @else if $flexiblegs-method-val=="bem" { 513 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 514 | @include wrap($prop: $wrap-prop-val); 515 | } 516 | } 517 | } 518 | @else if $wrap-prop-val=="between" { 519 | @if $flexiblegs-method-val=="css" { 520 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 521 | @include wrap($prop: $wrap-prop-val); 522 | } 523 | } 524 | @else if $flexiblegs-method-val=="bem" { 525 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 526 | @include wrap($prop: $wrap-prop-val); 527 | } 528 | } 529 | } 530 | @else if $wrap-prop-val=="around" { 531 | @if $flexiblegs-method-val=="css" { 532 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 533 | @include wrap($prop: $wrap-prop-val); 534 | } 535 | } 536 | @else if $flexiblegs-method-val=="bem" { 537 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 538 | @include wrap($prop: $wrap-prop-val); 539 | } 540 | } 541 | } 542 | @else if $wrap-prop-val=="baseline" { 543 | @if $flexiblegs-method-val=="css" { 544 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 545 | @include wrap($prop: $wrap-prop-val); 546 | } 547 | } 548 | @else if $flexiblegs-method-val=="bem" { 549 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 550 | @include wrap($prop: $wrap-prop-val); 551 | } 552 | } 553 | } 554 | @else if $wrap-prop-val=="reverse" { 555 | @if $flexiblegs-method-val=="css" { 556 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 557 | @include wrap($prop: $wrap-prop-val); 558 | } 559 | } 560 | @else if $flexiblegs-method-val=="bem" { 561 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 562 | @include wrap($prop: $wrap-prop-val); 563 | } 564 | } 565 | } 566 | @else if $wrap-prop-val=="not-reverse" { 567 | @if $flexiblegs-method-val=="css" { 568 | .#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 569 | @include wrap($prop: $wrap-prop-val); 570 | } 571 | } 572 | @else if $flexiblegs-method-val=="bem" { 573 | .wrap--#{$flexiblegs-breakpoint-key}-#{$wrap-prop-val} { 574 | @include wrap($prop: $wrap-prop-val); 575 | } 576 | } 577 | } 578 | } 579 | @each $col-row-val in $col-row { 580 | @if $col-row-val==1 { 581 | @if $flexiblegs-method-val=="css" { 582 | .#{$flexiblegs-breakpoint-key}-#{$col-row-val}-#{$col-row-val} { 583 | @include col($prop: $col-row-val, $val: $col-row-val); 584 | } 585 | } 586 | @else if $flexiblegs-method-val=="bem" { 587 | .wrap__col--#{$flexiblegs-breakpoint-key}-#{$col-row-val}-#{$col-row-val} { 588 | @include col($prop: $col-row-val, $val: $col-row-val); 589 | } 590 | } 591 | } 592 | @else { 593 | @for $i from 1 through $col-row-val { 594 | @if $i !=$col-row-val { 595 | @if $flexiblegs-method-val=="css" { 596 | .#{$flexiblegs-breakpoint-key}-#{$i}-#{$col-row-val} { 597 | @include col($prop: $i, $val: $col-row-val); 598 | } 599 | } 600 | @else if $flexiblegs-method-val=="bem" { 601 | .wrap__col--#{$flexiblegs-breakpoint-key}-#{$i}-#{$col-row-val} { 602 | @include col($prop: $i, $val: $col-row-val); 603 | } 604 | } 605 | } 606 | } 607 | } 608 | } 609 | @each $col-width-val in $col-width { 610 | @if $flexiblegs-method-val=="css" { 611 | .#{$flexiblegs-breakpoint-key}-width-#{$col-width-val} { 612 | @include col("width", $val: $col-width-val); 613 | } 614 | } 615 | @else if $flexiblegs-method-val=="bem" { 616 | .wrap__col--#{$flexiblegs-breakpoint-key}-width-#{$col-width-val} { 617 | @include col("width", $val: $col-width-val); 618 | } 619 | } 620 | } 621 | @each $col-prop-val in $col-prop { 622 | @if $col-prop-val=="hidden" { 623 | @if $flexiblegs-method-val=="css" { 624 | .#{$flexiblegs-breakpoint-key}-#{$col-prop-val} { 625 | @include col($prop: $col-prop-val); 626 | } 627 | } 628 | @else if $flexiblegs-method-val=="bem" { 629 | .wrap__col--#{$flexiblegs-breakpoint-key}-#{$col-prop-val} { 630 | @include col($prop: $col-prop-val); 631 | } 632 | } 633 | } 634 | @else if $col-prop-val=="not-hidden" { 635 | @if $flexiblegs-method-val=="css" { 636 | .#{$flexiblegs-breakpoint-key}-#{$col-prop-val} { 637 | @include col($prop: $col-prop-val); 638 | } 639 | } 640 | @else if $flexiblegs-method-val=="bem" { 641 | .wrap__col--#{$flexiblegs-breakpoint-key}-#{$col-prop-val} { 642 | @include col($prop: $col-prop-val); 643 | } 644 | } 645 | } 646 | @else if $col-prop-val=="first" { 647 | @if $flexiblegs-method-val=="css" { 648 | .#{$flexiblegs-breakpoint-key}-#{$col-prop-val} { 649 | @include col($prop: $col-prop-val); 650 | } 651 | } 652 | @else if $flexiblegs-method-val=="bem" { 653 | .wrap__col--#{$flexiblegs-breakpoint-key}-#{$col-prop-val} { 654 | @include col($prop: $col-prop-val); 655 | } 656 | } 657 | } 658 | @else if $col-prop-val=="not-first" { 659 | @if $flexiblegs-method-val=="css" { 660 | .#{$flexiblegs-breakpoint-key}-#{$col-prop-val} { 661 | @include col($prop: $col-prop-val); 662 | } 663 | } 664 | @else if $flexiblegs-method-val=="bem" { 665 | .wrap__col--#{$flexiblegs-breakpoint-key}-#{$col-prop-val} { 666 | @include col($prop: $col-prop-val); 667 | } 668 | } 669 | } 670 | @else if $col-prop-val=="last" { 671 | @if $flexiblegs-method-val=="css" { 672 | .#{$flexiblegs-breakpoint-key}-#{$col-prop-val} { 673 | @include col($prop: $col-prop-val); 674 | } 675 | } 676 | @else if $flexiblegs-method-val=="bem" { 677 | .wrap__col--#{$flexiblegs-breakpoint-key}-#{$col-prop-val} { 678 | @include col($prop: $col-prop-val); 679 | } 680 | } 681 | } 682 | @else if $col-prop-val=="not-last" { 683 | @if $flexiblegs-method-val=="css" { 684 | .#{$flexiblegs-breakpoint-key}-#{$col-prop-val} { 685 | @include col($prop: $col-prop-val); 686 | } 687 | } 688 | @else if $flexiblegs-method-val=="bem" { 689 | .wrap__col--#{$flexiblegs-breakpoint-key}-#{$col-prop-val} { 690 | @include col($prop: $col-prop-val); 691 | } 692 | } 693 | } 694 | } 695 | @each $wrap-gutter-val in $wrap-gutter { 696 | @if $flexiblegs-method-val=="css" { 697 | .#{$flexiblegs-breakpoint-key}-gutter-#{$wrap-gutter-val} { 698 | @include wrap("gutter", $val: $wrap-gutter-val); 699 | } 700 | } 701 | @else if $flexiblegs-method-val=="bem" { 702 | .wrap--#{$flexiblegs-breakpoint-key}-gutter-#{$wrap-gutter-val} { 703 | @include wrap("gutter", $val: $wrap-gutter-val); 704 | } 705 | } 706 | } 707 | @each $wrap-outside-val in $wrap-outside { 708 | @if $flexiblegs-method-val=="css" { 709 | .#{$flexiblegs-breakpoint-key}-outside-#{$wrap-outside-val} { 710 | @include wrap("outside", $val: $wrap-outside-val); 711 | } 712 | } 713 | @else if $flexiblegs-method-val=="bem" { 714 | .wrap--#{$flexiblegs-breakpoint-key}-outside-#{$wrap-outside-val} { 715 | @include wrap("outside", $val: $wrap-outside-val); 716 | } 717 | } 718 | } 719 | } 720 | } 721 | } 722 | } 723 | -------------------------------------------------------------------------------- /flexiblegs-settings.scss: -------------------------------------------------------------------------------- 1 | /*! Flexible Grid System 5.6.0 | Settings | Scss | MIT License | dnomak.com/flexiblegs */ 2 | 3 | $flexiblegs-method: ( 4 | "css" 5 | // "bem" 6 | ); 7 | $flexiblegs-breakpoint: ( 8 | "xl" : "", 9 | "lg" : "(max-width: 1024px)", 10 | "md" : "(max-width: 768px)", 11 | "sm" : "(max-width: 667px)" 12 | ); 13 | $wrap-col: ( 14 | "auto", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 15 | ); 16 | $wrap-prop: ( 17 | "table", 18 | "flexbox", 19 | "normal", 20 | "left", 21 | "center", 22 | "right", 23 | "top", 24 | "middle", 25 | "bottom", 26 | "stretch", 27 | "between", 28 | "around", 29 | "baseline", 30 | "reverse", 31 | "not-reverse" 32 | ); 33 | $col-row: ( 34 | 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 35 | ); 36 | $col-width: (); 37 | $col-prop: ( 38 | "hidden", 39 | "not-hidden", 40 | "first", 41 | "not-first", 42 | "last", 43 | "not-last" 44 | ); 45 | $wrap-gutter: ( 46 | 0, 8, 16, 24, 40 47 | ); 48 | $wrap-outside: ( 49 | 0, 8, 16, 24, 40 50 | ); 51 | -------------------------------------------------------------------------------- /main.scss: -------------------------------------------------------------------------------- 1 | @import "flexiblegs-settings"; 2 | @import "node_modules/flexiblegs-scss/flexiblegs-scss"; 3 | @import "flexiblegs-scss-plus"; 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flexiblegs-scss-plus", 3 | "version": "5.6.0", 4 | "homepage": "https://dnomak.com/flexiblegs/", 5 | "description": "Flexible Grid System Scss Plus", 6 | "author": "@dnomak ", 7 | "license": "MIT", 8 | "main": "flexiblegs-scss-plus.scss", 9 | "scripts": { 10 | "build": "node-sass main.scss flexiblegs-css.css --output-style expanded; node-sass main.scss flexiblegs-css.min.css --output-style compressed" 11 | }, 12 | "keywords": [ 13 | "css", 14 | "sass", 15 | "scss" 16 | ], 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/flexiblegs/flexiblegs-scss-plus.git" 20 | }, 21 | "dependencies": { 22 | "flexiblegs-scss": "^5.6.0", 23 | "node-sass": "^4.11.0" 24 | }, 25 | "engines": { 26 | "node": "10.14.1", 27 | "npm": "6.5.0" 28 | } 29 | } 30 | --------------------------------------------------------------------------------