diff --git a/RELEASE NOTES.md b/RELEASE NOTES.md index 2a96f2ac0..f27753cff 100755 --- a/RELEASE NOTES.md +++ b/RELEASE NOTES.md @@ -1,5 +1,11 @@ ## RELEASE NOTES +### Version 0.3.0- Sep 28, 2013 + +**Fixes** +- Responsive Grid is now called "Page Grid". Responsive grids are now deprecated. This reduces confusion. +- Negative margins are now automatically removed from grids that are descendents of body tag. + ### Version 0.2.5- Sep 28, 2013 **Fixes** diff --git a/build/less/collections/grid.less b/build/less/collections/grid.less index 9e5b89220..302a6cc12 100644 --- a/build/less/collections/grid.less +++ b/build/less/collections/grid.less @@ -26,6 +26,12 @@ -ms-box-sizing: border-box; box-sizing: border-box; } + +body > .ui.grid { + margin-left: 0%; + margin-right: 0%:; +} + .ui.grid:after, .ui.row:after { content: "."; @@ -92,49 +98,36 @@ *******************************/ -/*------------------- - Page ---------------------*/ +/*----------------------- + Page Grid (Responsive) +-------------------------*/ .ui.page.grid { - margin: 0%; - padding-left: 0%; - padding-right: 0%; -} - - -/*------------------- - Responsive ---------------------*/ - -.ui.responsive.grid { - margin-left: 0% !important; - margin-right: 0% !important; min-width: 320px; } @media only screen and (max-width : 998px) { - .ui.responsive.grid { + .ui.page.grid { padding: 0% 4%; } } @media only screen and (min-width : 998px) { - .ui.responsive.grid { + .ui.page.grid { padding: 0% 8%; } } @media only screen and (min-width : 1500px) { - .ui.responsive.grid { + .ui.page.grid { padding: 0% 13%; } } @media only screen and (min-width : 1750px) { - .ui.responsive.grid { + .ui.page.grid { padding: 0% 18%; } } @media only screen and (min-width : 2000px) { - .ui.responsive.grid { + .ui.page.grid { padding: 0% 23%; } } @@ -418,7 +411,7 @@ box-shadow: none; } -.ui.celled.responsive.grid { +.ui.celled.page.grid { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; diff --git a/build/minified/collections/grid.min.css b/build/minified/collections/grid.min.css index 1f3d09eee..a4ddc9c75 100644 --- a/build/minified/collections/grid.min.css +++ b/build/minified/collections/grid.min.css @@ -1 +1 @@ -.ui.grid{display:block;text-align:left;font-size:0;margin:0 -1.5%;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.grid:after,.ui.row:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.grid>.column,.ui.grid>.row>.column{display:inline-block;text-align:left;font-size:1rem;padding-left:1.5%;padding-right:1.5%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;vertical-align:top}.ui.grid>.row{display:block;width:100%!important;margin-top:1.5%;padding:1.5% 0 0;font-size:0rem}.ui.grid>.row:first-child{padding-top:0rem;margin-top:0rem}.ui.grid>.row>img,.ui.grid>.row>.column>img{max-width:100%}.ui.grid .column>.ui.segment:only-child{margin:0}.ui.page.grid{margin:0;padding:0 2%}.ui.responsive.grid{margin-left:0!important;margin-right:0!important;min-width:320px}@media only screen and (max-width:998px){.ui.responsive.grid{padding:0 4%}}@media only screen and (min-width:998px){.ui.responsive.grid{padding:0 8%}}@media only screen and (min-width:1500px){.ui.responsive.grid{padding:0 13%}}@media only screen and (min-width:1750px){.ui.responsive.grid{padding:0 18%}}@media only screen and (min-width:2000px){.ui.responsive.grid{padding:0 23%}}.ui.grid .one.wide.column{width:6.25%}.ui.grid .two.wide.column{width:12.5%}.ui.grid .three.wide.column{width:18.75%}.ui.grid .four.wide.column{width:25%}.ui.grid .five.wide.column{width:31.25%}.ui.grid .six.wide.column{width:37.5%}.ui.grid .seven.wide.column{width:43.75%}.ui.grid .eight.wide.column{width:50%}.ui.grid .nine.wide.column{width:56.25%}.ui.grid .ten.wide.column{width:62.5%}.ui.grid .eleven.wide.column{width:68.75%}.ui.grid .twelve.wide.column{width:75%}.ui.grid .thirteen.wide.column{width:81.25%}.ui.grid .fourteen.wide.column{width:87.5%}.ui.grid .fifteen.wide.column{width:93.75%}.ui.grid .sixteen.wide.column{width:100%}.ui.grid>.column,.ui.grid>.row>.column{width:6.25%}.ui.one.column.grid>.row>.column,.ui.one.column.grid>.column,.ui.grid>.one.column.row>.column{width:100%}.ui.two.column.grid>.row>.column,.ui.two.column.grid>.column,.ui.grid>.two.column.row>.column{width:50%}.ui.three.column.grid>.row>.column,.ui.three.column.grid>.column,.ui.grid>.three.column.row>.column{width:33.3333%}.ui.four.column.grid>.row>.column,.ui.four.column.grid>.column,.ui.grid>.four.column.row>.column{width:25%}.ui.five.column.grid>.row>.column,.ui.five.column.grid>.column,.ui.grid>.five.column.row>.column{width:20%}.ui.six.column.grid>.row>.column,.ui.six.column.grid>.column,.ui.grid>.six.column.row>.column{width:16.66667%}.ui.seven.column.grid>.row>.column,.ui.seven.column.grid>.column,.ui.grid>.seven.column.row>.column{width:14.2857%}.ui.eight.column.grid>.row>.column,.ui.eight.column.grid>.column,.ui.grid>.eight.column.row>.column{width:12.5%}.ui.nine.column.grid>.row>.column,.ui.nine.column.grid>.column,.ui.grid>.nine.column.row>.column{width:11.1111%}.ui.ten.column.grid>.row>.column,.ui.ten.column.grid>.column,.ui.grid>.ten.column.row>.column{width:10%}.ui.eleven.column.grid>.row>.column,.ui.eleven.column.grid>.column,.ui.grid>.eleven.column.row>.column{width:9.0909%}.ui.twelve.column.grid>.row>.column,.ui.twelve.column.grid>.column,.ui.grid>.twelve.column.row>.column{width:8.3333%}.ui.thirteen.column.grid>.row>.column,.ui.thirteen.column.grid>.column,.ui.grid>.thirteen.column.row>.column{width:7.6923%}.ui.fourteen.column.grid>.row>.column,.ui.fourteen.column.grid>.column,.ui.grid>.fourteen.column.row>.column{width:7.1428%}.ui.fifteen.column.grid>.row>.column,.ui.fifteen.column.grid>.column,.ui.grid>.fifteen.column.row>.column{width:6.6666%}.ui.sixteen.column.grid>.row>.column,.ui.sixteen.column.grid>.column,.ui.grid>.sixteen.column.row>.column{width:6.25%}.ui.grid>.column:only-child,.ui.grid>.row>.column:only-child{width:100%}.ui.relaxed.grid{margin:0 -2.5%}.ui.relaxed.grid>.column,.ui.relaxed.grid>.row>.column{padding-left:2.5%;padding-right:2.5%}.ui.grid .left.floated.column{float:left}.ui.grid .right.floated.column{float:right}.ui.divided.grid,.ui.divided.grid>.row{display:table;width:100%;margin-left:0!important;margin-right:0!important}.ui.divided.grid>.column:not(.row),.ui.divided.grid>.row>.column{display:table-cell;-webkit-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.8);-moz-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.8);box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.8)}.ui.divided.grid>.column.row{display:table}.ui.divided.grid>.column:first-child,.ui.divided.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.vertically.divided.grid>.row{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1),0 -2px 0 0 rgba(255,255,255,.8)!important;-moz-box-shadow:0 -1px 0 0 rgba(0,0,0,.1),0 -2px 0 0 rgba(255,255,255,.8)!important;box-shadow:0 -1px 0 0 rgba(0,0,0,.1),0 -2px 0 0 rgba(255,255,255,.8)!important}.ui.vertically.divided.grid>.row>.column,.ui.vertically.divided.grid>.column:not(.row),.ui.vertically.divided.grid>.row:first-child{-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}.ui.celled.grid{display:table;width:100%;margin-left:0!important;margin-right:0!important;-webkit-box-shadow:0 0 0 1px #DFDFDF;-moz-box-shadow:0 0 0 1px #DFDFDF;box-shadow:0 0 0 1px #DFDFDF}.ui.celled.grid>.row,.ui.celled.grid>.column.row,.ui.celled.grid>.column.row:first-child{display:table;width:100%;margin-top:0;padding-top:0;-webkit-box-shadow:0 -1px 0 0 #dfdfdf;-moz-box-shadow:0 -1px 0 0 #dfdfdf;box-shadow:0 -1px 0 0 #dfdfdf}.ui.celled.grid>.column:not(.row),.ui.celled.grid>.row>.column{display:table-cell;padding:.75em;-webkit-box-shadow:-1px 0 0 0 #dfdfdf;-moz-box-shadow:-1px 0 0 0 #dfdfdf;box-shadow:-1px 0 0 0 #dfdfdf}.ui.celled.grid>.column:first-child,.ui.celled.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.celled.responsive.grid{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.left.aligned.grid,.ui.left.aligned.grid>.row>.column,.ui.left.aligned.grid>.column,.ui.grid .left.aligned.column,.ui.grid>.left.aligned.row>.column{text-align:left}.ui.center.aligned.grid,.ui.center.aligned.grid>.row>.column,.ui.center.aligned.grid>.column,.ui.grid .center.aligned.column,.ui.grid>.center.aligned.row>.column{text-align:center}.ui.right.aligned.grid,.ui.right.aligned.grid>.row>.column,.ui.right.aligned.grid>.column,.ui.grid .right.aligned.column,.ui.grid>.right.aligned.row>.column{text-align:right}.ui.top.aligned.grid,.ui.top.aligned.grid>.row>.column,.ui.top.aligned.grid>.column,.ui.grid .top.aligned.column,.ui.grid>.top.aligned.row>.column{vertical-align:top}.ui.middle.aligned.grid,.ui.middle.aligned.grid>.row>.column,.ui.middle.aligned.grid>.column,.ui.grid .middle.aligned.column,.ui.grid>.middle.aligned.row>.column{vertical-align:middle}.ui.bottom.aligned.grid,.ui.bottom.aligned.grid>.row>.column,.ui.bottom.aligned.grid>.column,.ui.grid .bottom.aligned.column,.ui.grid>.bottom.aligned.row>.column{vertical-align:bottom}.ui.grid>.equal.height.row{display:table;width:100%}.ui.grid>.equal.height.row>.column{display:table-cell}@media only screen and (max-width:768px){.ui.mobile.only.grid,.ui.grid>.mobile.only.row{display:block!important}.ui.grid>.row>.mobile.only.column{display:inline-block!important}.ui.divided.mobile.only.grid,.ui.celled.mobile.only.grid,.ui.divided.mobile.only.grid .row,.ui.celled.mobile.only.grid .row,.ui.divided.grid .mobile.only.row,.ui.celled.grid .mobile.only.row,.ui.grid .mobile.only.equal.height.row,.ui.mobile.only.grid .equal.height.row{display:table!important}.ui.divided.grid>.row>.mobile.only.column,.ui.celled.grid>.row>.mobile.only.column,.ui.divided.mobile.only.grid>.row>.column,.ui.celled.mobile.only.grid>.row>.column,.ui.divided.mobile.only.grid>.column,.ui.celled.mobile.only.grid>.column{display:table-cell!important}}@media only screen and (min-width:768px){.ui.mobile.only.grid,.ui.grid>.mobile.only.row,.ui.grid>.row>.mobile.only.column{display:none}}@media only screen and (min-width:768px) and (max-width:998px){.ui.tablet.only.grid,.ui.grid>.tablet.only.row{display:block!important}.ui.grid>.row>.tablet.only.column{display:inline-block!important}.ui.divided.tablet.only.grid,.ui.celled.tablet.only.grid,.ui.divided.tablet.only.grid .row,.ui.celled.tablet.only.grid .row,.ui.divided.grid .tablet.only.row,.ui.celled.grid .tablet.only.row,.ui.grid .tablet.only.equal.height.row,.ui.tablet.only.grid .equal.height.row{display:table!important}.ui.divided.grid>.row>.tablet.only.column,.ui.celled.grid>.row>.tablet.only.column,.ui.divided.tablet.only.grid>.row>.column,.ui.celled.tablet.only.grid>.row>.column,.ui.divided.tablet.only.grid>.column,.ui.celled.tablet.only.grid>.column{display:table-cell!important}}@media only screen and (max-width:768px),(min-width:998px){.ui.tablet.only.grid,.ui.grid>.tablet.only.row,.ui.grid>.row>.tablet.only.column{display:none}}@media only screen and (min-width:998px){.ui.computer.only.grid,.ui.grid>.computer.only.row{display:block!important}.ui.grid>.row>.computer.only.column{display:inline-block!important}.ui.divided.computer.only.grid,.ui.celled.computer.only.grid,.ui.divided.computer.only.grid .row,.ui.celled.computer.only.grid .row,.ui.divided.grid .computer.only.row,.ui.celled.grid .computer.only.row,.ui.grid .computer.only.equal.height.row,.ui.computer.only.grid .equal.height.row{display:table!important}.ui.divided.grid>.row>.computer.only.column,.ui.celled.grid>.row>.computer.only.column,.ui.divided.computer.only.grid>.row>.column,.ui.celled.computer.only.grid>.row>.column,.ui.divided.computer.only.grid>.column,.ui.celled.computer.only.grid>.column{display:table-cell!important}}@media only screen and (max-width:998px){.ui.computer.only.grid,.ui.grid>.computer.only.row,.ui.grid>.row>.computer.only.column{display:none}}@media only screen and (max-width:768px){.ui.stackable.grid{display:block!important;padding:0}.ui.stackable.grid .row>.column,.ui.stackable.grid>.column{display:block!important;width:auto!important;margin:1.5em 5% 0!important;padding:1.5em 0 0!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}.ui.stackable.divided.grid .column,.ui.stackable.celled.grid .column{border-top:1px dotted rgba(0,0,0,.1)}.ui.stackable.grid>.row:first-child>.column:first-child,.ui.stackable.grid>.column:first-child{margin-top:0!important;padding-top:0!important}.ui.stackable.divided.grid>.row:first-child>.column:first-child,.ui.stackable.celled.grid>.row:first-child>.column:first-child,.ui.stackable.divided.grid>.column:first-child,.ui.stackable.celled.grid>.column:first-child{border-top:0!important}.ui.stackable.grid .vertical.pointing.menu .item:after{display:none}} \ No newline at end of file +.ui.grid{display:block;text-align:left;font-size:0;margin:0 -1.5%;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}body>.ui.grid{margin-left:0;margin-right:0:}.ui.grid:after,.ui.row:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.grid>.column,.ui.grid>.row>.column{display:inline-block;text-align:left;font-size:1rem;padding-left:1.5%;padding-right:1.5%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;vertical-align:top}.ui.grid>.row{display:block;width:100%!important;margin-top:1.5%;padding:1.5% 0 0;font-size:0rem}.ui.grid>.row:first-child{padding-top:0rem;margin-top:0rem}.ui.grid>.row>img,.ui.grid>.row>.column>img{max-width:100%}.ui.grid .column>.ui.segment:only-child{margin:0}.ui.page.grid{min-width:320px}@media only screen and (max-width:998px){.ui.page.grid{padding:0 4%}}@media only screen and (min-width:998px){.ui.page.grid{padding:0 8%}}@media only screen and (min-width:1500px){.ui.page.grid{padding:0 13%}}@media only screen and (min-width:1750px){.ui.page.grid{padding:0 18%}}@media only screen and (min-width:2000px){.ui.page.grid{padding:0 23%}}.ui.grid .one.wide.column{width:6.25%}.ui.grid .two.wide.column{width:12.5%}.ui.grid .three.wide.column{width:18.75%}.ui.grid .four.wide.column{width:25%}.ui.grid .five.wide.column{width:31.25%}.ui.grid .six.wide.column{width:37.5%}.ui.grid .seven.wide.column{width:43.75%}.ui.grid .eight.wide.column{width:50%}.ui.grid .nine.wide.column{width:56.25%}.ui.grid .ten.wide.column{width:62.5%}.ui.grid .eleven.wide.column{width:68.75%}.ui.grid .twelve.wide.column{width:75%}.ui.grid .thirteen.wide.column{width:81.25%}.ui.grid .fourteen.wide.column{width:87.5%}.ui.grid .fifteen.wide.column{width:93.75%}.ui.grid .sixteen.wide.column{width:100%}.ui.grid>.column,.ui.grid>.row>.column{width:6.25%}.ui.one.column.grid>.row>.column,.ui.one.column.grid>.column,.ui.grid>.one.column.row>.column{width:100%}.ui.two.column.grid>.row>.column,.ui.two.column.grid>.column,.ui.grid>.two.column.row>.column{width:50%}.ui.three.column.grid>.row>.column,.ui.three.column.grid>.column,.ui.grid>.three.column.row>.column{width:33.3333%}.ui.four.column.grid>.row>.column,.ui.four.column.grid>.column,.ui.grid>.four.column.row>.column{width:25%}.ui.five.column.grid>.row>.column,.ui.five.column.grid>.column,.ui.grid>.five.column.row>.column{width:20%}.ui.six.column.grid>.row>.column,.ui.six.column.grid>.column,.ui.grid>.six.column.row>.column{width:16.66667%}.ui.seven.column.grid>.row>.column,.ui.seven.column.grid>.column,.ui.grid>.seven.column.row>.column{width:14.2857%}.ui.eight.column.grid>.row>.column,.ui.eight.column.grid>.column,.ui.grid>.eight.column.row>.column{width:12.5%}.ui.nine.column.grid>.row>.column,.ui.nine.column.grid>.column,.ui.grid>.nine.column.row>.column{width:11.1111%}.ui.ten.column.grid>.row>.column,.ui.ten.column.grid>.column,.ui.grid>.ten.column.row>.column{width:10%}.ui.eleven.column.grid>.row>.column,.ui.eleven.column.grid>.column,.ui.grid>.eleven.column.row>.column{width:9.0909%}.ui.twelve.column.grid>.row>.column,.ui.twelve.column.grid>.column,.ui.grid>.twelve.column.row>.column{width:8.3333%}.ui.thirteen.column.grid>.row>.column,.ui.thirteen.column.grid>.column,.ui.grid>.thirteen.column.row>.column{width:7.6923%}.ui.fourteen.column.grid>.row>.column,.ui.fourteen.column.grid>.column,.ui.grid>.fourteen.column.row>.column{width:7.1428%}.ui.fifteen.column.grid>.row>.column,.ui.fifteen.column.grid>.column,.ui.grid>.fifteen.column.row>.column{width:6.6666%}.ui.sixteen.column.grid>.row>.column,.ui.sixteen.column.grid>.column,.ui.grid>.sixteen.column.row>.column{width:6.25%}.ui.grid>.column:only-child,.ui.grid>.row>.column:only-child{width:100%}.ui.relaxed.grid{margin:0 -2.5%}.ui.relaxed.grid>.column,.ui.relaxed.grid>.row>.column{padding-left:2.5%;padding-right:2.5%}.ui.grid .left.floated.column{float:left}.ui.grid .right.floated.column{float:right}.ui.divided.grid,.ui.divided.grid>.row{display:table;width:100%;margin-left:0!important;margin-right:0!important}.ui.divided.grid>.column:not(.row),.ui.divided.grid>.row>.column{display:table-cell;-webkit-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.8);-moz-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.8);box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.8)}.ui.divided.grid>.column.row{display:table}.ui.divided.grid>.column:first-child,.ui.divided.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.vertically.divided.grid>.row{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1),0 -2px 0 0 rgba(255,255,255,.8)!important;-moz-box-shadow:0 -1px 0 0 rgba(0,0,0,.1),0 -2px 0 0 rgba(255,255,255,.8)!important;box-shadow:0 -1px 0 0 rgba(0,0,0,.1),0 -2px 0 0 rgba(255,255,255,.8)!important}.ui.vertically.divided.grid>.row>.column,.ui.vertically.divided.grid>.column:not(.row),.ui.vertically.divided.grid>.row:first-child{-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}.ui.celled.grid{display:table;width:100%;margin-left:0!important;margin-right:0!important;-webkit-box-shadow:0 0 0 1px #DFDFDF;-moz-box-shadow:0 0 0 1px #DFDFDF;box-shadow:0 0 0 1px #DFDFDF}.ui.celled.grid>.row,.ui.celled.grid>.column.row,.ui.celled.grid>.column.row:first-child{display:table;width:100%;margin-top:0;padding-top:0;-webkit-box-shadow:0 -1px 0 0 #dfdfdf;-moz-box-shadow:0 -1px 0 0 #dfdfdf;box-shadow:0 -1px 0 0 #dfdfdf}.ui.celled.grid>.column:not(.row),.ui.celled.grid>.row>.column{display:table-cell;padding:.75em;-webkit-box-shadow:-1px 0 0 0 #dfdfdf;-moz-box-shadow:-1px 0 0 0 #dfdfdf;box-shadow:-1px 0 0 0 #dfdfdf}.ui.celled.grid>.column:first-child,.ui.celled.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.celled.page.grid{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.left.aligned.grid,.ui.left.aligned.grid>.row>.column,.ui.left.aligned.grid>.column,.ui.grid .left.aligned.column,.ui.grid>.left.aligned.row>.column{text-align:left}.ui.center.aligned.grid,.ui.center.aligned.grid>.row>.column,.ui.center.aligned.grid>.column,.ui.grid .center.aligned.column,.ui.grid>.center.aligned.row>.column{text-align:center}.ui.right.aligned.grid,.ui.right.aligned.grid>.row>.column,.ui.right.aligned.grid>.column,.ui.grid .right.aligned.column,.ui.grid>.right.aligned.row>.column{text-align:right}.ui.top.aligned.grid,.ui.top.aligned.grid>.row>.column,.ui.top.aligned.grid>.column,.ui.grid .top.aligned.column,.ui.grid>.top.aligned.row>.column{vertical-align:top}.ui.middle.aligned.grid,.ui.middle.aligned.grid>.row>.column,.ui.middle.aligned.grid>.column,.ui.grid .middle.aligned.column,.ui.grid>.middle.aligned.row>.column{vertical-align:middle}.ui.bottom.aligned.grid,.ui.bottom.aligned.grid>.row>.column,.ui.bottom.aligned.grid>.column,.ui.grid .bottom.aligned.column,.ui.grid>.bottom.aligned.row>.column{vertical-align:bottom}.ui.grid>.equal.height.row{display:table;width:100%}.ui.grid>.equal.height.row>.column{display:table-cell}@media only screen and (max-width:768px){.ui.mobile.only.grid,.ui.grid>.mobile.only.row{display:block!important}.ui.grid>.row>.mobile.only.column{display:inline-block!important}.ui.divided.mobile.only.grid,.ui.celled.mobile.only.grid,.ui.divided.mobile.only.grid .row,.ui.celled.mobile.only.grid .row,.ui.divided.grid .mobile.only.row,.ui.celled.grid .mobile.only.row,.ui.grid .mobile.only.equal.height.row,.ui.mobile.only.grid .equal.height.row{display:table!important}.ui.divided.grid>.row>.mobile.only.column,.ui.celled.grid>.row>.mobile.only.column,.ui.divided.mobile.only.grid>.row>.column,.ui.celled.mobile.only.grid>.row>.column,.ui.divided.mobile.only.grid>.column,.ui.celled.mobile.only.grid>.column{display:table-cell!important}}@media only screen and (min-width:768px){.ui.mobile.only.grid,.ui.grid>.mobile.only.row,.ui.grid>.row>.mobile.only.column{display:none}}@media only screen and (min-width:768px) and (max-width:998px){.ui.tablet.only.grid,.ui.grid>.tablet.only.row{display:block!important}.ui.grid>.row>.tablet.only.column{display:inline-block!important}.ui.divided.tablet.only.grid,.ui.celled.tablet.only.grid,.ui.divided.tablet.only.grid .row,.ui.celled.tablet.only.grid .row,.ui.divided.grid .tablet.only.row,.ui.celled.grid .tablet.only.row,.ui.grid .tablet.only.equal.height.row,.ui.tablet.only.grid .equal.height.row{display:table!important}.ui.divided.grid>.row>.tablet.only.column,.ui.celled.grid>.row>.tablet.only.column,.ui.divided.tablet.only.grid>.row>.column,.ui.celled.tablet.only.grid>.row>.column,.ui.divided.tablet.only.grid>.column,.ui.celled.tablet.only.grid>.column{display:table-cell!important}}@media only screen and (max-width:768px),(min-width:998px){.ui.tablet.only.grid,.ui.grid>.tablet.only.row,.ui.grid>.row>.tablet.only.column{display:none}}@media only screen and (min-width:998px){.ui.computer.only.grid,.ui.grid>.computer.only.row{display:block!important}.ui.grid>.row>.computer.only.column{display:inline-block!important}.ui.divided.computer.only.grid,.ui.celled.computer.only.grid,.ui.divided.computer.only.grid .row,.ui.celled.computer.only.grid .row,.ui.divided.grid .computer.only.row,.ui.celled.grid .computer.only.row,.ui.grid .computer.only.equal.height.row,.ui.computer.only.grid .equal.height.row{display:table!important}.ui.divided.grid>.row>.computer.only.column,.ui.celled.grid>.row>.computer.only.column,.ui.divided.computer.only.grid>.row>.column,.ui.celled.computer.only.grid>.row>.column,.ui.divided.computer.only.grid>.column,.ui.celled.computer.only.grid>.column{display:table-cell!important}}@media only screen and (max-width:998px){.ui.computer.only.grid,.ui.grid>.computer.only.row,.ui.grid>.row>.computer.only.column{display:none}}@media only screen and (max-width:768px){.ui.stackable.grid{display:block!important;padding:0}.ui.stackable.grid .row>.column,.ui.stackable.grid>.column{display:block!important;width:auto!important;margin:1.5em 5% 0!important;padding:1.5em 0 0!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}.ui.stackable.divided.grid .column,.ui.stackable.celled.grid .column{border-top:1px dotted rgba(0,0,0,.1)}.ui.stackable.grid>.row:first-child>.column:first-child,.ui.stackable.grid>.column:first-child{margin-top:0!important;padding-top:0!important}.ui.stackable.divided.grid>.row:first-child>.column:first-child,.ui.stackable.celled.grid>.row:first-child>.column:first-child,.ui.stackable.divided.grid>.column:first-child,.ui.stackable.celled.grid>.column:first-child{border-top:0!important}.ui.stackable.grid .vertical.pointing.menu .item:after{display:none}} \ No newline at end of file diff --git a/build/packaged/css/semantic.css.REMOVED.git-id b/build/packaged/css/semantic.css.REMOVED.git-id index 731e708af..f9a8ad0e7 100644 --- a/build/packaged/css/semantic.css.REMOVED.git-id +++ b/build/packaged/css/semantic.css.REMOVED.git-id @@ -1 +1 @@ -922e6f1374b05dcf93dad02058e1b6f46f161216 \ No newline at end of file +36de00ec3a8e5475ddfc8b6803f8c9110744bfce \ No newline at end of file diff --git a/build/packaged/css/semantic.min.css.REMOVED.git-id b/build/packaged/css/semantic.min.css.REMOVED.git-id index 62db65e33..e9c7e738d 100644 --- a/build/packaged/css/semantic.min.css.REMOVED.git-id +++ b/build/packaged/css/semantic.min.css.REMOVED.git-id @@ -1 +1 @@ -d63fb61b1d2fbd86e5a501c1bd18551b68d88699 \ No newline at end of file +6a14aafc754c7fc499198dce8fa2ee168e9825ea \ No newline at end of file diff --git a/build/packaged/javascript/semantic.min.js.REMOVED.git-id b/build/packaged/javascript/semantic.min.js.REMOVED.git-id index a0b06324d..d630b5643 100644 --- a/build/packaged/javascript/semantic.min.js.REMOVED.git-id +++ b/build/packaged/javascript/semantic.min.js.REMOVED.git-id @@ -1 +1 @@ -3a6e005c9da9ba2d8bc73d7488c6072b899315ca \ No newline at end of file +cfec6cf44c9f82717d737ed090b06199ba546d98 \ No newline at end of file diff --git a/build/uncompressed/collections/grid.css b/build/uncompressed/collections/grid.css index bd79875fa..75fcd1b79 100644 --- a/build/uncompressed/collections/grid.css +++ b/build/uncompressed/collections/grid.css @@ -22,6 +22,10 @@ -ms-box-sizing: border-box; box-sizing: border-box; } +body > .ui.grid { + margin-left: 0%; + margin-right: 0%:; +} .ui.grid:after, .ui.row:after { content: "."; @@ -73,44 +77,34 @@ /******************************* Variations *******************************/ -/*------------------- - Page ---------------------*/ +/*----------------------- + Page Grid (Responsive) +-------------------------*/ .ui.page.grid { - margin: 0%; - padding-left: 0%; - padding-right: 0%; -} -/*------------------- - Responsive ---------------------*/ -.ui.responsive.grid { - margin-left: 0% !important; - margin-right: 0% !important; min-width: 320px; } @media only screen and (max-width: 998px) { - .ui.responsive.grid { + .ui.page.grid { padding: 0% 4%; } } @media only screen and (min-width: 998px) { - .ui.responsive.grid { + .ui.page.grid { padding: 0% 8%; } } @media only screen and (min-width: 1500px) { - .ui.responsive.grid { + .ui.page.grid { padding: 0% 13%; } } @media only screen and (min-width: 1750px) { - .ui.responsive.grid { + .ui.page.grid { padding: 0% 18%; } } @media only screen and (min-width: 2000px) { - .ui.responsive.grid { + .ui.page.grid { padding: 0% 23%; } } @@ -356,7 +350,7 @@ -moz-box-shadow: none; box-shadow: none; } -.ui.celled.responsive.grid { +.ui.celled.page.grid { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; diff --git a/node/package.json b/node/package.json index 0d11b32cc..e38619c9d 100755 --- a/node/package.json +++ b/node/package.json @@ -1,7 +1,7 @@ { "semantic": { "name": "Semantic UI", - "version": "0.2.5" + "version": "0.3.0" }, "dependencies": { "docpad": "~6.53.0", diff --git a/node/src/documents/collection.html.eco b/node/src/documents/collection.html.eco index a4335709f..bc421f540 100755 --- a/node/src/documents/collection.html.eco +++ b/node/src/documents/collection.html.eco @@ -62,7 +62,7 @@ type : 'Semantic'
-
+
1
2
3
diff --git a/node/src/documents/collections/grid.html.eco b/node/src/documents/collections/grid.html.eco index 861895142..77de2f87c 100755 --- a/node/src/documents/collections/grid.html.eco +++ b/node/src/documents/collections/grid.html.eco @@ -248,13 +248,13 @@ type : 'UI Collection'

