Converted multiple column width variables in Frameless.scss, into a single function. #1

Open
wants to merge 1 commit into
from
Jump to file
+21 −37
Split
View
@@ -15,38 +15,22 @@ $em: $font-size; // Shorthand for outputting ems
$column: 48; // The column-width of your grid in pixels
$gutter: 24; // The gutter-width of your grid in pixels
-
//
-// Column-widths in variables, in ems
+// Column-widths in a function, in ems
//
- $cols1: #{( 1 * ($column + $gutter) - $gutter) / $em}em;
- $cols2: #{( 2 * ($column + $gutter) - $gutter) / $em}em;
- $cols3: #{( 3 * ($column + $gutter) - $gutter) / $em}em;
- $cols4: #{( 4 * ($column + $gutter) - $gutter) / $em}em;
- $cols5: #{( 5 * ($column + $gutter) - $gutter) / $em}em;
- $cols6: #{( 6 * ($column + $gutter) - $gutter) / $em}em;
- $cols7: #{( 7 * ($column + $gutter) - $gutter) / $em}em;
- $cols8: #{( 8 * ($column + $gutter) - $gutter) / $em}em;
- $cols9: #{( 9 * ($column + $gutter) - $gutter) / $em}em;
-$cols10: #{(10 * ($column + $gutter) - $gutter) / $em}em;
-$cols11: #{(11 * ($column + $gutter) - $gutter) / $em}em;
-$cols12: #{(12 * ($column + $gutter) - $gutter) / $em}em;
-$cols13: #{(13 * ($column + $gutter) - $gutter) / $em}em;
-$cols14: #{(14 * ($column + $gutter) - $gutter) / $em}em;
-$cols15: #{(15 * ($column + $gutter) - $gutter) / $em}em;
-$cols16: #{(16 * ($column + $gutter) - $gutter) / $em}em;
-
+@function width($cols) {
+ @return (($cols * ($column + $gutter) - $gutter) / $em) + em;
+}
//
-// Column-widths in a function, in ems
+// Column-width as a mixin, in ems
//
-@mixin width ($cols:1) {
- width: #{($cols * ($column + $gutter) - $gutter) / $em}em;
+@mixin width($cols) {
+ width: width($cols);
}
-
/*
Margin, padding, and border resets
except for form elements
@@ -68,32 +52,32 @@ article, aside, figure, footer, header, hgroup, menu, nav, section {
adopted from http://necolas.github.com/normalize.css/
*/
-article, aside, details, figcaption, figure,
+article, aside, details, figcaption, figure,
footer, header, hgroup, nav, section, audio, canvas, video {
display: block;
}
html {
- height: 100%;
- -webkit-text-size-adjust: 100%;
+ height: 100%;
+ -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {min-height: 100%; font-size: 100%;}
sub, sup {
- font-size: 75%;
- line-height: 0;
- position: relative;
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
vertical-align: baseline;
}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
pre {
- white-space: pre;
- white-space: pre-wrap;
+ white-space: pre;
+ white-space: pre-wrap;
word-wrap: break-word;
}
@@ -118,13 +102,13 @@ input, textarea, button, select {
}
button,
- html input[type="button"],
- input[type="reset"],
+ html input[type="button"],
+ input[type="reset"],
input[type="submit"] {
cursor: pointer;
-webkit-appearance: button;
}
-
+
input[type="checkbox"],
input[type="radio"] {
-webkit-box-sizing: border-box;
@@ -133,7 +117,7 @@ input, textarea, button, select {
-ms-box-sizing: border-box;
box-sizing: border-box;
}
-
+
textarea {overflow: auto;}
@@ -168,7 +152,7 @@ body {
*/
.ie {
-
+
}
@@ -177,7 +161,7 @@ body {
Just change the media queries to activate them.
Assuming your base font-size is 16:
- the first one zooms out by a factor of (16-2)/16 = 0.875
- - the second one zooms in by a factor of (16+2)/16 = 1.125
+ - the second one zooms in by a factor of (16+2)/16 = 1.125
*/
@media screen and (max-width: 1px) {