Permalink
Browse files

Major Base Update

- Updated Grid Sizing to be in-line with 960
- Updated Desktop, Tablet and Mobile column widths to fit more flush
- Updated default responsive break point sizes
- Updated Grid on Docs page
  • Loading branch information...
1 parent a857d29 commit e660b869c70dbd529d579952cf2a36b1c3c1a1d2 Matthew Hartman committed Mar 19, 2013
Showing with 99 additions and 84 deletions.
  1. +2 −2 docs/docs.css
  2. +13 −2 less/docs.less
  3. +41 −39 less/style.less
  4. +43 −41 style.css
View
@@ -73,15 +73,15 @@
padding-top: 2px;
padding-bottom: 2px;
}
-@media only screen and (min-width: 720px) and (max-width: 959px) {
+@media only screen and (min-width: 762px) and (max-width: 939px) {
.navigation ul li {
margin-left: 5px;
}
.navigation ul li a {
padding: 10px 15px;
}
}
-@media only screen and (max-width: 719px) {
+@media only screen and (max-width: 761px) {
.header {
padding-bottom: 0;
text-align: center;
View
@@ -2,6 +2,17 @@
@import "mixins.less"; // Import the base mixins
+ // Global Defaults //
+ @mobile-width: 100%;
+ @tablet-width: 720px;
+ @desktop-width: 940px;
+
+
+ // Resonsive Design Break Points
+ @mobile-breakpoint: @tablet-width + 41px; // max width for tablet .container - 1px
+ @tablet-breakpoint: @tablet-width + 42px; // max width for tablet .container
+ @desktop-breakpoint: @desktop-width - 1px; // max width for desktop .container - 1px
+
.header {
background-color: #d6511d;
margin-bottom: 10px;
@@ -82,7 +93,7 @@
// ==========================================================================
// Delete anything after this as it's for the base docs //
-@media only screen and (min-width: 720px) and (max-width: 959px) {
+@media only screen and (min-width: @tablet-breakpoint) and (max-width: @desktop-breakpoint) {
.navigation {
ul {
li {
@@ -103,7 +114,7 @@
// ==========================================================================
// -- Custom Mobile Styles for Docs
// ==========================================================================
-@media only screen and (max-width: 719px) {
+@media only screen and (max-width: @mobile-breakpoint) {
.header {
padding-bottom: 0;
text-align: center;
View
@@ -11,12 +11,12 @@
// Global Defaults //
@mobile-width: 100%;
@tablet-width: 720px;
- @desktop-width: 960px;
+ @desktop-width: 940px;
// Resonsive Design Break Points
- @phone-breakpoint: @tablet-width - 1px;
- @tablet-breakpoint: @tablet-width;
+ @mobile-breakpoint: @tablet-width + 41px;
+ @tablet-breakpoint: @tablet-width + 42px;
@desktop-breakpoint: @desktop-width - 1px;
@@ -532,7 +532,7 @@ textarea { width: 260px; }
padding-right: 10px;
}
.container-full {
- max-width: 980px;
+ max-width: @desktop-width + 20px;
margin: 0 auto;
}
@@ -544,17 +544,17 @@ textarea { width: 260px; }
.col:first-child { margin-left: 0; }
/* Columns */
-.one { width: 6.333%; }
-.two { width: 14.667%; }
-.three { width: 23.0%; }
-.four { width: 31.333%; }
-.five { width: 39.667%; }
-.six { width: 48.0%; }
-.seven { width: 56.333%; }
-.eight { width: 64.667%; }
-.nine { width: 73.0%; }
-.ten { width: 81.333%; }
-.eleven { width: 89.667%; }
+.one { width: 6.5%; }
+.two { width: 15%; }
+.three { width: 23.5%; }
+.four { width: 32%; }
+.five { width: 40.5%; }
+.six { width: 49.0%; }
+.seven { width: 57.5%; }
+.eight { width: 66%; }
+.nine { width: 74.5%; }
+.ten { width: 83%; }
+.eleven { width: 91.5%; }
.twelve { width: 100%; }
.quarter { .three(); }
@@ -575,24 +575,26 @@ textarea { width: 260px; }
@media only screen and (min-width: @tablet-breakpoint) and (max-width: @desktop-breakpoint) {
.container {
- width: @tablet-width - 20;
+ width: @tablet-width;
+ padding-left: 10px;
+ padding-right: 10px;
}
/* Tablet Grid
* For stacking full width columns, please use the new class .tablet-full
* New tablet columns have been added
*/
-.tablet-one { width: 6.333%; }
-.tablet-two { width: 14.667%; }
-.tablet-three { width: 23.0%; }
-.tablet-four { width: 31.333%; }
-.tablet-five { width: 39.667%; }
-.tablet-six { width: 48.0%; }
-.tablet-seven { width: 56.333%; }
-.tablet-eight { width: 64.667%; }
-.tablet-nine { width: 73.0%; }
-.tablet-ten { width: 81.333%; }
-.tablet-eleven { width: 89.667%; }
+.tablet-one { width: 6.5%; }
+.tablet-two { width: 15%; }
+.tablet-three { width: 23.5%; }
+.tablet-four { width: 32%; }
+.tablet-five { width: 40.5%; }
+.tablet-six { width: 49.0%; }
+.tablet-seven { width: 57.5%; }
+.tablet-eight { width: 66%; }
+.tablet-nine { width: 74.5%; }
+.tablet-ten { width: 83%; }
+.tablet-eleven { width: 91.5%; }
.tablet-twelve { width: 100%; }
.tablet-full {
@@ -627,23 +629,23 @@ textarea { width: 260px; }
/* ==========================================================================
/* -- Mobile Devices (Layout, Modifications, etc)
========================================================================== */
-@media only screen and (max-width: @phone-breakpoint) {
+@media only screen and (max-width: @mobile-breakpoint) {
/* Mobile Grid
* For stacking full width columns, please use the new class .mobile-full
* New mobile columns have been added
*/
-.mobile-one { width: 6.333%; }
-.mobile-two { width: 14.667%; }
-.mobile-three { width: 23.0%; }
-.mobile-four { width: 31.333%; }
-.mobile-five { width: 39.667%; }
-.mobile-six { width: 48.0%; }
-.mobile-seven { width: 56.333%; }
-.mobile-eight { width: 64.667%; }
-.mobile-nine { width: 73.0%; }
-.mobile-ten { width: 81.333%; }
-.mobile-eleven { width: 89.667%; }
+.mobile-one { width: 6.5%; }
+.mobile-two { width: 15%; }
+.mobile-three { width: 23.5%; }
+.mobile-four { width: 32%; }
+.mobile-five { width: 40.5%; }
+.mobile-six { width: 49.0%; }
+.mobile-seven { width: 57.5%; }
+.mobile-eight { width: 66%; }
+.mobile-nine { width: 74.5%; }
+.mobile-ten { width: 83%; }
+.mobile-eleven { width: 91.5%; }
.mobile-twelve { width: 100%; }
.mobile-full {
View
@@ -517,13 +517,13 @@ textarea {
margin-bottom: 1em;
}
.container {
- max-width: 960px;
+ max-width: 940px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
}
.container-full {
- max-width: 980px;
+ max-width: 960px;
margin: 0 auto;
}
/* Fluid Grid */
@@ -536,93 +536,95 @@ textarea {
}
/* Columns */
.one {
- width: 6.333%;
+ width: 6.5%;
}
.two {
- width: 14.667%;
+ width: 15%;
}
.three {
- width: 23.0%;
+ width: 23.5%;
}
.four {
- width: 31.333%;
+ width: 32%;
}
.five {
- width: 39.667%;
+ width: 40.5%;
}
.six {
- width: 48.0%;
+ width: 49.0%;
}
.seven {
- width: 56.333%;
+ width: 57.5%;
}
.eight {
- width: 64.667%;
+ width: 66%;
}
.nine {
- width: 73.0%;
+ width: 74.5%;
}
.ten {
- width: 81.333%;
+ width: 83%;
}
.eleven {
- width: 89.667%;
+ width: 91.5%;
}
.twelve {
width: 100%;
}
.quarter {
- width: 23.0%;
+ width: 23.5%;
}
.half {
- width: 48.0%;
+ width: 49.0%;
}
.one-third {
- width: 31.333%;
+ width: 32%;
}
/* ==========================================================================
/* -- Tablet Devices (Layout, Modifications, etc)
========================================================================== */
-@media only screen and (min-width: 720px) and (max-width: 959px) {
+@media only screen and (min-width: 762px) and (max-width: 939px) {
.container {
- width: 700px;
+ width: 720px;
+ padding-left: 10px;
+ padding-right: 10px;
}
/* Tablet Grid
* For stacking full width columns, please use the new class .tablet-full
* New tablet columns have been added
*/
.tablet-one {
- width: 6.333%;
+ width: 6.5%;
}
.tablet-two {
- width: 14.667%;
+ width: 15%;
}
.tablet-three {
- width: 23.0%;
+ width: 23.5%;
}
.tablet-four {
- width: 31.333%;
+ width: 32%;
}
.tablet-five {
- width: 39.667%;
+ width: 40.5%;
}
.tablet-six {
- width: 48.0%;
+ width: 49.0%;
}
.tablet-seven {
- width: 56.333%;
+ width: 57.5%;
}
.tablet-eight {
- width: 64.667%;
+ width: 66%;
}
.tablet-nine {
- width: 73.0%;
+ width: 74.5%;
}
.tablet-ten {
- width: 81.333%;
+ width: 83%;
}
.tablet-eleven {
- width: 89.667%;
+ width: 91.5%;
}
.tablet-twelve {
width: 100%;
@@ -649,43 +651,43 @@ textarea {
/* ==========================================================================
/* -- Mobile Devices (Layout, Modifications, etc)
========================================================================== */
-@media only screen and (max-width: 719px) {
+@media only screen and (max-width: 761px) {
/* Mobile Grid
* For stacking full width columns, please use the new class .mobile-full
* New mobile columns have been added
*/
.mobile-one {
- width: 6.333%;
+ width: 6.5%;
}
.mobile-two {
- width: 14.667%;
+ width: 15%;
}
.mobile-three {
- width: 23.0%;
+ width: 23.5%;
}
.mobile-four {
- width: 31.333%;
+ width: 32%;
}
.mobile-five {
- width: 39.667%;
+ width: 40.5%;
}
.mobile-six {
- width: 48.0%;
+ width: 49.0%;
}
.mobile-seven {
- width: 56.333%;
+ width: 57.5%;
}
.mobile-eight {
- width: 64.667%;
+ width: 66%;
}
.mobile-nine {
- width: 73.0%;
+ width: 74.5%;
}
.mobile-ten {
- width: 81.333%;
+ width: 83%;
}
.mobile-eleven {
- width: 89.667%;
+ width: 91.5%;
}
.mobile-twelve {
width: 100%;

0 comments on commit e660b86

Please sign in to comment.