Skip to content
Browse files

Base Updates - v1.7

- Major Update on Grid (padding can now be used for column spacing)
(v1.7)
- Removed .col class as no longer required (v1.7)
- Added Push/Pull helpers (v1.7)
- Cleaned up IE expression code  (v1.7)
- Removed row helpers to minimise bloat (v1.7)
- Other minor updates
  • Loading branch information...
1 parent c454553 commit cdf9ba72abe4a2ea7076cbe241bd3ee4c0728ecb Matthew Hartman committed Mar 10, 2014
Showing with 684 additions and 1,043 deletions.
  1. +97 −185 less/style.less
  2. +74 −183 sass/style.scss
  3. +513 −675 style.css
View
282 less/style.less
@@ -2,7 +2,7 @@
Base Stylesheet - http://git.io/base
Author: Matthew Hartman - http://www.matthewhartman.com.au/
- Version: 1.6 - Last Updated: 31st of January, 2014
+ Version: 1.7 - Last Updated: 10th of March, 2014
========================================================================== */
@@ -451,98 +451,51 @@ textarea {
}
/* Fluid Grid */
-.col {
- margin-left: 2%;
- float: left;
-}
-.col:first-child { margin-left: 0; }
+[class^="col-"], [class*=" col-"] { float: left; }
+[class*="pull-"], [class*="push-"] { position: relative; }
/* Columns */
-.col-1 {
- width: 6.5%;
- *width: ~'expression(Math.floor(0.065 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px")';
-}
-.col-2 {
- width: 15%;
- *width: ~'expression(Math.floor(0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px")';
-}
-.col-3 {
- width: 23.5%;
- *width: ~'expression(Math.floor(0.235 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px")';
-}
-.col-4 {
- width: 32%;
- *width: ~'expression(Math.floor(0.32 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px")';
-}
-.col-5 {
- width: 40.5%;
- *width: ~'expression(Math.floor(0.40.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px")';
-}
-.col-6 {
- width: 49.0%;
- *width: ~'expression(Math.floor(0.49 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px")';
-}
-.col-7 {
- width: 57.5%;
- *width: ~'expression(Math.floor(0.575 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px")';
-}
-.col-8 {
- width: 66%;
- *width: ~'expression(Math.floor(0.66 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px")';
-}
-.col-9 {
- width: 74.5%;
- *width: ~'expression(Math.floor(0.745 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px")';
-}
-.col-10 {
- width: 83%;
- *width: ~'expression(Math.floor(0.83 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px")';
-}
-.col-11 {
- width: 91.5%;
- *width: ~'expression(Math.floor(0.915 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px")';
-}
-.col-12 {
- width: 100%;
-}
+.col-1 { width: 8.33333%; }
+.col-2 { width: 16.66667%; }
+.col-3 { width: 25%; }
+.col-4 { width: 33%; }
+.col-5 { width: 41.66665%; }
+.col-6 { width: 50%; }
+.col-7 { width: 58.33333%; }
+.col-8 { width: 66.66666%; }
+.col-9 { width: 75%; }
+.col-10 { width: 83.33333%; }
+.col-11 { width: 91.66666%; }
+.col-12 { width: 100%; }
.col-1-4 { .col-3(); }
.col-1-2 { .col-6(); }
.col-1-3 { .col-4(); }
-/* Desktop Rows */
-.row {
- padding-top: .5em;
- padding-bottom: .5em;
-}
-.row-1 {
- padding-top: 1em;
- padding-bottom: 1em;
-}
-.row-2 {
- padding-top: 2em;
- padding-bottom: 2em;
-}
-.row-3 {
- padding-top: 3em;
- padding-bottom: 3em;
-}
-.row-4 {
- padding-top: 4em;
- padding-bottom: 4em;
-}
-.row-5 {
- padding-top: 5em;
- padding-bottom: 5em;
-}
-.row-6 {
- padding-top: 6em;
- padding-bottom: 6em;
-}
-.row-7 {
- padding-top: 7em;
- padding-bottom: 7em;
-}
+/* Push/Pull */
+.push-1 { left: 8.33333%; }
+.pull-1 { left: -8.33333%; }
+.push-2 { left: 16.66667%; }
+.pull-2 { left: -16.66667%; }
+.push-3 { left: 25%; }
+.pull-3 { left: -25%; }
+.push-4 { left: 33%; }
+.pull-4 { left: -33%; }
+.push-5 { left: 41.66665%; }
+.pull-5 { left: -41.66665%; }
+.push-6 { left: 50%; }
+.pull-6 { left: -50%; }
+.push-7 { left: 58.33333%; }
+.pull-7 { left: -58.33333%; }
+.push-8 { left: 66.66666%; }
+.pull-8 { left: -66.66666%; }
+.push-9 { left: 75%; }
+.pull-9 { left: -75%; }
+.push-10 { left: 83.33333%; }
+.pull-10 { left: -83.33333%; }
+.push-11 { left: 91.66666%; }
+.pull-11 { left: -91.66666%; }
+
/* ==========================================================================
/* 3.0 - CSS Helpers / Extras
@@ -637,30 +590,51 @@ textarea {
}
/* Tablet Grid */
-.tablet-col-1 { width: 6.5%; }
-.tablet-col-2 { width: 15%; }
-.tablet-col-3 { width: 23.5%; }
-.tablet-col-4 { width: 32%; }
-.tablet-col-5 { width: 40.5%; }
-.tablet-col-6 { width: 49.0%; }
-.tablet-col-7 { width: 57.5%; }
-.tablet-col-8 { width: 66%; }
-.tablet-col-9 { width: 74.5%; }
-.tablet-col-10 { width: 83%; }
-.tablet-col-11 { width: 91.5%; }
+.tablet-col-1 { width: 8.33333%; }
+.tablet-col-2 { width: 16.66667%; }
+.tablet-col-3 { width: 25%; }
+.tablet-col-4 { width: 33%; }
+.tablet-col-5 { width: 41.66665%; }
+.tablet-col-6 { width: 50%; }
+.tablet-col-7 { width: 58.33333%; }
+.tablet-col-8 { width: 66.66666%; }
+.tablet-col-9 { width: 75%; }
+.tablet-col-10 { width: 83.33333%; }
+.tablet-col-11 { width: 91.66666%; }
.tablet-col-12 { width: 100%; }
-.tablet-col-1-2 {
- .tablet-col-6();
-}
-.tablet-col-1-3 {
- .tablet-col-4();
-}
-.tablet-col-1-4 {
- .tablet-col-3();
-}
+.tablet-col-1-2 { .tablet-col-6(); }
+.tablet-col-1-3 { .tablet-col-4(); }
+.tablet-col-1-4 { .tablet-col-3(); }
+
+/* Tablet Push/Pull */
+.tablet-push-1 { left: 8.33333%; }
+.tablet-pull-1 { left: -8.33333%; }
+.tablet-push-2 { left: 16.66667%; }
+.tablet-pull-2 { left: -16.66667%; }
+.tablet-push-3 { left: 25%; }
+.tablet-pull-3 { left: -25%; }
+.tablet-push-4 { left: 33%; }
+.tablet-pull-4 { left: -33%; }
+.tablet-push-5 { left: 41.66665%; }
+.tablet-pull-5 { left: -41.66665%; }
+.tablet-push-6 { left: 50%; }
+.tablet-pull-6 { left: -50%; }
+.tablet-push-7 { left: 58.33333%; }
+.tablet-pull-7 { left: -58.33333%; }
+.tablet-push-8 { left: 66.66666%; }
+.tablet-pull-8 { left: -66.66666%; }
+.tablet-push-9 { left: 75%; }
+.tablet-pull-9 { left: -75%; }
+.tablet-push-10 { left: 83.33333%; }
+.tablet-pull-10 { left: -83.33333%; }
+.tablet-push-11 { left: 91.66666%; }
+.tablet-pull-11 { left: -91.66666%; }
+
+.tablet-no-push, .tablet-no-pull { left: auto; }
.tablet-full {
+ left: auto;
clear: both;
float: none;
width: 100%;
@@ -681,40 +655,6 @@ textarea {
.tablet-no-margin { margin: 0; }
.tablet-no-padding { padding: 0; }
-/* Tablet Rows */
-.tablet-row {
- padding-top: .5em;
- padding-bottom: .5em;
-}
-.tablet-row-1 {
- padding-top: 1em;
- padding-bottom: 1em;
-}
-.tablet-row-2 {
- padding-top: 2em;
- padding-bottom: 2em;
-}
-.tablet-row-3 {
- padding-top: 3em;
- padding-bottom: 3em;
-}
-.tablet-row-4 {
- padding-top: 4em;
- padding-bottom: 4em;
-}
-.tablet-row-5 {
- padding-top: 5em;
- padding-bottom: 5em;
-}
-.tablet-row-6 {
- padding-top: 6em;
- padding-bottom: 6em;
-}
-.tablet-row-7 {
- padding-top: 7em;
- padding-bottom: 7em;
-}
-
.no-tablet { .none(); }
.show-tablet { .block(); }
@@ -751,20 +691,29 @@ textarea {
}
/* Mobile Grid */
-.mobile-1-2 { width: 49.0%; }
-.mobile-1-3 { width: 32%; }
-.mobile-1-4 { width: 23.5%; }
+.mobile-col-1-2 { width: 50%; }
+.mobile-col-1-3 { width: 33%; }
+.mobile-col-1-4 { width: 25%; }
+
+/* Push/Pull */
+.mobile-push-1-2 { left: 50%; }
+.mobile-pull-1-2 { left: -50%; }
+.mobile-push-1-3 { left: 33%; }
+.mobile-pull-1-3 { left: -33%; }
+.mobile-push-1-4 { left: 25%; }
+.mobile-pull-1-4 { left: -25%; }
+
+.mobile-no-push, .mobile-no-pull { left: auto; }
.mobile-full {
+ left: auto;
clear: both;
float: none;
width: 100%;
margin: .2em 0 0 0;
.block();
}
-.mobile-full:first-child {
- margin: 0;
-}
+.mobile-full:first-child { margin-top: 0; }
.mobile-left-text { text-align: left; }
.mobile-right-text { text-align: right; }
@@ -778,45 +727,8 @@ textarea {
.mobile-no-margin { margin: 0; }
.mobile-no-padding { padding: 0; }
-/* Mobile Rows */
-.mobile-row {
- padding-top: .5em;
- padding-bottom: .5em;
-}
-.mobile-row-1 {
- padding-top: 1em;
- padding-bottom: 1em;
-}
-.mobile-row-2 {
- padding-top: 2em;
- padding-bottom: 2em;
-}
-.mobile-row-3 {
- padding-top: 3em;
- padding-bottom: 3em;
-}
-.mobile-row-4 {
- padding-top: 4em;
- padding-bottom: 4em;
-}
-.mobile-row-5 {
- padding-top: 5em;
- padding-bottom: 5em;
-}
-.mobile-row-6 {
- padding-top: 6em;
- padding-bottom: 6em;
-}
-.mobile-row-7 {
- padding-top: 7em;
- padding-bottom: 7em;
-}
-
/* Mobile Tables */
-table th,
-table td {
- padding: 4px;
-}
+table th, table td { padding: 4px; }
.no-mobile { .none(); }
.show-mobile { .block(); }
@@ -831,7 +743,7 @@ table td {
} /* End Mobile Media Query */
// ==========================================================================
-// -- 9.0 Printer Styles
+// -- 9.0 Print Styles
// ==========================================================================
@media print {
View
257 sass/style.scss
@@ -2,7 +2,7 @@
Base Stylesheet - http://git.io/base
Author: Matthew Hartman - http://www.matthewhartman.com.au/
- Version: 1.6 - Last Updated: 31st of January, 2014
+ Version: 1.7 - Last Updated: 10th of March, 2014
========================================================================== */
@@ -451,98 +451,28 @@ textarea {
}
/* Fluid Grid */
-.col {
- margin-left: 2%;
- float: left;
-}
-.col:first-child { margin-left: 0; }
+[class^="col-"], [class*=" col-"] { float: left; }
+[class*="pull-"], [class*="push-"] { position: relative; }
/* Columns */
-.col-1 {
- width: 6.5%;
- *width: expression(Math.floor(0.065 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
-}
-.col-2 {
- width: 15%;
- *width: expression(Math.floor(0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
-}
-.col-3 {
- width: 23.5%;
- *width: expression(Math.floor(0.235 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
-}
-.col-4 {
- width: 32%;
- *width: expression(Math.floor(0.32 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
-}
-.col-5 {
- width: 40.5%;
- *width: expression(Math.floor(0.40.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
-}
-.col-6 {
- width: 49.0%;
- *width: expression(Math.floor(0.49 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
-}
-.col-7 {
- width: 57.5%;
- *width: expression(Math.floor(0.575 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
-}
-.col-8 {
- width: 66%;
- *width: expression(Math.floor(0.66 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
-}
-.col-9 {
- width: 74.5%;
- *width: expression(Math.floor(0.745 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
-}
-.col-10 {
- width: 83%;
- *width: expression(Math.floor(0.83 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
-}
-.col-11 {
- width: 91.5%;
- *width: expression(Math.floor(0.915 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
-}
-.col-12 {
- width: 100%;
-}
+.col-1 { width: 8.33333%; }
+.col-2 { width: 16.66667%; }
+.col-3 { width: 25%; }
+.col-4 { width: 33%; }
+.col-5 { width: 41.66665%; }
+.col-6 { width: 50%; }
+.col-7 { width: 58.33333%; }
+.col-8 { width: 66.66666%; }
+.col-9 { width: 75%; }
+.col-10 { width: 83.33333%; }
+.col-11 { width: 91.66666%; }
+.col-12 { width: 100%; }
.col-1-4 { @extend .col-3; }
.col-1-2 { @extend .col-6; }
.col-1-3 { @extend .col-4; }
-/* Desktop Rows */
-.row {
- padding-top: .5em;
- padding-bottom: .5em;
-}
-.row-1 {
- padding-top: 1em;
- padding-bottom: 1em;
-}
-.row-2 {
- padding-top: 2em;
- padding-bottom: 2em;
-}
-.row-3 {
- padding-top: 3em;
- padding-bottom: 3em;
-}
-.row-4 {
- padding-top: 4em;
- padding-bottom: 4em;
-}
-.row-5 {
- padding-top: 5em;
- padding-bottom: 5em;
-}
-.row-6 {
- padding-top: 6em;
- padding-bottom: 6em;
-}
-.row-7 {
- padding-top: 7em;
- padding-bottom: 7em;
-}
+
/* ==========================================================================
/* 3.0 - CSS Helpers / Extras
@@ -637,30 +567,51 @@ textarea {
}
/* Tablet Grid */
-.tablet-col-1 { width: 6.5%; }
-.tablet-col-2 { width: 15%; }
-.tablet-col-3 { width: 23.5%; }
-.tablet-col-4 { width: 32%; }
-.tablet-col-5 { width: 40.5%; }
-.tablet-col-6 { width: 49.0%; }
-.tablet-col-7 { width: 57.5%; }
-.tablet-col-8 { width: 66%; }
-.tablet-col-9 { width: 74.5%; }
-.tablet-col-10 { width: 83%; }
-.tablet-col-11 { width: 91.5%; }
+.tablet-col-1 { width: 8.33333%; }
+.tablet-col-2 { width: 16.66667%; }
+.tablet-col-3 { width: 25%; }
+.tablet-col-4 { width: 33%; }
+.tablet-col-5 { width: 41.66665%; }
+.tablet-col-6 { width: 50%; }
+.tablet-col-7 { width: 58.33333%; }
+.tablet-col-8 { width: 66.66666%; }
+.tablet-col-9 { width: 75%; }
+.tablet-col-10 { width: 83.33333%; }
+.tablet-col-11 { width: 91.66666%; }
.tablet-col-12 { width: 100%; }
-.tablet-col-1-2 {
- @extend .tablet-col-6;
-}
-.tablet-col-1-3 {
- @extend .tablet-col-4;
-}
-.tablet-col-1-4 {
- @extend .tablet-col-3;
-}
+.tablet-col-1-2 { @extend .tablet-col-6; }
+.tablet-col-1-3 { @extend .tablet-col-4; }
+.tablet-col-1-4 { @extend .tablet-col-3; }
+
+/* Tablet Push/Pull */
+.tablet-push-1 { left: 8.33333%; }
+.tablet-pull-1 { left: -8.33333%; }
+.tablet-push-2 { left: 16.66667%; }
+.tablet-pull-2 { left: -16.66667%; }
+.tablet-push-3 { left: 25%; }
+.tablet-pull-3 { left: -25%; }
+.tablet-push-4 { left: 33%; }
+.tablet-pull-4 { left: -33%; }
+.tablet-push-5 { left: 41.66665%; }
+.tablet-pull-5 { left: -41.66665%; }
+.tablet-push-6 { left: 50%; }
+.tablet-pull-6 { left: -50%; }
+.tablet-push-7 { left: 58.33333%; }
+.tablet-pull-7 { left: -58.33333%; }
+.tablet-push-8 { left: 66.66666%; }
+.tablet-pull-8 { left: -66.66666%; }
+.tablet-push-9 { left: 75%; }
+.tablet-pull-9 { left: -75%; }
+.tablet-push-10 { left: 83.33333%; }
+.tablet-pull-10 { left: -83.33333%; }
+.tablet-push-11 { left: 91.66666%; }
+.tablet-pull-11 { left: -91.66666%; }
+
+.tablet-no-push, .tablet-no-pull { left: auto; }
.tablet-full {
+ left: auto;
clear: both;
float: none;
width: 100%;
@@ -681,39 +632,6 @@ textarea {
.tablet-no-margin { margin: 0; }
.tablet-no-padding { padding: 0; }
-/* Tablet Rows */
-.tablet-row {
- padding-top: .5em;
- padding-bottom: .5em;
-}
-.tablet-row-1 {
- padding-top: 1em;
- padding-bottom: 1em;
-}
-.tablet-row-2 {
- padding-top: 2em;
- padding-bottom: 2em;
-}
-.tablet-row-3 {
- padding-top: 3em;
- padding-bottom: 3em;
-}
-.tablet-row-4 {
- padding-top: 4em;
- padding-bottom: 4em;
-}
-.tablet-row-5 {
- padding-top: 5em;
- padding-bottom: 5em;
-}
-.tablet-row-6 {
- padding-top: 6em;
- padding-bottom: 6em;
-}
-.tablet-row-7 {
- padding-top: 7em;
- padding-bottom: 7em;
-}
.no-tablet { display: none; }
.show-tablet { display: block; }
@@ -751,20 +669,29 @@ textarea {
}
/* Mobile Grid */
-.mobile-1-2 { width: 49.0%; }
-.mobile-1-3 { width: 32%; }
-.mobile-1-4 { width: 23.5%; }
+.mobile-col-1-2 { width: 50%; }
+.mobile-col-1-3 { width: 33%; }
+.mobile-col-1-4 { width: 25%; }
+
+/* Push/Pull */
+.mobile-push-1-2 { left: 50%; }
+.mobile-pull-1-2 { left: -50%; }
+.mobile-push-1-3 { left: 33%; }
+.mobile-pull-1-3 { left: -33%; }
+.mobile-push-1-4 { left: 25%; }
+.mobile-pull-1-4 { left: -25%; }
+
+.mobile-no-push, .mobile-no-pull { left: auto; }
.mobile-full {
+ left: auto;
clear: both;
float: none;
width: 100%;
margin: .2em 0 0 0;
display: block;
}
-.mobile-full:first-child {
- margin: 0;
-}
+.mobile-full:first-child { margin-top: 0; }
.mobile-left-text { text-align: left; }
.mobile-right-text { text-align: right; }
@@ -778,45 +705,9 @@ textarea {
.mobile-no-margin { margin: 0; }
.mobile-no-padding { padding: 0; }
-/* Mobile Rows */
-.mobile-row {
- padding-top: .5em;
- padding-bottom: .5em;
-}
-.mobile-row-1 {
- padding-top: 1em;
- padding-bottom: 1em;
-}
-.mobile-row-2 {
- padding-top: 2em;
- padding-bottom: 2em;
-}
-.mobile-row-3 {
- padding-top: 3em;
- padding-bottom: 3em;
-}
-.mobile-row-4 {
- padding-top: 4em;
- padding-bottom: 4em;
-}
-.mobile-row-5 {
- padding-top: 5em;
- padding-bottom: 5em;
-}
-.mobile-row-6 {
- padding-top: 6em;
- padding-bottom: 6em;
-}
-.mobile-row-7 {
- padding-top: 7em;
- padding-bottom: 7em;
-}
/* Mobile Tables */
-table th,
-table td {
- padding: 4px;
-}
+table th, table td { padding: 4px; }
.no-mobile { display: none; }
.show-mobile { display: block; }
@@ -831,7 +722,7 @@ table td {
} /* End Mobile Media Query */
// ==========================================================================
-// -- 9.0 Printer Styles
+// -- 9.0 Print Styles
// ==========================================================================
@media print {
View
1,188 style.css
513 additions, 675 deletions not shown because the diff is too large. Please use a local Git client to view these changes.

0 comments on commit cdf9ba7

Please sign in to comment.
Something went wrong with that request. Please try again.