Permalink
Browse files

updated the media queries cascade priority and added a tryptich class…

… to meake possibles 3 columns on mobiles using hive_12
  • Loading branch information...
spleenteo committed Nov 29, 2011
1 parent ba99a2e commit 238d0f6971a0298ed5cf682e7bd0121ea88f0b84
Showing with 107 additions and 161 deletions.
  1. +38 −43 hive.css
  2. +35 −47 hive.sass
  3. +34 −71 hive.scss
View
@@ -1,9 +1,6 @@
-/** HOVE SCSS YET ANOTHER RESPONSIVE GRID SYSTEM * THX TO 960 GRID * Written by Matteo Papadopoulos aka @spleenteo on twitter * http://www.basictrading.biz */
-/* set the desired fixed width in pixels or % */
-/* set the margin between columns in % for fluid */
-/* WARNING: Internal variables, don't change them! these are assumed to modify the margin in fixed layout */
+/*HIVE SCSS YET ANOTHER RESPONSIVE GRID SYSTEM * Author Matteo Papadopoulos aka @spleenteo on twitter * http://www.basictrading.biz * thx to @makevoid for sass translation */
.hive_12, .hive_16 { width: 100%; margin-left: 0%; margin-right: 0%; }
-.hive_12 .cell_1, .hive_12 .cell_2, .hive_12 .cell_3, .hive_12 .cell_4, .hive_12 .cell_5, .hive_12 .cell_6, .hive_12 .cell_7, .hive_12 .cell_8, .hive_12 .cell_9, .hive_12 .cell_10, .hive_12 .cell_11, .hive_12 .cell_12, .hive_12 .cell_13, .hive_12 .cell_14, .hive_12 .cell_15, .hive_12 .cell_16, .hive_16 .cell_1, .hive_16 .cell_2, .hive_16 .cell_3, .hive_16 .cell_4, .hive_16 .cell_5, .hive_16 .cell_6, .hive_16 .cell_7, .hive_16 .cell_8, .hive_16 .cell_9, .hive_16 .cell_10, .hive_16 .cell_11, .hive_16 .cell_12, .hive_16 .cell_13, .hive_16 .cell_14, .hive_16 .cell_15, .hive_16 .cell_16 { display: inline; float: left; }
+.hive_12 .cell_1, .hive_12 .cell_2, .hive_12 .cell_3, .hive_12 .cell_4, .hive_12 .cell_5, .hive_12 .cell_6, .hive_12 .cell_7, .hive_12 .cell_8, .hive_12 .cell_9, .hive_12 .cell_10, .hive_12 .cell_11, .hive_12 .cell_12, .hive_12 .tryptich, .hive_12 .cell_13, .hive_12 .cell_14, .hive_12 .cell_15, .hive_12 .cell_16, .hive_16 .cell_1, .hive_16 .cell_2, .hive_16 .cell_3, .hive_16 .cell_4, .hive_16 .cell_5, .hive_16 .cell_6, .hive_16 .cell_7, .hive_16 .cell_8, .hive_16 .cell_9, .hive_16 .cell_10, .hive_16 .cell_11, .hive_16 .cell_12, .hive_16 .hive_12 .tryptich, .hive_12 .hive_16 .tryptich, .hive_16 .cell_13, .hive_16 .cell_14, .hive_16 .cell_15, .hive_16 .cell_16 { display: inline; float: left; position: relative; }
.hive_12 .cell_1 { width: 8.333%; }
.hive_12 .cell_2 { width: 16.667%; }
@@ -16,7 +13,7 @@
.hive_12 .cell_9 { width: 75%; }
.hive_12 .cell_10 { width: 83.333%; }
.hive_12 .cell_11 { width: 91.667%; }
-.hive_12 .cell_12 { width: 100%; }
+.hive_12 .cell_12, .hive_12 .tryptich { width: 100%; }
.hive_12 .pre_1 { padding-left: 8.333%; }
.hive_12 .pre_2 { padding-left: 16.667%; }
.hive_12 .pre_3 { padding-left: 25%; }
@@ -53,7 +50,7 @@
.hive_16 .cell_9 { width: 56.25%; }
.hive_16 .cell_10 { width: 62.5%; }
.hive_16 .cell_11 { width: 68.75%; }
-.hive_16 .cell_12 { width: 75%; }
+.hive_16 .cell_12, .hive_16 .hive_12 .tryptich, .hive_12 .hive_16 .tryptich { width: 75%; }
.hive_16 .cell_13 { width: 81.25%; }
.hive_16 .cell_14 { width: 87.5%; }
.hive_16 .cell_15 { width: 93.75%; }
@@ -97,17 +94,32 @@
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
-.clearfix:after, .hive_12:after, .hive_16:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; }
+.clearfix:after, .hive_12:after, .hive_16:after { clear: both; content: " "; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; }
.clearfix, .hive_12, .hive_16 { display: inline-block; }
* html.clearfix, * html.hive_12, * html.hive_16 { height: 1%; }
.clearfix, .hive_12, .hive_16 { display: block; }
-/* SETTING FOR SMARTPHONES PORTRAIT AND LANDSCAPE until the browser is at a maximum of 480 */
-@media only screen and (max-width: 480px) { .hive_12, .hive_16 { padding: 0; width: 100%; margin: 0; }
- .hive_12 .cell_16, .hive_12 .cell_15, .hive_12 .cell_14, .hive_12 .cell_13, .hive_12 .cell_12, .hive_12 .cell_10, .hive_12 .cell_11, .hive_12 .cell_9, .hive_12 .cell_8, .hive_12 .cell_7, .hive_12 .cell_6, .hive_12 .cell_5, .hive_12 .cell_4, .hive_12 .cell_3, .hive_12 .cell_2, .hive_12 .cell_1, .hive_16 .cell_16, .hive_16 .cell_15, .hive_16 .cell_14, .hive_16 .cell_13, .hive_16 .cell_12, .hive_16 .cell_10, .hive_16 .cell_11, .hive_16 .cell_9, .hive_16 .cell_8, .hive_16 .cell_7, .hive_16 .cell_6, .hive_16 .cell_5, .hive_16 .cell_4, .hive_16 .cell_3, .hive_16 .cell_2, .hive_16 .cell_1 { width: 100%; margin: 0; }
+/* FOR SMARTPHONE LANDSCAPE AND TABLET PORTRAIT ONLY */
+@media only screen and (min-width: 401px) and (max-width: 1023px) { .hive_12 .cell_12, .hive_12 .tryptich, .hive_12 .cell_11, .hive_12 .cell_10, .hive_12 .cell_9, .hive_12 .cell_8, .hive_12 .cell_7, .hive_12 .cell_6, .hive_12 .cell_5, .hive_12 .cell_4, .hive_12 .cell_3, .hive_12 .cell_2, .hive_12 .cell_1 { width: 100%; }
+ .hive_12 .cell_10 { width: 83.333%; }
+ .hive_12 .cell_10.pre_2, .hive_12 .cell_10.post_2 { width: 100%; }
+ .hive_12 .cell_2 { width: 16.667%; }
+ .hive_12 .cell_2.pre_8, .hive_12 .cell_2.post_8 { width: 100%; }
+ .hive_12 .cell_9, .hive_12 .cell_13 { width: 75%; }
+ .hive_12 .cell_6 { width: 50%; }
+ .hive_12 .cell_3 { width: 25%; }
+ .hive_12 .cell_10.pre_2, .hive_12 .cell_10.post_2, .hive_12 .cell_9.pre_3, .hive_12 .cell_9.post_3, .hive_12 .cell_2.pre_8, .hive_12 .cell_2.post_8, .hive_12 .cell_3.pre_9, .hive_12 .cell_3.post_9 { width: 100%; }
+ .hive_12 .tryptich .cell_4 { width: 33.333%; }
+ .hive_16 .cell_16, .hive_16 .cell_15, .hive_16 .cell_14, .hive_16 .cell_13, .hive_16 .cell_12, .hive_16 .hive_12 .tryptich, .hive_12 .hive_16 .tryptich, .hive_16 .cell_11, .hive_16 .cell_10, .hive_16 .cell_9, .hive_16 .cell_8, .hive_16 .cell_7, .hive_16 .cell_6, .hive_16 .cell_5, .hive_16 .cell_4, .hive_16 .cell_3, .hive_16 .cell_2, .hive_16 .cell_1 { width: 100%; }
+ .hive_16 .cell_12, .hive_16 .hive_12 .tryptich, .hive_12 .hive_16 .tryptich { width: 75%; }
+ .hive_16 .cell_10 { width: 62.5%; }
+ .hive_16 .cell_6 { width: 37.5%; }
+ .hive_16 .cell_8, .hive_16 .cell_9, .hive_16 .cell_7 { width: 50%; }
+ .hive_16 .cell_4 { width: 25%; }
+ .hive_16 .cell_12.pre_4, .hive_16 .hive_12 .pre_4.tryptich, .hive_12 .hive_16 .pre_4.tryptich, .hive_16 .cell_12.post_4, .hive_16 .hive_12 .post_4.tryptich, .hive_12 .hive_16 .post_4.tryptich, .hive_16 .cell_10.pre_6, .hive_16 .cell_10.post_6, .hive_16 .cell_6.pre_10, .hive_16 .cell_6.post_10, .hive_16 .cell_8.pre_8, .hive_16 .cell_8.post_8, .hive_16 .cell_9.pre_7, .hive_16 .cell_9.post_7, .hive_16 .cell_7.pre_9, .hive_16 .cell_7.post_9 { width: 100%; }
.hive_12 .pre_1, .hive_16 .pre_1 { padding-left: 0; }
.hive_12 .pre_2, .hive_16 .pre_2 { padding-left: 0; }
.hive_12 .pre_3, .hive_16 .pre_3 { padding-left: 0; }
@@ -120,10 +132,6 @@
.hive_12 .pre_10, .hive_16 .pre_10 { padding-left: 0; }
.hive_12 .pre_11, .hive_16 .pre_11 { padding-left: 0; }
.hive_12 .pre_12, .hive_16 .pre_12 { padding-left: 0; }
- .hive_12 .pre_13, .hive_16 .pre_13 { padding-left: 0; }
- .hive_12 .pre_14, .hive_16 .pre_14 { padding-left: 0; }
- .hive_12 .pre_15, .hive_16 .pre_15 { padding-left: 0; }
- .hive_12 .pre_16, .hive_16 .pre_16 { padding-left: 0; }
.hive_12 .post_1, .hive_16 .post_1 { padding-right: 0; }
.hive_12 .post_2, .hive_16 .post_2 { padding-right: 0; }
.hive_12 .post_3, .hive_16 .post_3 { padding-right: 0; }
@@ -135,29 +143,10 @@
.hive_12 .post_9, .hive_16 .post_9 { padding-right: 0; }
.hive_12 .post_10, .hive_16 .post_10 { padding-right: 0; }
.hive_12 .post_11, .hive_16 .post_11 { padding-right: 0; }
- .hive_12 .post_12, .hive_16 .post_12 { padding-right: 0; }
- .hive_12 .post_13, .hive_16 .post_13 { padding-right: 0; }
- .hive_12 .post_14, .hive_16 .post_14 { padding-right: 0; }
- .hive_12 .post_15, .hive_16 .post_15 { padding-right: 0; }
- .hive_12 .post_16, .hive_16 .post_16 { padding-right: 0; } }
-
-/* SETTING FOR PORTRAIT TABLET until the browser is at a maximum of 1000 */
-@media only screen and (min-width: 481px) and (max-width: 1000px) { .hive_12 .cell_12, .hive_12 .cell_11, .hive_12 .cell_10, .hive_12 .cell_9, .hive_12 .cell_8, .hive_12 .cell_7, .hive_12 .cell_6, .hive_12 .cell_5, .hive_12 .cell_4, .hive_12 .cell_3, .hive_12 .cell_2, .hive_12 .cell_1 { width: 100%; }
- .hive_12 .cell_10 { width: 83.333%; }
- .hive_12 .cell_10.pre_2, .hive_12 .cell_10.post_2 { width: 100%; }
- .hive_12 .cell_2 { width: 16.667%; }
- .hive_12 .cell_2.pre_8, .hive_12 .cell_2.post_8 { width: 100%; }
- .hive_12 .cell_9, .hive_12 .cell_13 { width: 75%; }
- .hive_12 .cell_6 { width: 50%; }
- .hive_12 .cell_3 { width: 25%; }
- .hive_12 .cell_10.pre_2, .hive_12 .cell_10.post_2, .hive_12 .cell_9.pre_3, .hive_12 .cell_9.post_3, .hive_12 .cell_2.pre_8, .hive_12 .cell_2.post_8, .hive_12 .cell_3.pre_9, .hive_12 .cell_3.post_9 { width: 100%; }
- .hive_16 .cell_16, .hive_16 .cell_15, .hive_16 .cell_14, .hive_16 .cell_13, .hive_16 .cell_12, .hive_16 .cell_11, .hive_16 .cell_10, .hive_16 .cell_9, .hive_16 .cell_8, .hive_16 .cell_7, .hive_16 .cell_6, .hive_16 .cell_5, .hive_16 .cell_4, .hive_16 .cell_3, .hive_16 .cell_2, .hive_16 .cell_1 { width: 100%; }
- .hive_16 .cell_12 { width: 75%; }
- .hive_16 .cell_10 { width: 62.5%; }
- .hive_16 .cell_6 { width: 37.5%; }
- .hive_16 .cell_8, .hive_16 .cell_9, .hive_16 .cell_7 { width: 50%; }
- .hive_16 .cell_4 { width: 25%; }
- .hive_16 .cell_12.pre_4, .hive_16 .cell_12.post_4, .hive_16 .cell_10.pre_6, .hive_16 .cell_10.post_6, .hive_16 .cell_6.pre_10, .hive_16 .cell_6.post_10, .hive_16 .cell_8.pre_8, .hive_16 .cell_8.post_8, .hive_16 .cell_9.pre_7, .hive_16 .cell_9.post_7, .hive_16 .cell_7.pre_9, .hive_16 .cell_7.post_9 { width: 100%; }
+ .hive_12 .post_12, .hive_16 .post_12 { padding-right: 0; } }
+/* SMARTPHONE PORTRAIT */
+@media only screen and (max-width: 400px) { .hive_12, .hive_16 { padding: 0; width: 100%; margin: 0; }
+ .hive_12 .cell_16, .hive_12 .cell_15, .hive_12 .cell_14, .hive_12 .cell_13, .hive_12 .cell_12, .hive_12 .tryptich, .hive_12 .cell_10, .hive_12 .cell_11, .hive_12 .cell_9, .hive_12 .cell_8, .hive_12 .cell_7, .hive_12 .cell_6, .hive_12 .cell_5, .hive_12 .cell_4, .hive_12 .cell_3, .hive_12 .cell_2, .hive_12 .cell_1, .hive_16 .cell_16, .hive_16 .cell_15, .hive_16 .cell_14, .hive_16 .cell_13, .hive_16 .cell_12, .hive_16 .hive_12 .tryptich, .hive_12 .hive_16 .tryptich, .hive_16 .cell_10, .hive_16 .cell_11, .hive_16 .cell_9, .hive_16 .cell_8, .hive_16 .cell_7, .hive_16 .cell_6, .hive_16 .cell_5, .hive_16 .cell_4, .hive_16 .cell_3, .hive_16 .cell_2, .hive_16 .cell_1 { width: 100%; margin: 0; }
.hive_12 .pre_1, .hive_16 .pre_1 { padding-left: 0; }
.hive_12 .pre_2, .hive_16 .pre_2 { padding-left: 0; }
.hive_12 .pre_3, .hive_16 .pre_3 { padding-left: 0; }
@@ -170,6 +159,10 @@
.hive_12 .pre_10, .hive_16 .pre_10 { padding-left: 0; }
.hive_12 .pre_11, .hive_16 .pre_11 { padding-left: 0; }
.hive_12 .pre_12, .hive_16 .pre_12 { padding-left: 0; }
+ .hive_12 .pre_13, .hive_16 .pre_13 { padding-left: 0; }
+ .hive_12 .pre_14, .hive_16 .pre_14 { padding-left: 0; }
+ .hive_12 .pre_15, .hive_16 .pre_15 { padding-left: 0; }
+ .hive_12 .pre_16, .hive_16 .pre_16 { padding-left: 0; }
.hive_12 .post_1, .hive_16 .post_1 { padding-right: 0; }
.hive_12 .post_2, .hive_16 .post_2 { padding-right: 0; }
.hive_12 .post_3, .hive_16 .post_3 { padding-right: 0; }
@@ -181,10 +174,12 @@
.hive_12 .post_9, .hive_16 .post_9 { padding-right: 0; }
.hive_12 .post_10, .hive_16 .post_10 { padding-right: 0; }
.hive_12 .post_11, .hive_16 .post_11 { padding-right: 0; }
- .hive_12 .post_12, .hive_16 .post_12 { padding-right: 0; } }
-
+ .hive_12 .post_12, .hive_16 .post_12 { padding-right: 0; }
+ .hive_12 .post_13, .hive_16 .post_13 { padding-right: 0; }
+ .hive_12 .post_14, .hive_16 .post_14 { padding-right: 0; }
+ .hive_12 .post_15, .hive_16 .post_15 { padding-right: 0; }
+ .hive_12 .post_16, .hive_16 .post_16 { padding-right: 0; } }
/* SETTING FOR PORTRAIT TABLET until the browser is at a maximum of 1000 */
-@media only screen and (min-width: 1000px) and (max-width: 1499px) { .hive_12, .hive_16 { max-width: 960px; margin: auto; } }
-
+@media only screen and (min-width: 1024px) and (max-width: 1499px) { .hive_12, .hive_16 { max-width: 960px; margin: auto; } }
/* WIDE DESKTOP OR TV */
-@media screen and (min-width: 1500px) { .hive_12, .hive_16 { max-width: 80%; margin: auto; } }
+@media only screen and (min-width: 1500px) { .hive_12, .hive_16 { max-width: 80%; margin: auto; } }
View
@@ -1,8 +1,8 @@
-// HIVE SCSS YET ANOTHER RESPONSIVE GRID SYSTEM
-// thx to @makevoid for sass translation
-// Written by Matteo Papadopoulos aka @spleenteo on twitter
-// http://www.basictrading.biz
-
+/** HIVE SCSS YET ANOTHER RESPONSIVE GRID SYSTEM
+ ** Author Matteo Papadopoulos aka @spleenteo on twitter
+ ** http://www.basictrading.biz
+ ** thx to @makevoid for sass translation
+ **/
// YOU CAN CHANGE SOME SETTINGS IF YOU WISH
$width: 100% /* set the desired fixed width in pixels or % */
@@ -23,6 +23,7 @@ $unit_16: 100% / 16
.cell_1, .cell_2, .cell_3, .cell_4, .cell_5, .cell_6, .cell_7, .cell_8, .cell_9, .cell_10, .cell_11, .cell_12, .cell_13, .cell_14, .cell_15, .cell_16
display: inline
float: left
+ position: relative
.hive_12
@@ -86,33 +87,8 @@ $unit_16: 100% / 16
.clearfix
display: block
-
-
-
-/* SETTING FOR SMARTPHONES PORTRAIT AND LANDSCAPE until the browser is at a maximum of 480 */
-@media only screen and (max-width: 480px)
- .hive_12, .hive_16
- padding: 0
- width: 100%
- margin: 0
- .cell_16, .cell_15, .cell_14, .cell_13, .cell_12, .cell_10, .cell_11, .cell_9, .cell_8, .cell_7, .cell_6, .cell_5, .cell_4, .cell_3, .cell_2, .cell_1
- width: 100%
- margin: 0
-
- @for $i from 1 through 16
- .pre_#{$i}
- padding-left: 0
-
- @for $i from 1 through 16
- .post_#{$i}
- padding-right: 0
-
-
-
-
-
-/* SETTING FOR PORTRAIT TABLET until the browser is at a maximum of 1000 */
-@media only screen and (min-width: 481px) and (max-width: 1000px)
+/* FOR SMARTPHONE LANDSCAPE AND TABLET PORTRAIT ONLY */
+@media only screen and (min-width: 401px) and (max-width: 1023px)
.hive_12
.cell_12, .cell_11, .cell_10, .cell_9, .cell_8, .cell_7, .cell_6, .cell_5, .cell_4, .cell_3, .cell_2, .cell_1
width: 100%
@@ -141,6 +117,11 @@ $unit_16: 100% / 16
.cell_10.pre_2, .cell_10.post_2, .cell_9.pre_3, .cell_9.post_3, .cell_2.pre_8, .cell_2.post_8, .cell_3.pre_9, .cell_3.post_9
width: 100%
+ .tryptich
+ @extend .cell_12
+ .cell_4
+ width: 33.33333333%
+
.hive_16
.cell_16, .cell_15, .cell_14, .cell_13, .cell_12, .cell_11, .cell_10, .cell_9, .cell_8, .cell_7, .cell_6, .cell_5, .cell_4, .cell_3, .cell_2, .cell_1
@@ -163,9 +144,7 @@ $unit_16: 100% / 16
.cell_12.pre_4, .cell_12.post_4, .cell_10.pre_6, .cell_10.post_6, .cell_6.pre_10, .cell_6.post_10, .cell_8.pre_8, .cell_8.post_8, .cell_9.pre_7, .cell_9.post_7, .cell_7.pre_9, .cell_7.post_9
width: 100%
-
-
-
+
.hive_12, .hive_16
@for $i from 1 through 12
.pre_#{$i}
@@ -174,27 +153,36 @@ $unit_16: 100% / 16
@for $i from 1 through 12
.post_#{$i}
padding-right: 0
-
-
+/* SMARTPHONE PORTRAIT */
+@media only screen and (max-width: 400px)
+ .hive_12, .hive_16
+ padding: 0
+ width: 100%
+ margin: 0
+ .cell_16, .cell_15, .cell_14, .cell_13, .cell_12, .cell_10, .cell_11, .cell_9, .cell_8, .cell_7, .cell_6, .cell_5, .cell_4, .cell_3, .cell_2, .cell_1
+ width: 100%
+ margin: 0
+
+ @for $i from 1 through 16
+ .pre_#{$i}
+ padding-left: 0
+
+ @for $i from 1 through 16
+ .post_#{$i}
+ padding-right: 0
+
/* SETTING FOR PORTRAIT TABLET until the browser is at a maximum of 1000 */
-@media only screen and (min-width: 1000px) and (max-width: 1499px)
+@media only screen and (min-width: 1024px) and (max-width: 1499px)
.hive_12, .hive_16
max-width: 960px
margin: auto
-
/* WIDE DESKTOP OR TV */
-@media screen and (min-width: 1500px)
+@media only screen and (min-width: 1500px)
.hive_12, .hive_16
max-width: 80%
margin: auto
-
-
-
-
-
-
-
+
Oops, something went wrong.

0 comments on commit 238d0f6

Please sign in to comment.