Types

- -
+

Page Grid

-

A page grid is a grid that exists on the top level of a website and includes gutters to the left and right.

+

A page grid exists on the top level of a web site. It can change its left and right gutter size to be responsive to a browser's width. This means the gutters to left and right of grid columns will alter in size as a browser's resolution increases.

-
- It is important to note, that padding is applied directly to columns, which means other ui elements should not be used in combination with column, but directly as children.
+
+ Semantic UI's page grid by default will change the page gutters to increase at 250pixel intervals. +
@@ -399,123 +399,6 @@ type : 'UI Collection'

Grid

-
-

Responsive to Size

-

A grid can change its size to be responsive to a browser's width. This means the gutters to left and right of grid columns will alter in size as a browser's resolution increases.

- -
- Semantic UI's responsive grid by default will change the page gutters to increase at 250pixel intervals. -
- -
- -
-
- Inbox -

Welcome to your inbox. Would you like to see more information?

-
-
-
-
- -
-

Responsive to Device

-

A grid can have its columns, or rows only show for either a computer, tablet, or mobile.

-
- Breakpoints are 768 for mobile, 768-998 for tablet and 998 for pc -
-
-
-
-
- Mobile -
-
-
-
- Mobile -
-
-
-
-
-
- Computer -
-
-
-
- Tablet and Mobile -
-
-
-
- All Sizes -
-
-
-
- All Sizes -
-
-
-
-
-
- Computer -
-
-
-
- Computer -
-
-
-
- Computer -
-
-
-
- Computer -
-
-
-
-
-
- Tablet -
-
-
-
- Tablet -
-
-
-
- Tablet -
-
-
-
-
-

