docs: update example

Author: thingsym

docs/css/box-sizing.css

@@ -772,243 +772,118 @@ ul.grid li {
   padding: 2em;
 }
 
-.grid--no-margin {
+.grid--no-gutter {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
 
-.grid--no-margin .grid__col {
+.grid--no-gutter .grid__col {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-flex: 0;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
 }
 
-.grid--no-margin > .grid__col-1 {
+.grid--no-gutter > .grid__col-1 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-flex: 0;
   -ms-flex: 0 0 8.33333%;
   flex: 0 0 8.33333%;
 }
 
-.grid--no-margin > .grid__col-2 {
+.grid--no-gutter > .grid__col-2 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-flex: 0;
   -ms-flex: 0 0 16.66667%;
   flex: 0 0 16.66667%;
 }
 
-.grid--no-margin > .grid__col-3 {
+.grid--no-gutter > .grid__col-3 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-flex: 0;
   -ms-flex: 0 0 25%;
   flex: 0 0 25%;
 }
 
-.grid--no-margin > .grid__col-4 {
+.grid--no-gutter > .grid__col-4 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-flex: 0;
   -ms-flex: 0 0 33.33333%;
   flex: 0 0 33.33333%;
 }
 
-.grid--no-margin > .grid__col-5 {
+.grid--no-gutter > .grid__col-5 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-flex: 0;
   -ms-flex: 0 0 41.66667%;
   flex: 0 0 41.66667%;
 }
 
-.grid--no-margin > .grid__col-6 {
+.grid--no-gutter > .grid__col-6 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-flex: 0;
   -ms-flex: 0 0 50%;
   flex: 0 0 50%;
 }
 
-.grid--no-margin > .grid__col-7 {
+.grid--no-gutter > .grid__col-7 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-flex: 0;
   -ms-flex: 0 0 58.33333%;
   flex: 0 0 58.33333%;
 }
 
-.grid--no-margin > .grid__col-8 {
+.grid--no-gutter > .grid__col-8 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-flex: 0;
   -ms-flex: 0 0 66.66667%;
   flex: 0 0 66.66667%;
 }
 
-.grid--no-margin > .grid__col-9 {
+.grid--no-gutter > .grid__col-9 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-flex: 0;
   -ms-flex: 0 0 75%;
   flex: 0 0 75%;
 }
 
-.grid--no-margin > .grid__col-10 {
+.grid--no-gutter > .grid__col-10 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-flex: 0;
   -ms-flex: 0 0 83.33333%;
   flex: 0 0 83.33333%;
 }
 
-.grid--no-margin > .grid__col-11 {
+.grid--no-gutter > .grid__col-11 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-flex: 0;
   -ms-flex: 0 0 91.66667%;
   flex: 0 0 91.66667%;
 }
 
-.grid--no-margin > .grid__col-12 {
+.grid--no-gutter > .grid__col-12 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-flex: 0;
   -ms-flex: 0 0 100%;
   flex: 0 0 100%;
 }
 
-.grid--condensed {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.grid--condensed .grid__col {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-box-flex: 0;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  margin-right: 2%;
-}
-
-.grid--condensed > .grid__col-1 {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-box-flex: 0;
-  -ms-flex: 0 0 6.5%;
-  flex: 0 0 6.5%;
-  margin-right: 2%;
-}
-
-.grid--condensed > .grid__col-2 {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-box-flex: 0;
-  -ms-flex: 0 0 15%;
-  flex: 0 0 15%;
-  margin-right: 2%;
-}
-
-.grid--condensed > .grid__col-3 {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-box-flex: 0;
-  -ms-flex: 0 0 23.5%;
-  flex: 0 0 23.5%;
-  margin-right: 2%;
-}
-
-.grid--condensed > .grid__col-4 {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-box-flex: 0;
-  -ms-flex: 0 0 32%;
-  flex: 0 0 32%;
-  margin-right: 2%;
-}
-
-.grid--condensed > .grid__col-5 {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-box-flex: 0;
-  -ms-flex: 0 0 40.5%;
-  flex: 0 0 40.5%;
-  margin-right: 2%;
-}
-
-.grid--condensed > .grid__col-6 {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-box-flex: 0;
-  -ms-flex: 0 0 49%;
-  flex: 0 0 49%;
-  margin-right: 2%;
-}
-
-.grid--condensed > .grid__col-7 {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-box-flex: 0;
-  -ms-flex: 0 0 57.5%;
-  flex: 0 0 57.5%;
-  margin-right: 2%;
-}
-
-.grid--condensed > .grid__col-8 {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-box-flex: 0;
-  -ms-flex: 0 0 66%;
-  flex: 0 0 66%;
-  margin-right: 2%;
-}
-
-.grid--condensed > .grid__col-9 {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-box-flex: 0;
-  -ms-flex: 0 0 74.5%;
-  flex: 0 0 74.5%;
-  margin-right: 2%;
-}
-
-.grid--condensed > .grid__col-10 {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-box-flex: 0;
-  -ms-flex: 0 0 83%;
-  flex: 0 0 83%;
-  margin-right: 2%;
-}
-
-.grid--condensed > .grid__col-11 {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-box-flex: 0;
-  -ms-flex: 0 0 91.5%;
-  flex: 0 0 91.5%;
-  margin-right: 2%;
-}
-
-.grid--condensed > .grid__col-12 {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-box-flex: 0;
-  -ms-flex: 0 0 100%;
-  flex: 0 0 100%;
-  margin-right: 2%;
-}
-
 .grid--row {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -1093,14 +968,6 @@ ul.grid li {
   margin-bottom: 2%;
 }
 
-.grid--row-reverse [class*="grid__col"]:first-child {
-  margin-right: 0;
-}
-
-.grid--row-reverse [class*="grid__col"]:last-child {
-  margin-right: 2%;
-}
-
 .grid--column {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -2053,7 +1920,6 @@ ul.grid li {
   width: 6.5%;
   margin-right: 2%;
   margin-bottom: 2%;
-  margin-right: 0;
 }
 
 .grid--right-column > .grid__col-2 {
@@ -2065,7 +1931,6 @@ ul.grid li {
   width: 15%;
   margin-right: 2%;
   margin-bottom: 2%;
-  margin-right: 0;
 }
 
 .grid--right-column > .grid__col-3 {
@@ -2077,7 +1942,6 @@ ul.grid li {
   width: 23.5%;
   margin-right: 2%;
   margin-bottom: 2%;
-  margin-right: 0;
 }
 
 .grid--centered-column {
@@ -2108,7 +1972,6 @@ ul.grid li {
   width: 23.5%;
   margin-right: 2%;
   margin-bottom: 2%;
-  margin-right: 0;
 }
 
 .grid--items-column-alignment {
@@ -2774,7 +2637,3 @@ ul.grid li {
   margin-right: 2%;
   margin-bottom: 2%;
 }
-
-[class*="grid__col"]:last-child {
-  margin-right: 0;
-}