-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathdocumentation.html
678 lines (630 loc) · 28.9 KB
/
documentation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
<!DOCTYPE html>
<html class = "no-js">
<!--<![endif]-->
<head>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1">
<title>Sass HTML5 Boilerplate</title>
<meta name = "description" content = "">
<meta name = "viewport" content = "width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel = "stylesheet" href = "css/demo.css"/>
<script src = "js/components/modernizr/modernizr.js"></script>
</head>
<body role = "document">
<div class = "container">
<header role = "banner">
<label for = "toggle-nav" class = "responsive-grid show-phone" role = "button">
<i class = "icon-menu"></i>
</label>
<input type = "checkbox" class = "toggle-nav" id = "toggle-nav" checked = "checked">
<nav role = "navigation" class = "nav">
<!-- use for emmet/zen coding -->
<!-- ul.nav>li*5>a[title]>i.icon-my-icon -->
<ul>
<li><a href = "#">Home <i class = "icon-home"></i></a></li>
<li>
<a href = "#">About <i class = "icon-question"></i></a>
<ul>
<li><a href = "#">Example Dropdown 1</a></li>
<li><a href = "#">Example Dropdown 2</a></li>
<li><a href = "#">Example Dropdown 3</a></li>
<li>
<a href = "#">Example Dropdown 4</a>
<ul>
<li><a href = "#">Example Dropdown 1</a></li>
<li><a href = "#">Example Dropdown 2</a></li>
<li><a href = "#">Example Dropdown 3</a></li>
<li><a href = "#">Example Dropdown 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href = "#">Download <i class = "icon-download"></i></a></li>
<li>
<a href = "#">FAQ <i class = "icon-question-sign"></i></a>
<ul>
<li><a href = "#">Example Dropdown 1</a></li>
<li><a href = "#">Example Dropdown 2</a></li>
<li><a href = "#">Example Dropdown 3</a></li>
<li><a href = "#">Example Dropdown 4</a></li>
<li><a href = "#">Example Dropdown 5</a></li>
<li><a href = "#">Example Dropdown 6</a></li>
<li><a href = "#">Example Dropdown 7</a></li>
<li><a href = "#">Example Dropdown 8</a></li>
</ul>
</li>
<li><a href = "#">Contact <i class = "icon-envelope"></i></a></li>
</ul>
</nav>
</header>
<article id = "content" role = "main">
<section class = "overview">
<div class = "centred row">
<h1>Style with SASS. Without bloat.</h1>
<h2>SASS Boilerplate is a simple, bloat-free starter kit for building your next web app</h2>
<div class = "links">
<div class = "row">
<iframe
src = "http://ghbtns.com/github-btn.html?user=srsgores&repo=sass-boilerplate&type=watch&count=true"
allowtransparency = "true" frameborder = "0" scrolling = "0" width = "62" height = "20"></iframe>
<iframe
src = "http://ghbtns.com/github-btn.html?user=srsgores&repo=sass-boilerplate&type=fork&count=true"
allowtransparency = "true" frameborder = "0" scrolling = "0" width = "95" height = "20"></iframe>
</div>
<div class = "toolbar" id = "social-media-buttons">
<a class = "btn" target = "_blank"
href = "http://twitter.com/intent/tweet?url=http://srsgores.github.io/sass-boilerplate/&text=Responsive, intuitive SASS framework @SGoresht"><i class = "icon-twitter"></i>
Tweet</a>
<a class = "btn" target = "_blank" href = "https://plus.google.com/share?url=http://srsgores.github.io/sass-boilerplate/"><i class = "icon-google-plus">
</i> Share</a>
<a class = "btn" download = "SASS Boilerplate" href = "https://github.com/srsgores/sass-boilerplate/archive/master.zip" id = "download"><i class = "icon-download"></i> Download
</a>
</div>
</div>
</div>
</section>
<section id = "brief-description">
<blockquote>
Sass boilerplate is a front-end framework built on top of SASS, the CSS preprocessor, which allows for lean,
responsive web design with the latest standards.
</blockquote>
</section>
<section id = "installation">
<header class = "centred">
<h1>Installation</h1>
</header>
<p>Choose any of the following:</p>
<ol class="task-list">
<li>Use the <a href="https://github.com/srsgores/generator-sass-boilerplate">yeoman generator</a>
</li>
<li>Clone the git repo — <code>git clone
https://github.com/srsgores/sass-boilerplate-boilerplate.git</code> - and checkout the <a href="https://github.com/srsgores/SASS-boilerplate/releases">tagged
release</a> you'd like to
use.</li>
<li>
Install with <a href = "http://bower.io">Bower</a>:
<pre>
<code>bower install --save sassboilerplate</code>
</pre>
</li>
</ol>
</section>
<section id = "features">
<header class = "centred">
<h1>What makes it so great?</h1>
</header>
<div class = "row">
<div class = "fourcol">
<div class = "centred">
<i class = "icon-plus feature-icon"></i>
<h2>SASS is More</h2>
</div>
<p>You get ultimate control over your UI. Start from easy standards,
as promoted by the HTML5 boilerplate, gain a native feel on mobile devices with HTML5
input types, and use cutting-edge technologies. Engage in responsive design from the
outset, watch your designs scale with <code>em</code>s (rather than <code>px</code>s), and
do CSS the proper way with an emphasis on grouped selectors.</p>
</div>
<div class = "fourcol">
<div class = "centred">
<i class = "icon-droplet feature-icon"></i>
<h2>Vector FTW</h2>
</div>
<p>Customize your own icon font using Icomoon. Use up to 300 customizable icons,
all in the form of a font that works with all browsers. Import any vectors from
Illustrator or Photoshop.</p>
</div>
<div class = "fourcol">
<div class = "centred">
<i class = "icon-pencil2 feature-icon"></i>
<h2>Customizable</h2>
</div>
<p>Using Twitter's <a href = "http://bower.io/" target = "_blank">Bower</a>, SASS Boilerplate allows you to
get your project set up in seconds,
while always keeping the libraries you use up to date. Simply install Bower, and do
<code>bower install</code>, and you'll be all set up.</p>
</div>
</div>
<div class = "row">
<div class = "fourcol">
<div class = "centred">
<i class = "icon-expand feature-icon"></i>
<h2>100% Flexible Grid System</h2>
</div>
<p>Built on top of SASS, SASS Boilerplate can meld into any scenario. Using this as your UI
Framework, you can modify row counts, columns, column class prefix and suffixes,
and even the margins between! Using Bootstrap? SASS Boilerplate can be configured to use
the <strong>exact same grid classes as Bootstrap</strong>.</p>
</div>
<div class = "fourcol">
<div class = "centred">
<i class = "icon-eye2 feature-icon"></i>
<h2>3 Colours to Rule Them All</h2>
</div>
<p>Make customization easy for your users. Using SASS's colour functions,
the framework is set to work with three colours: main, secondary, and primary. Of course,
you still have the option of hard-coding your colours in... but the framework leaves you
with good examples of how to build a dynamic site for your client.</p>
</div>
<div class = "fourcol">
<div class = "centred">
<i class = "icon-mobile2 feature-icon"></i>
<h2>Responsive</h2>
</div>
<p>Try resizing your browser. SASS Boilerplate is built responsively,
with responsive design in mind. Columns fold over, and your site is guaranteed to work on
any device</p>
</div>
</div>
</section>
<section id = "what-you-get">
<header class = "centred">
<h1>What You Get</h1>
</header>
<div class = "row">
<div class = "sixcol">
<div class = "centred">
<i class = "icon-accessibility feature-icon large"></i>
<h1>ARIA-Compliant Markup</h1>
</div>
<p>Extend your site's accessibility by using the new ARIA roles so that those with screen
readers can better understand the structuring of your site. SASS Boilerplate ships with a
default HTML markup with the main ARIA roles: <code>main</code> and <code>nav</code>.</p>
</div>
<div class = "sixcol last">
<div class = "centred">
<i class = "icon-html5 feature-icon large"></i>
<h1>HTML5-Valid
<small>boilerplate markup</small>
</h1>
</div>
<p>You can start your next project knowing that the markup and default styles used in SASS
boilerplate are HTML5-valid. Instead of styling for older browsers (like Bootstrap),
we style using the recommended W3C recommendations. Older browsers fall back using
Modernizr or the HTML5 shim.</p>
</div>
</div>
<div class = "row">
<div class = "sixcol">
<div class = "centred">
<i class = "icon-css3 feature-icon large"></i>
<h1>Grouped Selectors</h1>
</div>
<p>The problem with engines like SASS (or SCSS) is that they tend to encourage lazy developers
to use directives like <code>@extend</code>. Ever had a project where media queries are spread all over
the place, and you can't keep track of where each element's media query is? SASS Boilerplate gives a new
meaning to the <code>@extends</code> directive by providing a useful set of helpers, and keeping the
media queries stylesheet nice and clean.</p>
</div>
<div class = "sixcol last">
<div class = "centred">
<i class = "icon-chrome feature-icon large"></i>
</div>
<p>SASS Boilerplate is designed with UX in mind. Using HTML5 elements like the
<code>noscript</code> tag, ensure your users have javascript-enabled browsers. Using
<strong>loader.js</strong>, you ensure your app doesn't get an <em>breaking</em> feel
when non-javascript-enabled browsers try to access your site.</p>
</div>
</div>
<div class = "row">
<div class = "centred">
<i class = "icon-Icomoon large"></i>
<h1>Icomoon Icons
<small>the clean way</small>
</h1>
</div>
<p>Using a new icon technique, you can avoid all the icky <code>content</code> values in your CSS
by using the ready-to-use <code>icomoon.SASS</code> file, with all icons as variables. This
makes your code much more readable and maintainable!</p>
<div class = "row">
<div class = "sixcol">
<header class = "centred">
<h3>Code <i class = "icon-css3"></i></h3>
</header>
<pre class = "language-css"><code>
//example module
.module {
position: relative;
.box;
&.feature-star {
&:after {
position: absolute;
font-family: "icomoon";
content: @icon-star-2;
font-size: @fontSizeLarge;
color: spin(@textColour, 40);
#transition > .transition(all @transition-time ease);
text-shadow: 0 0 @borderRadius spin(lighten(@textColour, 40), 40%);
}
&:hover {
&:after {
font-size: (@fontSizeLarge * @multiplier);
#transform > .rotate(-90deg);
content: @icon-star;
}
}
}
</code></pre>
</div>
<div class = "sixcol last">
<header class = "centred"><h3>Result</h3></header>
<aside class = "module feature-star">
<header><h3>Feature Star Module</h3></header>
<p>Content goes here.</p>
</aside>
</div>
</div>
</div>
</section>
<section id = "basic-usage">
<section id = "buttons">
<h1>Buttons</h1>
<p>Buttons in SASS Boilerplate are based on both Twitter Bootstrap and <a href = "http://calipso.so">Calipso</a>'s default buttons.
Buttons can be in any of two recommended forms:</p>
<ol>
<li><p>Anchor tags:</p>
<pre class = "language-markup">
<code><a class = "btn" href = "/url">Link Button</a></code>
</pre>
</li>
<li><p>Button tags:</p>
<pre class = "language-markup">
<code><button>HTML5 Button</button></code>
</pre>
</li>
</ol>
<p>Using the <code>button</code> tag, you don't need to worry about adding a class (you can
customize this, of course).</p>
<h2>Icons with Buttons</h2>
<p>Since we're using icomoon <i class = "icon-icomoon"></i>, we have the flexibility to put many
buttons with icons:</p>
<div class = "box">
<div class = "row centred">
<h3>Icon Button Examples</h3>
</div>
<div class = "row">
<div class = "sixcol">
<button>Free Parking <i class = "icon-accessibility"></i></button>
<button>Get Android App <i class = "icon-android"></i></button>
<button>Next <i class = "icon-arrow-right"></i></button>
<button>Previous <i class = "icon-arrow-left"></i></button>
<button><i class = "icon-basket"></i> Purchase</button>
</div>
<div class = "sixcol">
<button>Remove <i class = "icon-remove"></i></button>
<button>Facebook <i class = "icon-facebook"></i></button>
<button>Book Flight <i class = "icon-airplane"></i></button>
<button>Block Friend <i class = "icon-blocked"></i></button>
<button>Preview <i class = "icon-eye-2"></i></button>
</div>
</div>
</div>
<p>All we need to do to get icons working is to place an <code>i</code> element within the button:</p>
<pre class = "language-markup">
<code><button>Text here <i class
= "icon-icon-of-my-choice"></i></button></code>
</pre>
<section id = "button-groups">
<h2>Button Groups</h2>
<p>Also like Bootstrap, SASS Boilerplate comes with styles for button groups:</p>
<p>To get a button group, use any of the following classes:</p>
<ul>
<li><code>.toolbar</code></li>
<li><code>.btn-group</code></li>
<li><code>.actions</code></li>
<li><code>.form-actions</code></li>
</ul>
<p>Obviously, use the most applicable class when you're coding your HTML. For forms,
at the bottom, when you have to submit something, use <code>form-actions</code>; when you
just need a toolbar (say, at the top), just use <code>toolbar</code>.</p>
<div class = "box">
<h3>Button Group Examples</h3>
<h4>Basic Button Group</h4>
<div class = "toolbar centred">
<button>Click Me</button>
<button>Or Me</button>
<button>Or Me</button>
</div>
<h4>Advanced Button Group</h4>
<div class = "toolbar">
<button title = "Write a New Message"><i class = "icon-plus"></i> New Message</button>
<button title = "View Inbox"><i class = "icon-drawer"></i> Inbox</button>
<button title = "Search Messages in This Conversation"><i class = "icon-search"></i></button>
</div>
</div>
</section>
</section>
<section id = "grid">
<h1>Grid System</h1>
<p>SASS Boilerplate uses a variation of
<a href = "http://andytaylor.me/2013/04/09/1140px-css-grid-retired/" target = "_blank">Andy Taylor's
newly-retired grid system</a>. The framework has been updated to allow for
generation of columns and rows, all based on the user's configuration.</p>
<button class = "show-edit-container"><i class = "icon-grid-view"></i> Generate Custom Grid</button>
<p>To use the grid system, you will need to understand how rows and columns work. All content
that you want to space out needs to first be placed in a <code>row</code>. To do this, all we
need to do is assign the class <code>row</code> to any element. For example:</p>
<div class = "box">
<pre class = "language-markup">
<code><div class = "row">{content goes here}</div></code>
</pre>
</div>
<p>Next, any elements that you want to separate in columns need to be assigned a column class. By
default, the grid system included starts out with <strong>12</strong> columns. So to have two
columns (or to divide the screen in two horizontal parts), we would assign the elements each
the class of <code>sixcol</code>. This is because <code>12 / 6 = 2</code>:</p>
<div class = "row">
<div class = "sixcol">
<div class = "box"><code>sixcol</code></div>
</div>
<div class = "sixcol">
<div class = "box"><code>sixcol</code></div>
</div>
</div>
<div class = "row">
<div class = "threecol">
<div class = "box"><code>threecol</code></div>
</div>
<div class = "threecol">
<div class = "box"><code>threecol</code></div>
</div>
<div class = "threecol">
<div class = "box"><code>threecol</code></div>
</div>
<div class = "threecol">
<div class = "box"><code>threecol</code></div>
</div>
</div>
<div class = "row">
<div class = "threecol">
<div class = "box"><code>threecol</code></div>
</div>
<div class = "threecol">
<div class = "box"><code>threecol</code></div>
</div>
<div class = "sixcol ">
<div class = "box"><code>sixcol</code></div>
</div>
</div>
<p>Of course, you can customize your grid system to have however many columns you want,
and even the class names. For example, you might want classes to have the
<code>span-12</code> syntax like in Bootstrap. To edit the grid system,
simply change any of the variables in the <code>_variables.scss</code> partial.</p>
</section>
<section id = "boxes">
<h1>Boxes</h1>
<p>You've already seen them, but boxes offer a great way to separate your content. The most
obvious application is an <code>aside</code> element.</p>
<pre class = "language-markup">
<code><aside class = "box"><p>My Content Goes here</p></aside></code>
</pre>
<p><strong>Output:</strong></p>
<aside class = "box">
<p>My Content Goes here</p>
</aside>
<p>Boxes are, by default, rounded. You can configure all of this yourself to better suit your
client.</p>
<h3>Responsive Design</h3>
<p>While it is true that this framework uses a "one-size-fits-all" scheme by default,
it's up to you as the developer to use any media queries as necessary. That's why you will
find included, a set of all possible media queries, from iPhone to Android devices. The media
queries are all empty except for the one set to media query once the browser is smaller than
the container size.</p>
</section>
<section id = "helpers">
<h1>Helpers</h1>
<p>SASS Boilerplate comes with a set of useful helper classes to help you quickly change the
appearance of elements:</p>
<table>
<caption>Table 1: Helper Classes</caption>
<thead>
<tr>
<th>Class Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>.pull-right</code></th>
<td>Just adds <code>float: right;</code> to given element. Brings element out of flow,
to right.
</td>
</tr>
<tr>
<th><code>.hide</code></th>
<td>Hides given element. Does not show. Same as <code>display: none;</code></td>
</tr>
<tr>
<th><code>.show</code></th>
<td>Sets an element to show. Reverses <code>.hide</code></td>
</tr>
<tr>
<th><code>.invisible</code></th>
<td>Sets an element to be "invisible". Is still there, but cannot be seen. Doesn't work
in older versions of IE.
</td>
</tr>
</tbody>
</table>
</section>
</section>
<section id = "faq">
<header class = "centred">
<h1>FAQ
<small>Frequently Asked Questions</small>
</h1>
</header>
<section class = "question">
<h3 class = "btn">Why SASS? I know of much better preprocessors that are more stable (LESS, Stylus,
etc.). What's the difference: SASS vs. these alternatives?</h3>
<div class = "answer">
<p>While it is true that SASS is more strongly typed than its siblings (LESS,
Stylus), SASS is unique in that it offers the ability of <strong>string processing</strong>, <strong>looping</strong>, and <strong>extending</strong>. Overall, SASS is a more mature CSS preprocessor solution than LESS; however, Stylus is even more advanced than SASS in a couple ways, but is less supported.</p>
<p>Otherwise, it's mostly true that SASS and Stylus beat LESS. If you are looking for the same
features, minus the live editing, check out <a href = "https://github.com/srsgores/less-boilerplate">LESS
boilerplate</a>.</p></div>
</section>
<section class = "question">
<h3 class = "btn">You load Modernizr by default, but this really isn't necessary. Modernizr is hacky,
and it shouldn't be used... unless absolutely necessary.</h3>
<div class = "answer">
<p>
Unfortunately, if you want to use new features like HTML5 <i class = "icon-html5"></i>, everything
can be considered a <em>hack</em>. While it is true that Modernizr does cause some overhead,
it's also true that you can customize your build of Modernizr and use it to whatever extent you
with. Using <a href = "http://bower.io" target = "_blank">bower</a>, you can import whichever
tests you want.
</p>
</div>
</section>
<section class = "question">
<h3 class = "btn">So Andy Taylor says that the 1140 grid system is retired... so why are you using it here?</h3>
<div class = "answer">
<p>The reason I chose to include the 1140 grid system as my basis is that it was
what I found most intuitive as I was learning grid systems. Also, I didn't <em>use</em> the
grid system; rather, I built on top of it a base for <strong>generating</strong> new, improved
grid systems. Rather than working off <strong>one media query</strong>, users are encouraged
to use multiple media queries, eliminating the "one-size fits all" mentality. On the other
hand, having one media query does simplify things a little bit...</p>
</div>
</section>
<section class = "question">
<h3 class = "btn">I'm new to SASS. Is it worth it, over using normal CSS? What tools should I use?</h3>
<div class = "answer">
<p>If you're new to SASS, you should
<a href = "https://encrypted.google.com/search?aq=f&oq=SASS+css+tutorial&sourceid=chrome&ie=UTF-8&q=SASS+css+tutorial&qscrl=1" target = "_blank">try
google for some tutorials</a>. Learning a preprocessor language is
very useful if you plan on using CSS3 or cutting-edge features because you end up manually
typing prefixes. You could use tools like <a href = "http://leaverou.github.io/prefixfree/"
target = "_blank">prefix-free</a>, but you will
ultimately save more time by using a preprocessor with mixins.</p>
<p>Some tools I recommend for compiling SASS:</p>
<ul>
<li><a href = "http://www.jetbrains.com/phpstorm/" target = "_blank">PHPStorm</a></li>
<li><a href = "http://alphapixels.com/prepros/" target = "_blank">Prepros (best for Windows)</a></li>
<li><a href = "http://incident57.com/codekit/" target = "_blank">CodeKit (Mac)</a></li>
<li><a href = "http://mhs.github.io/scout-app/" target = "_blank">Scout</a></li>
<li><a href = "http://sass-lang.com/try.html" target = "_blank">Official SASS Online Compiler</a>
</li>
<li><a href = "http://phpsass.com/" target="_blank">Online PHP SASS Compiler</a></li>
</ul>
</div>
</section>
<section class = "question">
<h3 class = "btn">This "framework" uses <em>some</em> markup elements from Bootstrap. Is it
<strong>Bootstrap-compatible</strong>?</h3>
<div class = "answer">
<p>
<strong>No.</strong> SASS-Boilerplate is built with simplicity in mind. Bootstrap is not simple.
Compare the following:</p>
<div class = "row">
<div class = "sixcol">
<header class = "centred">
<h4>Bootstrap
<small>navigation</small>
</h4>
</header>
<pre class = "language-markup">
<code><div class="navbar"><br/> <div class="navbar-inner"><br/>
<div class="container" style="width: auto;"><br/> <a
class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><br/>
<span class="icon-bar"></span><br/> <span class="icon-bar"></span><br/>
<span class="icon-bar"></span><br/> </a><br/> <a
class="brand" href="#">Project name</a><br/> <div
class="nav-collapse"><br/> <ul class="nav"><br/> <li
class="active"><a
href="#">Home</a></li><br/> <li><a href="#">Link</a></li><br/>
<li><a href="#">Link</a></li><br/> <li><a
href="#">Link</a></li><br/> <li class="dropdown"><br/>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
<b class="caret"></b></a><br/> <ul class="dropdown-menu"><br/>
<li><a href="#">Action</a></li><br/> <li><a
href="#">Another action</a></li><br/> <li><a href="#">Something
else here</a></li><br/> <li
class="divider"></li><br/> <li class="nav-header">Nav
header</li><br/> <li><a href="#">Separated link</a></li><br/>
<li><a href="#">One more separated
link</a></li><br/> </ul><br/> </li><br/> </ul><br/>
<form class="navbar-search pull-left" action=""><br/> <input
type="text" class="search-query span2" placeholder="Search"><br/>
</form><br/> <ul class="nav pull-right"><br/> <li><a
href="#">Link</a></li><br/> <li class="divider-vertical"></li><br/>
<li class="dropdown"><br/> <a href="#" class="dropdown-toggle"
data-toggle="dropdown">Dropdown <b class="caret"></b></a><br/>
<ul class="dropdown-menu"><br/> <li><a href="#">Action</a></li><br/>
<li><a href="#">Another action</a></li><br/> <li><a
href="#">Something else here</a></li><br/> <li class="divider"></li><br/>
<li><a href="#">Separated link</a></li><br/> </ul><br/>
</li><br/> </ul><br/> </div><!-- /.nav-collapse --><br/>
</div><br/> </div><!-- /navbar-inner --><br/></div></code>
</pre>
</div>
<div class = "sixcol">
<header class = "centred">
<h4>Or This
<small>SASS-Boilerplate Markup</small>
:
</h4>
</header>
<pre class = "language-markup"><code><nav role = "main"><br/> <ul class = "nav"><br/>
<li><a href = "#">Home <i class = "icon-home"></i></a></li><br/>
<li><a href = "#features">Features <i class = "icon-book-2"></i></a></li><br/>
<li><a href = "#installation">Installation <i class = "icon-database"></i></a></li><br/>
<li><a href = "#basic-usage">Basic Usage <i class = "icon-book-3"></i></a></li><br/>
<li><a href = "#faq">FAQ <i class = "icon-puzzle"></i></a></li><br/>
<li><a href = "#contact">Contact <i class = "icon-mail"></i></a></li><br/>
</ul><br/></nav></code></pre>
</div>
</div>
<p>It's pretty clear that Bootstrap contains much unneeded markup code. Why do we need to have the
<code>dropdown</code> class on all the items? Why not just use a bare HTML starting point like in
the example above? Also note that the Bootstrap example lacks ARIA roles.</p>
</div>
</section>
<section class = "question">
<h3 class = "btn">So Andy Taylor says that the 1140 grid system is retired... so why are you using it here
?</h3>
<div class = "answer">
<p>The reason I chose to include the 1140 grid system as my basis is that it was
what I found most intuitive as I was learning grid systems. Also, I didn't <em>use</em> the
grid system; rather, I built on top of it a base for <strong>generating</strong> new, improved
grid systems. Rather than working off <strong>one media query</strong>, users are encouraged
to use multiple media queries, eliminating the "one-size fits all" mentality. On the other
hand, having one media query does simplify things a little bit...</p>
</div>
</section>
</section>
</article>
</div>
<script src = "bower_components/jquery/dist/jquery.min.js"></script>
<script src = "scripts/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<!-- <script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script> -->
</body>
</html>