Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 227 lines (193 sloc) 5.357 kb
4aae5b7 @harrison initial
authored
1 <!doctype html>
2 <meta charset=utf-8>
0e0b37e @harrison title to Bricklayer
authored
3 <title>Bricklayer</title>
4aae5b7 @harrison initial
authored
4
5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6
7 <link rel=stylesheet href=css/condom.css>
8 <link rel=stylesheet href=css/type.css>
9 <link rel=stylesheet href=css/form.css>
10 <link rel=stylesheet href=css/grid.css>
11 <link rel=stylesheet href=css/main.css>
12
44e1f48 @harrison Rewrite Grid, Add IE7 Mode
authored
13 <body>
14 <div class="wrapper">
15 <header class="header-fill">
16 <h1 class="snug white">Bricklayer</h1>
17 </header>
18
19 <div class="row">
20 <div class="col3">
21 <h5># Columns</h5>
22 <input type="number" value="12" min="1" step="1" id="columns" />
23 </div>
24 <div class="col3">
25 <h5>Gutter [ems]</h5>
26 <input type="number" value="1" min="0" step="0.1" id="gutter" />
27 </div>
28 <div class="col3">
29 <h5>Min Width [px]</h5>
30 <input type="number" value="640" min="0" step="1" id="minwidth" />
31 </div>
32 <div class="col3">
33 <h5>Max Width [px]</h5>
34 <input type="number" value="1200" min="1" step="1" id="maxwidth" />
35 </div>
4aae5b7 @harrison initial
authored
36 </div>
44e1f48 @harrison Rewrite Grid, Add IE7 Mode
authored
37 <div>
38 <label for="ie7"><input type="checkbox" id="ie7" /> IE7 Support</label>
8900a6c @harrison A rewrite
authored
39 </div>
40
41 <div class="row">
2d734a6 @harrison Fixed wrapper min-width on mobile. + some major re-org
authored
42 <a class="col tab large blue active" id="less-btn" href="javascript:;">
8900a6c @harrison A rewrite
authored
43 Less
44 </a>
2d734a6 @harrison Fixed wrapper min-width on mobile. + some major re-org
authored
45 <a class="col tab large blue" id="css-btn" href="javascript:;">
8900a6c @harrison A rewrite
authored
46 Css
47 </a>
48 </div>
49
50 <hr>
51
44e1f48 @harrison Rewrite Grid, Add IE7 Mode
authored
52 <div>
8900a6c @harrison A rewrite
authored
53 <script type="text/html" id="less-variables">
54 @wrapper-padding: <%= padding %><%= paddingUnit %>;
55 @max-width: <%= maxWidth %><%= maxUnit %>;
56 @min-width: <%= minWidth %><%= minUnit %>;
785917f @harrison @gutter variable should only ever be set horizontally
authored
57 @gutter: <%= gutter %><%= gutterUnit %>;
8900a6c @harrison A rewrite
authored
58 @columns: <%= columns %>;
59 </script>
44e1f48 @harrison Rewrite Grid, Add IE7 Mode
authored
60
8900a6c @harrison A rewrite
authored
61 <script type="text/html" id="ie-variables">
62 @min-width: <%= minWidth %><%= minUnit %>;
63 @gutter: <%= ieGutter %><%= ieGutterUnit %>;
64 @columns: <%= columns %>;
65 </script>
44e1f48 @harrison Rewrite Grid, Add IE7 Mode
authored
66
8900a6c @harrison A rewrite
authored
67 <div class="less-view">
68
69 <pre contenteditable="true" id="less-output" class="code">
70
71 // The Grid Baker (From Twitter Bootstrap)
72 .grid (@column-count) {
73 .colX (@index) when (@index > 0) {
74 (~"> .col@{index}") { .col(@index); }
75 .colX(@index - 1);
76 }
77 .colX (0) {}
78 .col (@column) {
79 width: @column * 100 / @column-count * 1%;
80 }
81 .colX (@column-count - 1);
82 }
83
84 * {
85 -webkit-box-sizing: border-box;
86 -moz-box-sizing: border-box;
87 box-sizing: border-box;
88 }
89
90 .wrapper {
91 padding: 0 @wrapper-padding;
92 max-width: @max-width;
93 min-width: @min-width;
94 margin: 0 auto;
95 }
96
97 .row {
98 width: 100%;
99 }
100
101 .row > [class*="col"] {
102 min-height: 1px;
103 display: block;
104 float: left;
785917f @harrison @gutter variable should only ever be set horizontally
authored
105 padding: 0 @gutter;
8900a6c @harrison A rewrite
authored
106 }
107
108 .row > [class*="col"]:first-child {
109 padding-left: 0;
110 }
111 .row > [class*="col"]:last-child {
112 padding-right: 0;
113 }
114
115 .row > .col {
116 width: 50%;
117 }
118
119 .row {
120 .grid( @columns );
121 }
122
2d734a6 @harrison Fixed wrapper min-width on mobile. + some major re-org
authored
123 [class*="row"] {
8900a6c @harrison A rewrite
authored
124 zoom: 1;
125 &:before,
126 &:after {
127 content: "";
128 display: table;
129 }
130 &:after {
131 clear: both;
132 }
133 }
134
135 img, object, embed {
136 max-width: 100%;
137 }
138 img {
139 height: auto;
140 -ms-interpolation-mode: bicubic;
141 }
142
143 @media handheld, only screen and (max-width: 640px) {
144 .wrapper {
145 min-width: auto;
146 }
147 .row > [class*="col"] {
148 width: auto;
149 float: none;
150 padding: 0;
151 }
152 }
153 </pre>
154 </div>
155
156 <div class="css-view">
157 <pre contenteditable="true" id="css-output" class="code"></pre>
158 </div>
159
2d734a6 @harrison Fixed wrapper min-width on mobile. + some major re-org
authored
160 <div id="ie-wrapper" class="is-hidden">
8900a6c @harrison A rewrite
authored
161 <hr>
162 <p><b>IE7 css output. </b>Include like so: &lt;!--[if IE 7]&gt; &lt;link rel=stylesheet href=ie7.css&gt; &lt;![endif]--&gt;</p>
163
164 <div class="less-view">
165 <pre contenteditable="true" id="ie-output" class="code">
166 @ie-correction: percentage( 0.5 / @min-width );
167
168 .row > [class*="col"] {
169 margin-left: @gutter * 1%;
170 padding: 0;
171 }
172 .row > [class*="col"]:first-child {
173 margin-left: 0;
174 }
175
176 // The Grid Baker (From Twitter Bootstrap)
177 .margin-grid ( @column-count, @correction ) {
178 .colX (@index) when (@index > 0) {
179 (~"> .col@{index}") { .col(@index); }
180 .colX(@index - 1);
181 }
182 .colX (0) {}
183 .col (@column) {
184 @col-division: @columns / @column;
185 @gutter-space: (@col-division - 1) * @gutter;
186 @column-space: 100 - @gutter-space;
187 @col-width: @column-space / @col-division;
188 @width: @col-width - @correction;
189
190 .setwidth (@space) when (@space > 0) {
191 width: @width;
192 }
193 .setwidth (@space) when (@space < 0) {
194 width: 0;
195 }
196 .setwidth( @column-space );
197 }
198 .colX (@column-count - 1);
199 }
200
201 .row {
202 .margin-grid( @columns, @ie-correction );
203 }
204 </pre>
205 </div>
206
207 <div class="css-view">
208 <pre contenteditable="true" id="ie-css-output" class="code"></pre>
209 </div>
210 </div>
211
44e1f48 @harrison Rewrite Grid, Add IE7 Mode
authored
212 </div>
213
214 <hr>
215
216 <footer>
217 <p>© MIT License. Hacked by <a href="http://github.com/harrison">Philip Harrison</a></p>
218 </footer>
4aae5b7 @harrison initial
authored
219 </div>
8900a6c @harrison A rewrite
authored
220
221 <script src=js/less-1.3.0.min.js></script>
222 <script src=js/tmpl.js></script>
223 <script src=js/jquery-1.7.2.min.js></script>
2d734a6 @harrison Fixed wrapper min-width on mobile. + some major re-org
authored
224 <script src=js/statemachine.js></script>
44e1f48 @harrison Rewrite Grid, Add IE7 Mode
authored
225 <script src=js/bricklayer.js></script>
4aae5b7 @harrison initial
authored
226 </body>
227
Something went wrong with that request. Please try again.