Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 193 lines (152 sloc) 3.855 kB
9d5908a @jonikorpi Initial commit
authored
1 /*
2 Frameless <http://framelessgrid.com/>
3 by Joni Korpi <http://jonikorpi.com/>
4 licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
5 */
6
7
8 //
9 // Configuration
10 //
11
b3497ea @pyrtsa Simplify px-em conversion in SCSS
pyrtsa authored
12 $font-size: 16px; // Your base font-size in pixels
13 $em: $font-size / 1em; // Shorthand for outputting ems
9d5908a @jonikorpi Initial commit
authored
14
b3497ea @pyrtsa Simplify px-em conversion in SCSS
pyrtsa authored
15 $column: 48px; // The column-width of your grid in pixels
16 $gutter: 24px; // The gutter-width of your grid in pixels
9d5908a @jonikorpi Initial commit
authored
17
18
19 //
20 // Column-widths in variables, in ems
21 //
22
b3497ea @pyrtsa Simplify px-em conversion in SCSS
pyrtsa authored
23 $cols1: ( 1 * ($column + $gutter) - $gutter) / $em;
24 $cols2: ( 2 * ($column + $gutter) - $gutter) / $em;
25 $cols3: ( 3 * ($column + $gutter) - $gutter) / $em;
26 $cols4: ( 4 * ($column + $gutter) - $gutter) / $em;
27 $cols5: ( 5 * ($column + $gutter) - $gutter) / $em;
28 $cols6: ( 6 * ($column + $gutter) - $gutter) / $em;
29 $cols7: ( 7 * ($column + $gutter) - $gutter) / $em;
30 $cols8: ( 8 * ($column + $gutter) - $gutter) / $em;
31 $cols9: ( 9 * ($column + $gutter) - $gutter) / $em;
32 $cols10: (10 * ($column + $gutter) - $gutter) / $em;
33 $cols11: (11 * ($column + $gutter) - $gutter) / $em;
34 $cols12: (12 * ($column + $gutter) - $gutter) / $em;
35 $cols13: (13 * ($column + $gutter) - $gutter) / $em;
36 $cols14: (14 * ($column + $gutter) - $gutter) / $em;
37 $cols15: (15 * ($column + $gutter) - $gutter) / $em;
38 $cols16: (16 * ($column + $gutter) - $gutter) / $em;
9d5908a @jonikorpi Initial commit
authored
39
40
41 //
42 // Column-widths in a function, in ems
43 //
44
45 @mixin width ($cols:1) {
b3497ea @pyrtsa Simplify px-em conversion in SCSS
pyrtsa authored
46 width: ($cols * ($column + $gutter) - $gutter) / $em;
9d5908a @jonikorpi Initial commit
authored
47 }
48
49
50 /*
51 Margin, padding, and border resets
52 except for form elements
53 */
54
55 body, div,
56 h1, h2, h3, h4, h5, h6,
57 p, blockquote, pre, dl, dt, dd, ol, ul, li,
58 fieldset, form, label, legend, th, td,
59 article, aside, figure, footer, header, hgroup, menu, nav, section {
60 margin: 0;
61 padding: 0;
62 border: 0;
63 }
64
65
66 /*
67 Consistency fixes
68 adopted from http://necolas.github.com/normalize.css/
69 */
70
71 article, aside, details, figcaption, figure,
72 footer, header, hgroup, nav, section, audio, canvas, video {
73 display: block;
74 }
75
76 html {
77 height: 100%;
78 -webkit-text-size-adjust: 100%;
79 -ms-text-size-adjust: 100%;
80 }
81
82 body {min-height: 100%; font-size: 100%;}
83
84 sub, sup {
85 font-size: 75%;
86 line-height: 0;
87 position: relative;
88 vertical-align: baseline;
89 }
90
91 sup {top: -0.5em;}
92 sub {bottom: -0.25em;}
93
94 pre {
95 white-space: pre;
96 white-space: pre-wrap;
97 word-wrap: break-word;
98 }
99
100 b, strong {font-weight: bold;}
101 abbr[title] {border-bottom: 1px dotted;}
102
103 table {
104 border-collapse: collapse;
105 border-spacing: 0;
106 }
107
108 a img, img {
109 -ms-interpolation-mode: bicubic;
110 border: 0;
111 }
112
113 input, textarea, button, select {
114 margin: 0;
115 font-size: 100%;
116 line-height: normal;
117 vertical-align: baseline;
118 }
119
120 button,
121 html input[type="button"],
122 input[type="reset"],
123 input[type="submit"] {
124 cursor: pointer;
125 -webkit-appearance: button;
126 }
127
128 input[type="checkbox"],
129 input[type="radio"] {
130 -webkit-box-sizing: border-box;
131 -moz-box-sizing: border-box;
132 -o-box-sizing: border-box;
133 -ms-box-sizing: border-box;
134 box-sizing: border-box;
135 }
136
137 textarea {overflow: auto;}
138
139
140 /*
141 These are easy to forget
142 */
143
144 ::selection {
145 background: red;
146 color: white;
147 }
148 ::-moz-selection {
149 background: red;
150 color: white;
151 }
152
153 img::selection {
154 background: transparent;
155 }
156 img::-moz-selection {
157 background: transparent;
158 }
159
160 body {
161 -webkit-tap-highlight-color: rgba(255,0,0, 0.62);
162 }
163
164
165 /*
166 Style overrides for IE6-8
167 http://jonikorpi.com/leaving-old-IE-behind/
168 */
169
170 .ie {
171
172 }
173
174
175 /*
176 An easy way to zoom your entire layout in or out (as long as it's set in ems).
177 Just change the media queries to activate them.
178 Assuming your base font-size is 16:
179 - the first one zooms out by a factor of (16-2)/16 = 0.875
180 - the second one zooms in by a factor of (16+2)/16 = 1.125
181 */
182
bed6228 @jonikorpi $ -> @
authored
183 @media screen and (max-width: 1px) {
9d5908a @jonikorpi Initial commit
authored
184 body {
b3497ea @pyrtsa Simplify px-em conversion in SCSS
pyrtsa authored
185 font-size: ($font-size - 2) / $em;
9d5908a @jonikorpi Initial commit
authored
186 }
187 }
188
bed6228 @jonikorpi $ -> @
authored
189 @media screen and (max-width: 1px) {
9d5908a @jonikorpi Initial commit
authored
190 body {
b3497ea @pyrtsa Simplify px-em conversion in SCSS
pyrtsa authored
191 font-size: ($font-size + 2) / $em;
9d5908a @jonikorpi Initial commit
authored
192 }
193 }
Something went wrong with that request. Please try again.