Specifying Column Count Per Row

A grid can have a different number of columns per row

@@ -717,6 +600,89 @@ type : 'UI Collection'

Rows

+
+

Responsive to Device

+

A grid can have its columns, or rows only show content for computer, tablet, or mobile.

+
+ Breakpoints are 768 for mobile, 768-998 for tablet and 998 for pc +
+
+
+
+
+ Mobile +
+
+
+
+ Mobile +
+
+
+
+
+
+ Computer +
+
+
+
+ Tablet and Mobile +
+
+
+
+ All Sizes +
+
+
+
+ All Sizes +
+
+
+
+
+
+ Computer +
+
+
+
+ Computer +
+
+
+
+ Computer +
+
+
+
+ Computer +
+
+
+
+
+
+ Tablet +
+
+
+
+ Tablet +
+
+
+
+ Tablet +
+
+
+
+
+

Equal Height

A row can specify that it is equal height so all of its columns appear the length of its longest column.

diff --git a/node/src/documents/index.html.eco b/node/src/documents/index.html.eco index 0e7d519b0..7e17cd3ef 100755 --- a/node/src/documents/index.html.eco +++ b/node/src/documents/index.html.eco @@ -11,10 +11,10 @@ type : 'Semantic'
-
+
-

Semantic UI 0.2.5

