diff --git a/dist/waffle-grid.css b/dist/waffle-grid.css index 58eafb0..fcf5d7e 100644 --- a/dist/waffle-grid.css +++ b/dist/waffle-grid.css @@ -1,5 +1,5 @@ /*! - * waffle-grid - v1.3.4 - (https://lucasgruwez.github.io/waffle-grid) + * waffle-grid - v1.3.5 - (https://lucasgruwez.github.io/waffle-grid) * Copyright 2017 Lucas Gruwez. * Licensed under MIT * https://lucasgruwez.github.io/waffle-grid @@ -254,11 +254,11 @@ } .m-un-push { - margin-left: 0; + margin-left: 10px; } .m-un-pull { - margin-right: 0; + margin-right: 10px; } .col-m-1-of-4,.col-m-2-of-8 { @@ -417,11 +417,11 @@ } .s-un-push { - margin-left: 0; + margin-left: 10px; } .s-un-pull { - margin-right: 0; + margin-right: 10px; } .col-s-1-of-4 { diff --git a/dist/waffle-grid.min.css b/dist/waffle-grid.min.css index ea2e432..7b24023 100644 --- a/dist/waffle-grid.min.css +++ b/dist/waffle-grid.min.css @@ -1,8 +1,6 @@ /*! - * waffle-grid - v1.3.4 - (https://lucasgruwez.github.io/waffle-grid) + * waffle-grid - v1.3.5 - (https://lucasgruwez.github.io/waffle-grid) * Copyright 2017 Lucas Gruwez. * Licensed under MIT * https://lucasgruwez.github.io/waffle-grid - */ - - .container,.grid{width:960px;max-width:80%;margin:0 auto}.grid,.row{display:-ms-flexbox;display:flex}.grid{-ms-flex-direction:column;flex-direction:column}.grid.full-width{width:100%;max-width:100%}.row{-ms-flex-direction:row;flex-direction:row;width:100%;-ms-flex-wrap:wrap;flex-wrap:wrap}.col{box-sizing:border-box;margin:10px;vertical-align:top}.center,.left{margin-right:auto}.center,.right{margin-left:auto}.w-auto{-ms-flex:1;flex:1}.col-1-of-4,.col-2-of-8,.col-3-of-12{width:calc(25% - 20px)}.push-1-of-4,.push-2-of-8,.push-3-of-12{margin-left:calc(25% + 20px / 2)}.pull-1-of-4,.pull-2-of-8,.pull-3-of-12{margin-right:calc(25% + 20px / 2)}.col-2-of-4,.col-4-of-8,.col-6-of-12{width:calc(50% - 20px)}.push-2-of-4,.push-4-of-8,.push-6-of-12{margin-left:calc(50% + 20px / 2)}.pull-2-of-4,.pull-4-of-8,.pull-6-of-12{margin-right:calc(50% + 20px / 2)}.col-3-of-4,.col-6-of-8,.col-9-of-12{width:calc(75% - 20px)}.push-3-of-4,.push-6-of-8,.push-9-of-12{margin-left:calc(75% + 20px / 2)}.pull-3-of-4,.pull-6-of-8,.pull-9-of-12{margin-right:calc(75% + 20px / 2)}.col-12-of-12,.col-4-of-4,.col-8-of-8{width:calc(100% - 20px)}.push-12-of-12,.push-4-of-4,.push-8-of-8{margin-left:calc(100% + 20px / 2)}.pull-12-of-12,.pull-4-of-4,.pull-8-of-8{margin-right:calc(100% + 20px / 2)}.col-1-of-8{width:calc(12.5% - 20px)}.push-1-of-8{margin-left:calc(12.5% + 20px / 2)}.pull-1-of-8{margin-right:calc(12.5% + 20px / 2)}.col-3-of-8{width:calc(37.5% - 20px)}.push-3-of-8{margin-left:calc(37.5% + 20px / 2)}.pull-3-of-8{margin-right:calc(37.5% + 20px / 2)}.col-5-of-8{width:calc(62.5% - 20px)}.push-5-of-8{margin-left:calc(62.5% + 20px / 2)}.pull-5-of-8{margin-right:calc(62.5% + 20px / 2)}.col-7-of-8{width:calc(87.5% - 20px)}.push-7-of-8{margin-left:calc(87.5% + 20px / 2)}.pull-7-of-8{margin-right:calc(87.5% + 20px / 2)}.col-1-of-12{width:calc(8.33333% - 20px)}.push-1-of-12{margin-left:calc(8.33333% + 20px / 2)}.pull-1-of-12{margin-right:calc(8.33333% + 20px / 2)}.col-2-of-12{width:calc(16.66667% - 20px)}.push-2-of-12{margin-left:calc(16.66667% + 20px / 2)}.pull-2-of-12{margin-right:calc(16.66667% + 20px / 2)}.col-4-of-12{width:calc(33.33333% - 20px)}.push-4-of-12{margin-left:calc(33.33333% + 20px / 2)}.pull-4-of-12{margin-right:calc(33.33333% + 20px / 2)}.col-5-of-12{width:calc(41.66667% - 20px)}.push-5-of-12{margin-left:calc(41.66667% + 20px / 2)}.pull-5-of-12{margin-right:calc(41.66667% + 20px / 2)}.col-7-of-12{width:calc(58.33333% - 20px)}.push-7-of-12{margin-left:calc(58.33333% + 20px / 2)}.pull-7-of-12{margin-right:calc(58.33333% + 20px / 2)}.col-8-of-12{width:calc(66.66667% - 20px)}.push-8-of-12{margin-left:calc(66.66667% + 20px / 2)}.pull-8-of-12{margin-right:calc(66.66667% + 20px / 2)}.col-10-of-12{width:calc(83.33333% - 20px)}.push-10-of-12{margin-left:calc(83.33333% + 20px / 2)}.pull-10-of-12{margin-right:calc(83.33333% + 20px / 2)}.col-11-of-12{width:calc(91.66667% - 20px)}.push-11-of-12{margin-left:calc(91.66667% + 20px / 2)}.pull-11-of-12{margin-right:calc(91.66667% + 20px / 2)}@media (max-width:840px){.m-hide{display:none}.w-m-auto{-ms-flex:1;flex:1}.m-un-push{margin-left:0}.m-un-pull{margin-right:0}.col-m-1-of-4,.col-m-2-of-8{width:calc(25% - 20px)}.push-m-1-of-4,.push-m-2-of-8{margin-left:calc(25% + 20px / 2)}.pull-m-1-of-4,.pull-m-2-of-8{margin-right:calc(25% + 20px / 2)}.col-m-2-of-4,.col-m-3-of-6,.col-m-4-of-8{width:calc(50% - 20px)}.push-m-2-of-4,.push-m-3-of-6,.push-m-4-of-8{margin-left:calc(50% + 20px / 2)}.pull-m-2-of-4,.pull-m-3-of-6,.pull-m-4-of-8{margin-right:calc(50% + 20px / 2)}.col-m-3-of-4,.col-m-6-of-8{width:calc(75% - 20px)}.push-m-3-of-4,.push-m-6-of-8{margin-left:calc(75% + 20px / 2)}.pull-m-3-of-4,.pull-m-6-of-8{margin-right:calc(75% + 20px / 2)}.col-m-4-of-4,.col-m-6-of-6,.col-m-8-of-8{width:calc(100% - 20px)}.push-m-4-of-4,.push-m-6-of-6,.push-m-8-of-8{margin-left:calc(100% + 20px / 2)}.pull-m-4-of-4,.pull-m-6-of-6,.pull-m-8-of-8{margin-right:calc(100% + 20px / 2)}.col-m-1-of-6{width:calc(16.66667% - 20px)}.push-m-1-of-6{margin-left:calc(16.66667% + 20px / 2)}.pull-m-1-of-6{margin-right:calc(16.66667% + 20px / 2)}.col-m-2-of-6{width:calc(33.33333% - 20px)}.push-m-2-of-6{margin-left:calc(33.33333% + 20px / 2)}.pull-m-2-of-6{margin-right:calc(33.33333% + 20px / 2)}.col-m-4-of-6{width:calc(66.66667% - 20px)}.push-m-4-of-6{margin-left:calc(66.66667% + 20px / 2)}.pull-m-4-of-6{margin-right:calc(66.66667% + 20px / 2)}.col-m-5-of-6{width:calc(83.33333% - 20px)}.push-m-5-of-6{margin-left:calc(83.33333% + 20px / 2)}.pull-m-5-of-6{margin-right:calc(83.33333% + 20px / 2)}.col-m-1-of-8{width:calc(12.5% - 20px)}.push-m-1-of-8{margin-left:calc(12.5% + 20px / 2)}.pull-m-1-of-8{margin-right:calc(12.5% + 20px / 2)}.col-m-3-of-8{width:calc(37.5% - 20px)}.push-m-3-of-8{margin-left:calc(37.5% + 20px / 2)}.pull-m-3-of-8{margin-right:calc(37.5% + 20px / 2)}.col-m-5-of-8{width:calc(62.5% - 20px)}.push-m-5-of-8{margin-left:calc(62.5% + 20px / 2)}.pull-m-5-of-8{margin-right:calc(62.5% + 20px / 2)}.col-m-7-of-8{width:calc(87.5% - 20px)}.push-m-7-of-8{margin-left:calc(87.5% + 20px / 2)}.pull-m-7-of-8{margin-right:calc(87.5% + 20px / 2)}}@media (max-width:480px){.s-hide{display:none}.w-s-auto{-ms-flex:1;flex:1}.s-un-push{margin-left:0}.s-un-pull{margin-right:0}.col-s-1-of-4{width:calc(25% - 20px)}.push-s-1-of-4{margin-left:calc(25% + 20px / 2)}.pull-s-1-of-4{margin-right:calc(25% + 20px / 2)}.col-s-2-of-4,.col-s-3-of-6{width:calc(50% - 20px)}.push-s-2-of-4,.push-s-3-of-6{margin-left:calc(50% + 20px / 2)}.pull-s-2-of-4,.pull-s-3-of-6{margin-right:calc(50% + 20px / 2)}.col-s-3-of-4{width:calc(75% - 20px)}.push-s-3-of-4{margin-left:calc(75% + 20px / 2)}.pull-s-3-of-4{margin-right:calc(75% + 20px / 2)}.col-s-4-of-4,.col-s-6-of-6{width:calc(100% - 20px)}.push-s-4-of-4,.push-s-6-of-6{margin-left:calc(100% + 20px / 2)}.pull-s-4-of-4,.pull-s-6-of-6{margin-right:calc(100% + 20px / 2)}.col-s-1-of-6{width:calc(16.66667% - 20px)}.push-s-1-of-6{margin-left:calc(16.66667% + 20px / 2)}.pull-s-1-of-6{margin-right:calc(16.66667% + 20px / 2)}.col-s-2-of-6{width:calc(33.33333% - 20px)}.push-s-2-of-6{margin-left:calc(33.33333% + 20px / 2)}.pull-s-2-of-6{margin-right:calc(33.33333% + 20px / 2)}.col-s-4-of-6{width:calc(66.66667% - 20px)}.push-s-4-of-6{margin-left:calc(66.66667% + 20px / 2)}.pull-s-4-of-6{margin-right:calc(66.66667% + 20px / 2)}.col-s-5-of-6{width:calc(83.33333% - 20px)}.push-s-5-of-6{margin-left:calc(83.33333% + 20px / 2)}.pull-s-5-of-6{margin-right:calc(83.33333% + 20px / 2)}}@media (min-width:480px){.s-and-lower{display:none}}@media (min-width:840px){.m-and-lower{display:none}} + */.container,.grid{width:960px;max-width:80%;margin:0 auto}.grid,.row{display:-ms-flexbox;display:flex}.grid{-ms-flex-direction:column;flex-direction:column}.grid.full-width{width:100%;max-width:100%}.row{-ms-flex-direction:row;flex-direction:row;width:100%;-ms-flex-wrap:wrap;flex-wrap:wrap}.col{box-sizing:border-box;margin:10px;vertical-align:top}.center,.left{margin-right:auto}.center,.right{margin-left:auto}.w-auto{-ms-flex:1;flex:1}.col-1-of-4,.col-2-of-8,.col-3-of-12{width:calc(25% - 20px)}.push-1-of-4,.push-2-of-8,.push-3-of-12{margin-left:calc(25% + 20px / 2)}.pull-1-of-4,.pull-2-of-8,.pull-3-of-12{margin-right:calc(25% + 20px / 2)}.col-2-of-4,.col-4-of-8,.col-6-of-12{width:calc(50% - 20px)}.push-2-of-4,.push-4-of-8,.push-6-of-12{margin-left:calc(50% + 20px / 2)}.pull-2-of-4,.pull-4-of-8,.pull-6-of-12{margin-right:calc(50% + 20px / 2)}.col-3-of-4,.col-6-of-8,.col-9-of-12{width:calc(75% - 20px)}.push-3-of-4,.push-6-of-8,.push-9-of-12{margin-left:calc(75% + 20px / 2)}.pull-3-of-4,.pull-6-of-8,.pull-9-of-12{margin-right:calc(75% + 20px / 2)}.col-12-of-12,.col-4-of-4,.col-8-of-8{width:calc(100% - 20px)}.push-12-of-12,.push-4-of-4,.push-8-of-8{margin-left:calc(100% + 20px / 2)}.pull-12-of-12,.pull-4-of-4,.pull-8-of-8{margin-right:calc(100% + 20px / 2)}.col-1-of-8{width:calc(12.5% - 20px)}.push-1-of-8{margin-left:calc(12.5% + 20px / 2)}.pull-1-of-8{margin-right:calc(12.5% + 20px / 2)}.col-3-of-8{width:calc(37.5% - 20px)}.push-3-of-8{margin-left:calc(37.5% + 20px / 2)}.pull-3-of-8{margin-right:calc(37.5% + 20px / 2)}.col-5-of-8{width:calc(62.5% - 20px)}.push-5-of-8{margin-left:calc(62.5% + 20px / 2)}.pull-5-of-8{margin-right:calc(62.5% + 20px / 2)}.col-7-of-8{width:calc(87.5% - 20px)}.push-7-of-8{margin-left:calc(87.5% + 20px / 2)}.pull-7-of-8{margin-right:calc(87.5% + 20px / 2)}.col-1-of-12{width:calc(8.33333% - 20px)}.push-1-of-12{margin-left:calc(8.33333% + 20px / 2)}.pull-1-of-12{margin-right:calc(8.33333% + 20px / 2)}.col-2-of-12{width:calc(16.66667% - 20px)}.push-2-of-12{margin-left:calc(16.66667% + 20px / 2)}.pull-2-of-12{margin-right:calc(16.66667% + 20px / 2)}.col-4-of-12{width:calc(33.33333% - 20px)}.push-4-of-12{margin-left:calc(33.33333% + 20px / 2)}.pull-4-of-12{margin-right:calc(33.33333% + 20px / 2)}.col-5-of-12{width:calc(41.66667% - 20px)}.push-5-of-12{margin-left:calc(41.66667% + 20px / 2)}.pull-5-of-12{margin-right:calc(41.66667% + 20px / 2)}.col-7-of-12{width:calc(58.33333% - 20px)}.push-7-of-12{margin-left:calc(58.33333% + 20px / 2)}.pull-7-of-12{margin-right:calc(58.33333% + 20px / 2)}.col-8-of-12{width:calc(66.66667% - 20px)}.push-8-of-12{margin-left:calc(66.66667% + 20px / 2)}.pull-8-of-12{margin-right:calc(66.66667% + 20px / 2)}.col-10-of-12{width:calc(83.33333% - 20px)}.push-10-of-12{margin-left:calc(83.33333% + 20px / 2)}.pull-10-of-12{margin-right:calc(83.33333% + 20px / 2)}.col-11-of-12{width:calc(91.66667% - 20px)}.push-11-of-12{margin-left:calc(91.66667% + 20px / 2)}.pull-11-of-12{margin-right:calc(91.66667% + 20px / 2)}@media (max-width:840px){.m-hide{display:none}.w-m-auto{-ms-flex:1;flex:1}.m-un-push{margin-left:10px}.m-un-pull{margin-right:10px}.col-m-1-of-4,.col-m-2-of-8{width:calc(25% - 20px)}.push-m-1-of-4,.push-m-2-of-8{margin-left:calc(25% + 20px / 2)}.pull-m-1-of-4,.pull-m-2-of-8{margin-right:calc(25% + 20px / 2)}.col-m-2-of-4,.col-m-3-of-6,.col-m-4-of-8{width:calc(50% - 20px)}.push-m-2-of-4,.push-m-3-of-6,.push-m-4-of-8{margin-left:calc(50% + 20px / 2)}.pull-m-2-of-4,.pull-m-3-of-6,.pull-m-4-of-8{margin-right:calc(50% + 20px / 2)}.col-m-3-of-4,.col-m-6-of-8{width:calc(75% - 20px)}.push-m-3-of-4,.push-m-6-of-8{margin-left:calc(75% + 20px / 2)}.pull-m-3-of-4,.pull-m-6-of-8{margin-right:calc(75% + 20px / 2)}.col-m-4-of-4,.col-m-6-of-6,.col-m-8-of-8{width:calc(100% - 20px)}.push-m-4-of-4,.push-m-6-of-6,.push-m-8-of-8{margin-left:calc(100% + 20px / 2)}.pull-m-4-of-4,.pull-m-6-of-6,.pull-m-8-of-8{margin-right:calc(100% + 20px / 2)}.col-m-1-of-6{width:calc(16.66667% - 20px)}.push-m-1-of-6{margin-left:calc(16.66667% + 20px / 2)}.pull-m-1-of-6{margin-right:calc(16.66667% + 20px / 2)}.col-m-2-of-6{width:calc(33.33333% - 20px)}.push-m-2-of-6{margin-left:calc(33.33333% + 20px / 2)}.pull-m-2-of-6{margin-right:calc(33.33333% + 20px / 2)}.col-m-4-of-6{width:calc(66.66667% - 20px)}.push-m-4-of-6{margin-left:calc(66.66667% + 20px / 2)}.pull-m-4-of-6{margin-right:calc(66.66667% + 20px / 2)}.col-m-5-of-6{width:calc(83.33333% - 20px)}.push-m-5-of-6{margin-left:calc(83.33333% + 20px / 2)}.pull-m-5-of-6{margin-right:calc(83.33333% + 20px / 2)}.col-m-1-of-8{width:calc(12.5% - 20px)}.push-m-1-of-8{margin-left:calc(12.5% + 20px / 2)}.pull-m-1-of-8{margin-right:calc(12.5% + 20px / 2)}.col-m-3-of-8{width:calc(37.5% - 20px)}.push-m-3-of-8{margin-left:calc(37.5% + 20px / 2)}.pull-m-3-of-8{margin-right:calc(37.5% + 20px / 2)}.col-m-5-of-8{width:calc(62.5% - 20px)}.push-m-5-of-8{margin-left:calc(62.5% + 20px / 2)}.pull-m-5-of-8{margin-right:calc(62.5% + 20px / 2)}.col-m-7-of-8{width:calc(87.5% - 20px)}.push-m-7-of-8{margin-left:calc(87.5% + 20px / 2)}.pull-m-7-of-8{margin-right:calc(87.5% + 20px / 2)}}@media (max-width:480px){.s-hide{display:none}.w-s-auto{-ms-flex:1;flex:1}.s-un-push{margin-left:10px}.s-un-pull{margin-right:10px}.col-s-1-of-4{width:calc(25% - 20px)}.push-s-1-of-4{margin-left:calc(25% + 20px / 2)}.pull-s-1-of-4{margin-right:calc(25% + 20px / 2)}.col-s-2-of-4,.col-s-3-of-6{width:calc(50% - 20px)}.push-s-2-of-4,.push-s-3-of-6{margin-left:calc(50% + 20px / 2)}.pull-s-2-of-4,.pull-s-3-of-6{margin-right:calc(50% + 20px / 2)}.col-s-3-of-4{width:calc(75% - 20px)}.push-s-3-of-4{margin-left:calc(75% + 20px / 2)}.pull-s-3-of-4{margin-right:calc(75% + 20px / 2)}.col-s-4-of-4,.col-s-6-of-6{width:calc(100% - 20px)}.push-s-4-of-4,.push-s-6-of-6{margin-left:calc(100% + 20px / 2)}.pull-s-4-of-4,.pull-s-6-of-6{margin-right:calc(100% + 20px / 2)}.col-s-1-of-6{width:calc(16.66667% - 20px)}.push-s-1-of-6{margin-left:calc(16.66667% + 20px / 2)}.pull-s-1-of-6{margin-right:calc(16.66667% + 20px / 2)}.col-s-2-of-6{width:calc(33.33333% - 20px)}.push-s-2-of-6{margin-left:calc(33.33333% + 20px / 2)}.pull-s-2-of-6{margin-right:calc(33.33333% + 20px / 2)}.col-s-4-of-6{width:calc(66.66667% - 20px)}.push-s-4-of-6{margin-left:calc(66.66667% + 20px / 2)}.pull-s-4-of-6{margin-right:calc(66.66667% + 20px / 2)}.col-s-5-of-6{width:calc(83.33333% - 20px)}.push-s-5-of-6{margin-left:calc(83.33333% + 20px / 2)}.pull-s-5-of-6{margin-right:calc(83.33333% + 20px / 2)}}@media (min-width:480px){.s-and-lower{display:none}}@media (min-width:840px){.m-and-lower{display:none}} \ No newline at end of file diff --git a/docs/_config.yml b/docs/_config.yml index 16326fa..6408f07 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -10,10 +10,10 @@ url: lucasgruwez.github.io baseurl: /waffle-grid # Custom variables -version: v1.3.4 +version: v1.3.5 cdn: https://unpkg.com/waffle-grid repo: https://github.com/lucasgruwez/waffle-grid -download: https://github.com/lucasgruwez/waffle-grid/releases/download/v1.3.4/waffle-grid.min.css +download: https://github.com/lucasgruwez/waffle-grid/releases/download/v1.3.5/waffle-grid.min.css docs: https://github.com/lucasgruwez/waffle-grid/wiki stargazers: https://github.com/lucasgruwez/waffle-grid/stargazers diff --git a/package.json b/package.json index 016d552..21150c3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "waffle-grid", - "version": "1.3.4", + "version": "1.3.5", "description": "An easy to use flexbox grid system", "main": "dist/waffle-grid.min.css", "repository": { diff --git a/src/waffle-grid.scss b/src/waffle-grid.scss index b3bf1fb..a942f9e 100644 --- a/src/waffle-grid.scss +++ b/src/waffle-grid.scss @@ -1,5 +1,5 @@ /*! - * waffle-grid - v1.3.4 - (https://lucasgruwez.github.io/waffle-grid) + * waffle-grid - v1.3.5 - (https://lucasgruwez.github.io/waffle-grid) * Copyright 2017 Lucas Gruwez. * Licensed under MIT * https://lucasgruwez.github.io/waffle-grid @@ -102,8 +102,8 @@ $breakpoints: ( @media (max-width: $bp-width) { .#{$bp-name}-hide {display: none;} .w-#{$bp-name}-auto {flex: 1} - .#{$bp-name}-un-push {margin-left: 0;} - .#{$bp-name}-un-pull {margin-right: 0;} + .#{$bp-name}-un-push {margin-left: $gutter-width / 2;} + .#{$bp-name}-un-pull {margin-right: $gutter-width / 2;} @each $col-am in $bp-col-ams { @for $i from 1 through $col-am {