+

Semantic UI 0.3.0

UI is the vocabulary of the web.

Semantic empowers designers and developers by creating a language for sharing UI.

View UI @@ -27,7 +27,7 @@ type : 'Semantic'
-
+

@@ -118,7 +118,7 @@ type : 'Semantic'

-
+

@@ -157,7 +157,7 @@ type : 'Semantic'

-
+

Let's create some tabs

@@ -188,7 +188,7 @@ type : 'Semantic'
-
+

diff --git a/node/src/files/build/less/collections/grid.less b/node/src/files/build/less/collections/grid.less index 9e5b89220..302a6cc12 100644 --- a/node/src/files/build/less/collections/grid.less +++ b/node/src/files/build/less/collections/grid.less @@ -26,6 +26,12 @@ -ms-box-sizing: border-box; box-sizing: border-box; } + +body > .ui.grid { + margin-left: 0%; + margin-right: 0%:; +} + .ui.grid:after, .ui.row:after { content: "."; @@ -92,49 +98,36 @@ *******************************/ -/*------------------- - Page ---------------------*/ +/*----------------------- + Page Grid (Responsive) +-------------------------*/ .ui.page.grid { - margin: 0%; - padding-left: 0%; - padding-right: 0%; -} - - -/*------------------- - Responsive ---------------------*/ - -.ui.responsive.grid { - margin-left: 0% !important; - margin-right: 0% !important; min-width: 320px; } @media only screen and (max-width : 998px) { - .ui.responsive.grid { + .ui.page.grid { padding: 0% 4%; } } @media only screen and (min-width : 998px) { - .ui.responsive.grid { + .ui.page.grid { padding: 0% 8%; } } @media only screen and (min-width : 1500px) { - .ui.responsive.grid { + .ui.page.grid { padding: 0% 13%; } } @media only screen and (min-width : 1750px) { - .ui.responsive.grid { + .ui.page.grid { padding: 0% 18%; } } @media only screen and (min-width : 2000px) { - .ui.responsive.grid { + .ui.page.grid { padding: 0% 23%; } } @@ -418,7 +411,7 @@ box-shadow: none; } -.ui.celled.responsive.grid { +.ui.celled.page.grid { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; diff --git a/node/src/files/build/minified/collections/grid.min.css b/node/src/files/build/minified/collections/grid.min.css index 1f3d09eee..a4ddc9c75 100644 --- a/node/src/files/build/minified/collections/grid.min.css +++ b/node/src/files/build/minified/collections/grid.min.css @@ -1 +1 @@ -.ui.grid{display:block;text-align:left;font-size:0;margin:0 -1.5%;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.grid:after,.ui.row:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.grid>.column,.ui.grid>.row>.column{display:inline-block;text-align:left;font-size:1rem;padding-left:1.5%;padding-right:1.5%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;vertical-align:top}.ui.grid>.row{display:block;width:100%!important;margin-top:1.5%;padding:1.5% 0 0;font-size:0rem}.ui.grid>.row:first-child{padding-top:0rem;margin-top:0rem}.ui.grid>.row>img,.ui.grid>.row>.column>img{max-width:100%}.ui.grid .column>.ui.segment:only-child{margin:0}.ui.page.grid{margin:0;padding:0 2%}.ui.responsive.grid{margin-left:0!important;margin-right:0!important;min-width:320px}@media only screen and (max-width:998px){.ui.responsive.grid{padding:0 4%}}@media only screen and (min-width:998px){.ui.responsive.grid{padding:0 8%}}@media only screen and (min-width:1500px){.ui.responsive.grid{padding:0 13%}}@media only screen and (min-width:1750px){.ui.responsive.grid{padding:0 18%}}@media only screen and (min-width:2000px){.ui.responsive.grid{padding:0 23%}}.ui.grid .one.wide.column{width:6.25%}.ui.grid .two.wide.column{width:12.5%}.ui.grid .three.wide.column{width:18.75%}.ui.grid .four.wide.column{width:25%}.ui.grid .five.wide.column{width:31.25%}.ui.grid .six.wide.column{width:37.5%}.ui.grid .seven.wide.column{width:43.75%}.ui.grid .eight.wide.column{width:50%}.ui.grid .nine.wide.column{width:56.25%}.ui.grid .ten.wide.column{width:62.5%}.ui.grid .eleven.wide.column{width:68.75%}.ui.grid .twelve.wide.column{width:75%}.ui.grid .thirteen.wide.column{width:81.25%}.ui.grid .fourteen.wide.column{width:87.5%}.ui.grid .fifteen.wide.column{width:93.75%}.ui.grid .sixteen.wide.column{width:100%}.ui.grid>.column,.ui.grid>.row>.column{width:6.25%}.ui.one.column.grid>.row>.column,.ui.one.column.grid>.column,.ui.grid>.one.column.row>.column{width:100%}.ui.two.column.grid>.row>.column,.ui.two.column.grid>.column,.ui.grid>.two.column.row>.column{width:50%}.ui.three.column.grid>.row>.column,.ui.three.column.grid>.column,.ui.grid>.three.column.row>.column{width:33.3333%}.ui.four.column.grid>.row>.column,.ui.four.column.grid>.column,.ui.grid>.four.column.row>.column{width:25%}.ui.five.column.grid>.row>.column,.ui.five.column.grid>.column,.ui.grid>.five.column.row>.column{width:20%}.ui.six.column.grid>.row>.column,.ui.six.column.grid>.column,.ui.grid>.six.column.row>.column{width:16.66667%}.ui.seven.column.grid>.row>.column,.ui.seven.column.grid>.column,.ui.grid>.seven.column.row>.column{width:14.2857%}.ui.eight.column.grid>.row>.column,.ui.eight.column.grid>.column,.ui.grid>.eight.column.row>.column{width:12.5%}.ui.nine.column.grid>.row>.column,.ui.nine.column.grid>.column,.ui.grid>.nine.column.row>.column{width:11.1111%}.ui.ten.column.grid>.row>.column,.ui.ten.column.grid>.column,.ui.grid>.ten.column.row>.column{width:10%}.ui.eleven.column.grid>.row>.column,.ui.eleven.column.grid>.column,.ui.grid>.eleven.column.row>.column{width:9.0909%}.ui.twelve.column.grid>.row>.column,.ui.twelve.column.grid>.column,.ui.grid>.twelve.column.row>.column{width:8.3333%}.ui.thirteen.column.grid>.row>.column,.ui.thirteen.column.grid>.column,.ui.grid>.thirteen.column.row>.column{width:7.6923%}.ui.fourteen.column.grid>.row>.column,.ui.fourteen.column.grid>.column,.ui.grid>.fourteen.column.row>.column{width:7.1428%}.ui.fifteen.column.grid>.row>.column,.ui.fifteen.column.grid>.column,.ui.grid>.fifteen.column.row>.column{width:6.6666%}.ui.sixteen.column.grid>.row>.column,.ui.sixteen.column.grid>.column,.ui.grid>.sixteen.column.row>.column{width:6.25%}.ui.grid>.column:only-child,.ui.grid>.row>.column:only-child{width:100%}.ui.relaxed.grid{margin:0 -2.5%}.ui.relaxed.grid>.column,.ui.relaxed.grid>.row>.column{padding-left:2.5%;padding-right:2.5%}.ui.grid .left.floated.column{float:left}.ui.grid .right.floated.column{float:right}.ui.divided.grid,.ui.divided.grid>.row{display:table;width:100%;margin-left:0!important;margin-right:0!important}.ui.divided.grid>.column:not(.row),.ui.divided.grid>.row>.column{display:table-cell;-webkit-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.8);-moz-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.8);box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.8)}.ui.divided.grid>.column.row{display:table}.ui.divided.grid>.column:first-child,.ui.divided.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.vertically.divided.grid>.row{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1),0 -2px 0 0 rgba(255,255,255,.8)!important;-moz-box-shadow:0 -1px 0 0 rgba(0,0,0,.1),0 -2px 0 0 rgba(255,255,255,.8)!important;box-shadow:0 -1px 0 0 rgba(0,0,0,.1),0 -2px 0 0 rgba(255,255,255,.8)!important}.ui.vertically.divided.grid>.row>.column,.ui.vertically.divided.grid>.column:not(.row),.ui.vertically.divided.grid>.row:first-child{-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}.ui.celled.grid{display:table;width:100%;margin-left:0!important;margin-right:0!important;-webkit-box-shadow:0 0 0 1px #DFDFDF;-moz-box-shadow:0 0 0 1px #DFDFDF;box-shadow:0 0 0 1px #DFDFDF}.ui.celled.grid>.row,.ui.celled.grid>.column.row,.ui.celled.grid>.column.row:first-child{display:table;width:100%;margin-top:0;padding-top:0;-webkit-box-shadow:0 -1px 0 0 #dfdfdf;-moz-box-shadow:0 -1px 0 0 #dfdfdf;box-shadow:0 -1px 0 0 #dfdfdf}.ui.celled.grid>.column:not(.row),.ui.celled.grid>.row>.column{display:table-cell;padding:.75em;-webkit-box-shadow:-1px 0 0 0 #dfdfdf;-moz-box-shadow:-1px 0 0 0 #dfdfdf;box-shadow:-1px 0 0 0 #dfdfdf}.ui.celled.grid>.column:first-child,.ui.celled.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.celled.responsive.grid{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.left.aligned.grid,.ui.left.aligned.grid>.row>.column,.ui.left.aligned.grid>.column,.ui.grid .left.aligned.column,.ui.grid>.left.aligned.row>.column{text-align:left}.ui.center.aligned.grid,.ui.center.aligned.grid>.row>.column,.ui.center.aligned.grid>.column,.ui.grid .center.aligned.column,.ui.grid>.center.aligned.row>.column{text-align:center}.ui.right.aligned.grid,.ui.right.aligned.grid>.row>.column,.ui.right.aligned.grid>.column,.ui.grid .right.aligned.column,.ui.grid>.right.aligned.row>.column{text-align:right}.ui.top.aligned.grid,.ui.top.aligned.grid>.row>.column,.ui.top.aligned.grid>.column,.ui.grid .top.aligned.column,.ui.grid>.top.aligned.row>.column{vertical-align:top}.ui.middle.aligned.grid,.ui.middle.aligned.grid>.row>.column,.ui.middle.aligned.grid>.column,.ui.grid .middle.aligned.column,.ui.grid>.middle.aligned.row>.column{vertical-align:middle}.ui.bottom.aligned.grid,.ui.bottom.aligned.grid>.row>.column,.ui.bottom.aligned.grid>.column,.ui.grid .bottom.aligned.column,.ui.grid>.bottom.aligned.row>.column{vertical-align:bottom}.ui.grid>.equal.height.row{display:table;width:100%}.ui.grid>.equal.height.row>.column{display:table-cell}@media only screen and (max-width:768px){.ui.mobile.only.grid,.ui.grid>.mobile.only.row{display:block!important}.ui.grid>.row>.mobile.only.column{display:inline-block!important}.ui.divided.mobile.only.grid,.ui.celled.mobile.only.grid,.ui.divided.mobile.only.grid .row,.ui.celled.mobile.only.grid .row,.ui.divided.grid .mobile.only.row,.ui.celled.grid .mobile.only.row,.ui.grid .mobile.only.equal.height.row,.ui.mobile.only.grid .equal.height.row{display:table!important}.ui.divided.grid>.row>.mobile.only.column,.ui.celled.grid>.row>.mobile.only.column,.ui.divided.mobile.only.grid>.row>.column,.ui.celled.mobile.only.grid>.row>.column,.ui.divided.mobile.only.grid>.column,.ui.celled.mobile.only.grid>.column{display:table-cell!important}}@media only screen and (min-width:768px){.ui.mobile.only.grid,.ui.grid>.mobile.only.row,.ui.grid>.row>.mobile.only.column{display:none}}@media only screen and (min-width:768px) and (max-width:998px){.ui.tablet.only.grid,.ui.grid>.tablet.only.row{display:block!important}.ui.grid>.row>.tablet.only.column{display:inline-block!important}.ui.divided.tablet.only.grid,.ui.celled.tablet.only.grid,.ui.divided.tablet.only.grid .row,.ui.celled.tablet.only.grid .row,.ui.divided.grid .tablet.only.row,.ui.celled.grid .tablet.only.row,.ui.grid .tablet.only.equal.height.row,.ui.tablet.only.grid .equal.height.row{display:table!important}.ui.divided.grid>.row>.tablet.only.column,.ui.celled.grid>.row>.tablet.only.column,.ui.divided.tablet.only.grid>.row>.column,.ui.celled.tablet.only.grid>.row>.column,.ui.divided.tablet.only.grid>.column,.ui.celled.tablet.only.grid>.column{display:table-cell!important}}@media only screen and (max-width:768px),(min-width:998px){.ui.tablet.only.grid,.ui.grid>.tablet.only.row,.ui.grid>.row>.tablet.only.column{display:none}}@media only screen and (min-width:998px){.ui.computer.only.grid,.ui.grid>.computer.only.row{display:block!important}.ui.grid>.row>.computer.only.column{display:inline-block!important}.ui.divided.computer.only.grid,.ui.celled.computer.only.grid,.ui.divided.computer.only.grid .row,.ui.celled.computer.only.grid .row,.ui.divided.grid .computer.only.row,.ui.celled.grid .computer.only.row,.ui.grid .computer.only.equal.height.row,.ui.computer.only.grid .equal.height.row{display:table!important}.ui.divided.grid>.row>.computer.only.column,.ui.celled.grid>.row>.computer.only.column,.ui.divided.computer.only.grid>.row>.column,.ui.celled.computer.only.grid>.row>.column,.ui.divided.computer.only.grid>.column,.ui.celled.computer.only.grid>.column{display:table-cell!important}}@media only screen and (max-width:998px){.ui.computer.only.grid,.ui.grid>.computer.only.row,.ui.grid>.row>.computer.only.column{display:none}}@media only screen and (max-width:768px){.ui.stackable.grid{display:block!important;padding:0}.ui.stackable.grid .row>.column,.ui.stackable.grid>.column{display:block!important;width:auto!important;margin:1.5em 5% 0!important;padding:1.5em 0 0!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}.ui.stackable.divided.grid .column,.ui.stackable.celled.grid .column{border-top:1px dotted rgba(0,0,0,.1)}.ui.stackable.grid>.row:first-child>.column:first-child,.ui.stackable.grid>.column:first-child{margin-top:0!important;padding-top:0!important}.ui.stackable.divided.grid>.row:first-child>.column:first-child,.ui.stackable.celled.grid>.row:first-child>.column:first-child,.ui.stackable.divided.grid>.column:first-child,.ui.stackable.celled.grid>.column:first-child{border-top:0!important}.ui.stackable.grid .vertical.pointing.menu .item:after{display:none}} \ No newline at end of file +.ui.grid{display:block;text-align:left;font-size:0;margin:0 -1.5%;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}body>.ui.grid{margin-left:0;margin-right:0:}.ui.grid:after,.ui.row:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.grid>.column,.ui.grid>.row>.column{display:inline-block;text-align:left;font-size:1rem;padding-left:1.5%;padding-right:1.5%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;vertical-align:top}.ui.grid>.row{display:block;width:100%!important;margin-top:1.5%;padding:1.5% 0 0;font-size:0rem}.ui.grid>.row:first-child{padding-top:0rem;margin-top:0rem}.ui.grid>.row>img,.ui.grid>.row>.column>img{max-width:100%}.ui.grid .column>.ui.segment:only-child{margin:0}.ui.page.grid{min-width:320px}@media only screen and (max-width:998px){.ui.page.grid{padding:0 4%}}@media only screen and (min-width:998px){.ui.page.grid{padding:0 8%}}@media only screen and (min-width:1500px){.ui.page.grid{padding:0 13%}}@media only screen and (min-width:1750px){.ui.page.grid{padding:0 18%}}@media only screen and (min-width:2000px){.ui.page.grid{padding:0 23%}}.ui.grid .one.wide.column{width:6.25%}.ui.grid .two.wide.column{width:12.5%}.ui.grid .three.wide.column{width:18.75%}.ui.grid .four.wide.column{width:25%}.ui.grid .five.wide.column{width:31.25%}.ui.grid .six.wide.column{width:37.5%}.ui.grid .seven.wide.column{width:43.75%}.ui.grid .eight.wide.column{width:50%}.ui.grid .nine.wide.column{width:56.25%}.ui.grid .ten.wide.column{width:62.5%}.ui.grid .eleven.wide.column{width:68.75%}.ui.grid .twelve.wide.column{width:75%}.ui.grid .thirteen.wide.column{width:81.25%}.ui.grid .fourteen.wide.column{width:87.5%}.ui.grid .fifteen.wide.column{width:93.75%}.ui.grid .sixteen.wide.column{width:100%}.ui.grid>.column,.ui.grid>.row>.column{width:6.25%}.ui.one.column.grid>.row>.column,.ui.one.column.grid>.column,.ui.grid>.one.column.row>.column{width:100%}.ui.two.column.grid>.row>.column,.ui.two.column.grid>.column,.ui.grid>.two.column.row>.column{width:50%}.ui.three.column.grid>.row>.column,.ui.three.column.grid>.column,.ui.grid>.three.column.row>.column{width:33.3333%}.ui.four.column.grid>.row>.column,.ui.four.column.grid>.column,.ui.grid>.four.column.row>.column{width:25%}.ui.five.column.grid>.row>.column,.ui.five.column.grid>.column,.ui.grid>.five.column.row>.column{width:20%}.ui.six.column.grid>.row>.column,.ui.six.column.grid>.column,.ui.grid>.six.column.row>.column{width:16.66667%}.ui.seven.column.grid>.row>.column,.ui.seven.column.grid>.column,.ui.grid>.seven.column.row>.column{width:14.2857%}.ui.eight.column.grid>.row>.column,.ui.eight.column.grid>.column,.ui.grid>.eight.column.row>.column{width:12.5%}.ui.nine.column.grid>.row>.column,.ui.nine.column.grid>.column,.ui.grid>.nine.column.row>.column{width:11.1111%}.ui.ten.column.grid>.row>.column,.ui.ten.column.grid>.column,.ui.grid>.ten.column.row>.column{width:10%}.ui.eleven.column.grid>.row>.column,.ui.eleven.column.grid>.column,.ui.grid>.eleven.column.row>.column{width:9.0909%}.ui.twelve.column.grid>.row>.column,.ui.twelve.column.grid>.column,.ui.grid>.twelve.column.row>.column{width:8.3333%}.ui.thirteen.column.grid>.row>.column,.ui.thirteen.column.grid>.column,.ui.grid>.thirteen.column.row>.column{width:7.6923%}.ui.fourteen.column.grid>.row>.column,.ui.fourteen.column.grid>.column,.ui.grid>.fourteen.column.row>.column{width:7.1428%}.ui.fifteen.column.grid>.row>.column,.ui.fifteen.column.grid>.column,.ui.grid>.fifteen.column.row>.column{width:6.6666%}.ui.sixteen.column.grid>.row>.column,.ui.sixteen.column.grid>.column,.ui.grid>.sixteen.column.row>.column{width:6.25%}.ui.grid>.column:only-child,.ui.grid>.row>.column:only-child{width:100%}.ui.relaxed.grid{margin:0 -2.5%}.ui.relaxed.grid>.column,.ui.relaxed.grid>.row>.column{padding-left:2.5%;padding-right:2.5%}.ui.grid .left.floated.column{float:left}.ui.grid .right.floated.column{float:right}.ui.divided.grid,.ui.divided.grid>.row{display:table;width:100%;margin-left:0!important;margin-right:0!important}.ui.divided.grid>.column:not(.row),.ui.divided.grid>.row>.column{display:table-cell;-webkit-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.8);-moz-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.8);box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.8)}.ui.divided.grid>.column.row{display:table}.ui.divided.grid>.column:first-child,.ui.divided.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.vertically.divided.grid>.row{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1),0 -2px 0 0 rgba(255,255,255,.8)!important;-moz-box-shadow:0 -1px 0 0 rgba(0,0,0,.1),0 -2px 0 0 rgba(255,255,255,.8)!important;box-shadow:0 -1px 0 0 rgba(0,0,0,.1),0 -2px 0 0 rgba(255,255,255,.8)!important}.ui.vertically.divided.grid>.row>.column,.ui.vertically.divided.grid>.column:not(.row),.ui.vertically.divided.grid>.row:first-child{-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}.ui.celled.grid{display:table;width:100%;margin-left:0!important;margin-right:0!important;-webkit-box-shadow:0 0 0 1px #DFDFDF;-moz-box-shadow:0 0 0 1px #DFDFDF;box-shadow:0 0 0 1px #DFDFDF}.ui.celled.grid>.row,.ui.celled.grid>.column.row,.ui.celled.grid>.column.row:first-child{display:table;width:100%;margin-top:0;padding-top:0;-webkit-box-shadow:0 -1px 0 0 #dfdfdf;-moz-box-shadow:0 -1px 0 0 #dfdfdf;box-shadow:0 -1px 0 0 #dfdfdf}.ui.celled.grid>.column:not(.row),.ui.celled.grid>.row>.column{display:table-cell;padding:.75em;-webkit-box-shadow:-1px 0 0 0 #dfdfdf;-moz-box-shadow:-1px 0 0 0 #dfdfdf;box-shadow:-1px 0 0 0 #dfdfdf}.ui.celled.grid>.column:first-child,.ui.celled.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.celled.page.grid{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.left.aligned.grid,.ui.left.aligned.grid>.row>.column,.ui.left.aligned.grid>.column,.ui.grid .left.aligned.column,.ui.grid>.left.aligned.row>.column{text-align:left}.ui.center.aligned.grid,.ui.center.aligned.grid>.row>.column,.ui.center.aligned.grid>.column,.ui.grid .center.aligned.column,.ui.grid>.center.aligned.row>.column{text-align:center}.ui.right.aligned.grid,.ui.right.aligned.grid>.row>.column,.ui.right.aligned.grid>.column,.ui.grid .right.aligned.column,.ui.grid>.right.aligned.row>.column{text-align:right}.ui.top.aligned.grid,.ui.top.aligned.grid>.row>.column,.ui.top.aligned.grid>.column,.ui.grid .top.aligned.column,.ui.grid>.top.aligned.row>.column{vertical-align:top}.ui.middle.aligned.grid,.ui.middle.aligned.grid>.row>.column,.ui.middle.aligned.grid>.column,.ui.grid .middle.aligned.column,.ui.grid>.middle.aligned.row>.column{vertical-align:middle}.ui.bottom.aligned.grid,.ui.bottom.aligned.grid>.row>.column,.ui.bottom.aligned.grid>.column,.ui.grid .bottom.aligned.column,.ui.grid>.bottom.aligned.row>.column{vertical-align:bottom}.ui.grid>.equal.height.row{display:table;width:100%}.ui.grid>.equal.height.row>.column{display:table-cell}@media only screen and (max-width:768px){.ui.mobile.only.grid,.ui.grid>.mobile.only.row{display:block!important}.ui.grid>.row>.mobile.only.column{display:inline-block!important}.ui.divided.mobile.only.grid,.ui.celled.mobile.only.grid,.ui.divided.mobile.only.grid .row,.ui.celled.mobile.only.grid .row,.ui.divided.grid .mobile.only.row,.ui.celled.grid .mobile.only.row,.ui.grid .mobile.only.equal.height.row,.ui.mobile.only.grid .equal.height.row{display:table!important}.ui.divided.grid>.row>.mobile.only.column,.ui.celled.grid>.row>.mobile.only.column,.ui.divided.mobile.only.grid>.row>.column,.ui.celled.mobile.only.grid>.row>.column,.ui.divided.mobile.only.grid>.column,.ui.celled.mobile.only.grid>.column{display:table-cell!important}}@media only screen and (min-width:768px){.ui.mobile.only.grid,.ui.grid>.mobile.only.row,.ui.grid>.row>.mobile.only.column{display:none}}@media only screen and (min-width:768px) and (max-width:998px){.ui.tablet.only.grid,.ui.grid>.tablet.only.row{display:block!important}.ui.grid>.row>.tablet.only.column{display:inline-block!important}.ui.divided.tablet.only.grid,.ui.celled.tablet.only.grid,.ui.divided.tablet.only.grid .row,.ui.celled.tablet.only.grid .row,.ui.divided.grid .tablet.only.row,.ui.celled.grid .tablet.only.row,.ui.grid .tablet.only.equal.height.row,.ui.tablet.only.grid .equal.height.row{display:table!important}.ui.divided.grid>.row>.tablet.only.column,.ui.celled.grid>.row>.tablet.only.column,.ui.divided.tablet.only.grid>.row>.column,.ui.celled.tablet.only.grid>.row>.column,.ui.divided.tablet.only.grid>.column,.ui.celled.tablet.only.grid>.column{display:table-cell!important}}@media only screen and (max-width:768px),(min-width:998px){.ui.tablet.only.grid,.ui.grid>.tablet.only.row,.ui.grid>.row>.tablet.only.column{display:none}}@media only screen and (min-width:998px){.ui.computer.only.grid,.ui.grid>.computer.only.row{display:block!important}.ui.grid>.row>.computer.only.column{display:inline-block!important}.ui.divided.computer.only.grid,.ui.celled.computer.only.grid,.ui.divided.computer.only.grid .row,.ui.celled.computer.only.grid .row,.ui.divided.grid .computer.only.row,.ui.celled.grid .computer.only.row,.ui.grid .computer.only.equal.height.row,.ui.computer.only.grid .equal.height.row{display:table!important}.ui.divided.grid>.row>.computer.only.column,.ui.celled.grid>.row>.computer.only.column,.ui.divided.computer.only.grid>.row>.column,.ui.celled.computer.only.grid>.row>.column,.ui.divided.computer.only.grid>.column,.ui.celled.computer.only.grid>.column{display:table-cell!important}}@media only screen and (max-width:998px){.ui.computer.only.grid,.ui.grid>.computer.only.row,.ui.grid>.row>.computer.only.column{display:none}}@media only screen and (max-width:768px){.ui.stackable.grid{display:block!important;padding:0}.ui.stackable.grid .row>.column,.ui.stackable.grid>.column{display:block!important;width:auto!important;margin:1.5em 5% 0!important;padding:1.5em 0 0!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}.ui.stackable.divided.grid .column,.ui.stackable.celled.grid .column{border-top:1px dotted rgba(0,0,0,.1)}.ui.stackable.grid>.row:first-child>.column:first-child,.ui.stackable.grid>.column:first-child{margin-top:0!important;padding-top:0!important}.ui.stackable.divided.grid>.row:first-child>.column:first-child,.ui.stackable.celled.grid>.row:first-child>.column:first-child,.ui.stackable.divided.grid>.column:first-child,.ui.stackable.celled.grid>.column:first-child{border-top:0!important}.ui.stackable.grid .vertical.pointing.menu .item:after{display:none}} \ No newline at end of file diff --git a/node/src/files/build/packaged/css/semantic.css.REMOVED.git-id b/node/src/files/build/packaged/css/semantic.css.REMOVED.git-id index 731e708af..f9a8ad0e7 100644 --- a/node/src/files/build/packaged/css/semantic.css.REMOVED.git-id +++ b/node/src/files/build/packaged/css/semantic.css.REMOVED.git-id @@ -1 +1 @@ -922e6f1374b05dcf93dad02058e1b6f46f161216 \ No newline at end of file +36de00ec3a8e5475ddfc8b6803f8c9110744bfce \ No newline at end of file diff --git a/node/src/files/build/packaged/css/semantic.min.css.REMOVED.git-id b/node/src/files/build/packaged/css/semantic.min.css.REMOVED.git-id index 62db65e33..e9c7e738d 100644 --- a/node/src/files/build/packaged/css/semantic.min.css.REMOVED.git-id +++ b/node/src/files/build/packaged/css/semantic.min.css.REMOVED.git-id @@ -1 +1 @@ -d63fb61b1d2fbd86e5a501c1bd18551b68d88699 \ No newline at end of file +6a14aafc754c7fc499198dce8fa2ee168e9825ea \ No newline at end of file diff --git a/node/src/files/build/packaged/javascript/semantic.min.js.REMOVED.git-id b/node/src/files/build/packaged/javascript/semantic.min.js.REMOVED.git-id index a0b06324d..d630b5643 100644 --- a/node/src/files/build/packaged/javascript/semantic.min.js.REMOVED.git-id +++ b/node/src/files/build/packaged/javascript/semantic.min.js.REMOVED.git-id @@ -1 +1 @@ -3a6e005c9da9ba2d8bc73d7488c6072b899315ca \ No newline at end of file +cfec6cf44c9f82717d737ed090b06199ba546d98 \ No newline at end of file diff --git a/node/src/files/build/semantic.zip.REMOVED.git-id b/node/src/files/build/semantic.zip.REMOVED.git-id index 45333cc3e..db11c94f7 100644 --- a/node/src/files/build/semantic.zip.REMOVED.git-id +++ b/node/src/files/build/semantic.zip.REMOVED.git-id @@ -1 +1 @@ -e16823931ca556e5534e7e02bfad616ce0d44a89 \ No newline at end of file +6fa875f2f25e0e26bdfcc9000626d2196f86233b \ No newline at end of file diff --git a/node/src/files/build/uncompressed/collections/grid.css b/node/src/files/build/uncompressed/collections/grid.css index bd79875fa..75fcd1b79 100644 --- a/node/src/files/build/uncompressed/collections/grid.css +++ b/node/src/files/build/uncompressed/collections/grid.css @@ -22,6 +22,10 @@ -ms-box-sizing: border-box; box-sizing: border-box; } +body > .ui.grid { + margin-left: 0%; + margin-right: 0%:; +} .ui.grid:after, .ui.row:after { content: "."; @@ -73,44 +77,34 @@ /******************************* Variations *******************************/ -/*------------------- - Page ---------------------*/ +/*----------------------- + Page Grid (Responsive) +-------------------------*/ .ui.page.grid { - margin: 0%; - padding-left: 0%; - padding-right: 0%; -} -/*------------------- - Responsive ---------------------*/ -.ui.responsive.grid { - margin-left: 0% !important; - margin-right: 0% !important; min-width: 320px; } @media only screen and (max-width: 998px) { - .ui.responsive.grid { + .ui.page.grid { padding: 0% 4%; } } @media only screen and (min-width: 998px) { - .ui.responsive.grid { + .ui.page.grid { padding: 0% 8%; } } @media only screen and (min-width: 1500px) { - .ui.responsive.grid { + .ui.page.grid { padding: 0% 13%; } } @media only screen and (min-width: 1750px) { - .ui.responsive.grid { + .ui.page.grid { padding: 0% 18%; } } @media only screen and (min-width: 2000px) { - .ui.responsive.grid { + .ui.page.grid { padding: 0% 23%; } } @@ -356,7 +350,7 @@ -moz-box-shadow: none; box-shadow: none; } -.ui.celled.responsive.grid { +.ui.celled.page.grid { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; diff --git a/src/collections/grid.less b/src/collections/grid.less index 9e5b89220..302a6cc12 100755 --- a/src/collections/grid.less +++ b/src/collections/grid.less @@ -26,6 +26,12 @@ -ms-box-sizing: border-box; box-sizing: border-box; } + +body > .ui.grid { + margin-left: 0%; + margin-right: 0%:; +} + .ui.grid:after, .ui.row:after { content: "."; @@ -92,49 +98,36 @@ *******************************/ -/*------------------- - Page ---------------------*/ +/*----------------------- + Page Grid (Responsive) +-------------------------*/ .ui.page.grid { - margin: 0%; - padding-left: 0%; - padding-right: 0%; -} - - -/*------------------- - Responsive ---------------------*/ - -.ui.responsive.grid { - margin-left: 0% !important; - margin-right: 0% !important; min-width: 320px; } @media only screen and (max-width : 998px) { - .ui.responsive.grid { + .ui.page.grid { padding: 0% 4%; } } @media only screen and (min-width : 998px) { - .ui.responsive.grid { + .ui.page.grid { padding: 0% 8%; } } @media only screen and (min-width : 1500px) { - .ui.responsive.grid { + .ui.page.grid { padding: 0% 13%; } } @media only screen and (min-width : 1750px) { - .ui.responsive.grid { + .ui.page.grid { padding: 0% 18%; } } @media only screen and (min-width : 2000px) { - .ui.responsive.grid { + .ui.page.grid { padding: 0% 23%; } } @@ -418,7 +411,7 @@ box-shadow: none; } -.ui.celled.responsive.grid { +.ui.celled.page.grid { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;