-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhtml5-frameworks.html
162 lines (152 loc) · 11.3 KB
/
html5-frameworks.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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Twitter Bootstrap and Zurb Foundation Compared: HTML5 and CSS for Rails Developers</title>
<link href="https://plus.google.com/u/0/b/117374718581973393536/117374718581973393536/posts/" rel="publisher" />
<link rel="stylesheet" href="/css/bootstrap.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="/css/screen.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="/css/gollum.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="/css/site.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="/css/syntax.css" type="text/css" charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.6.min.js" type="text/javascript"></script>
<script src="/javascript/jquery.text_selection-1.0.0.min.js" type="text/javascript"></script>
<script src="/javascript/jquery.previewable_comment_form.js" type="text/javascript"></script>
<script src="/javascript/jquery.tabs.js" type="text/javascript"></script>
<script src="/javascript/gollum.js" type="text/javascript"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-5109366-14']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a href="/" class="brand">RailsApps Project</a>
<ul class="pull-right nav">
<li><a href="http://blog.railsapps.org/" class="twitter">Blog</a></li>
<li><a href="http://twitter.com/rails_apps" class="twitter">Twitter</a></li>
<li><a href="https://plus.google.com/117374718581973393536" class="google">Google +</a></li>
<li><a href="https://github.com/RailsApps" class="github">GitHub Repository</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="page-header">
<h1>Twitter Bootstrap and Zurb Foundation Compared: HTML5 and CSS for Rails Developers</h1>
</div>
<div class="content wikistyle gollum textile">
<h1>Twitter Bootstrap and Zurb Foundation Compared: HTML5 and <span class="caps">CSS</span> for Rails Developers</h1>
<h4>by Daniel Kehoe</h4>
<p><em>Last updated 16 December 2011</em></p>
<h4>This is an unfinished article! Just notes for a work in progress.</h4>
<p>Here you’ll find a comparison of features of HTML5 front-end frameworks and CSS3 toolkits that are often used by Rails developers. The aim of the article is to compare popular frameworks and toolkits including HTML5 Boilerplate, Twitter Bootstrap, Zurb Foundation, and offer guidance in choosing the frameworks.</p>
<h2>HTML5 Frameworks Compared</h2>
<p>Developers who work on the “backend” (the server-side programs) of database-driven websites use web application programming frameworks such as Ruby on Rails, Django for Python, or various frameworks for <span class="caps">PHP</span> and Java. A web application framework provides a structure and conventions for responding to requests from web browsers including interacting with a database and generating pages from templates. “Front-end” developers create the templates that implement graphic design as <span class="caps">HTML</span> markup and <span class="caps">CSS</span> styles, including navigation menus, functionality such as modal dialogs and sliders, and any other interactive elements developed within the web browser. Just as there are web application frameworks for programming languages on the server backend, there are front-end development frameworks that provide structure and conventions for using HTML5, CSS3 and Javascript in the web browser. Unlike web app frameworks such as Rails which have become well-established and essential to web application development, many front-end development frameworks are new and not yet well known.</p>
<p>You may see these frameworks referred to as <span class="caps">CSS</span> toolkits or libraries, grid systems, boilerplates, or default templates. I call these projects “front-end frameworks” because they are used by the front-end developers who use <span class="caps">HTML</span>, <span class="caps">CSS</span>, and Javascript and are concerned with design, typography, and cross-browser consistency across devices. Few of the front-end frameworks offer the same set of features; each focuses on different needs and several overlap in usefulness. This article compares features and offers recommendations.</p>
<h2>HTML5 Boilerplate</h2>
<p><a href="http://html5boilerplate.com/">HTML5 Boilerplate</a> has been available since August 10th, 2010. <a href="http://paulirish.com/about/">Paul Irish</a> and Divya Manian launched HTML5 Boilerplate as a set of templates for web developers “collecting best practices and making an ideal project starting point.” My <a href="http://railsapps.github.com/rails-html5-boilerplate.html">Guide to HTML5 Boilerplate for Rails Developers</a> describes each component of HTML5 Boilerplate and identifies its usefulness for Rails applications.</p>
<h2>
<span class="caps">SCSS</span>, <span class="caps">SASS</span>, or Less</h2>
<p>(Discussion welcome. Notes to come.)</p>
<h2>Comparing <span class="caps">CSS</span> Toolkits</h2>
<p>Twitter Bootstrap and Zurb Foundation are popular <span class="caps">CSS</span> toolkits. The primary difference is that Bootstrap is built around a fixed grid, while Foundation is built on a responsive grid that accommodates devices with a variety of screen sizes.</p>
<h4>Resets</h4>
<p>Bootstrap uses an adapted version of Eric Meyer’s <span class="caps">CSS</span> reset file that cuts out some <span class="caps">HTML</span> elements that are not used often (see the reset.less file).</p>
<p>Foundation includes Eric Meyer’s <span class="caps">CSS</span> reset file (see the globals.css file).</p>
<p>For a history and comparison of <span class="caps">CSS</span> resets, see a <a href="http://sixrevisions.com/css/the-history-of-css-resets/">series of articles by Michael Tuck</a>".</p>
<h4>Variables</h4>
<p>Bootstrap uses Less to set variables to customize the look and feel of Bootstrap (see the variables.less file).</p>
<p>Foundation is pure css and doesn’t natively offer support for variables.</p>
<h4>Mixins (reusable snippets)</h4>
<p>Bootstrap uses Less to provide snippets of reusable <span class="caps">CSS</span> for frequently-used techniques such as “clearfix” (see the mixins.less file).</p>
<p>Foundation offers a very limited set of commonly used <span class="caps">CSS</span> snippets: left, right, hide, and highlight (see the globals.css file).</p>
<h4>Grid (structure or scaffolding)</h4>
<p>Bootstrap uses Less to provide styles for a grid system for page structure and layout (see the scaffolding.less file).</p>
<p>Foundation provides a grid system that adapts to mobile device with small screens.</p>
<h4>HTML5 Semantic Markup</h4>
<p>Neither Bootstrap or Foundation includes styles or a default layout showing use of HTML5 semantic markup tags (article, section, aside, nav, footer).</p>
<h4>Design Elements</h4>
<p>Bootstrap provides styles for common design elements (design patterns) including:</p>
<ul>
<li>topbar</li>
<li>dropdown menu</li>
<li>tabs</li>
<li>pills</li>
<li>breadcrumb navigation</li>
<li>hero unit</li>
<li>footer</li>
<li>buttons</li>
<li>alert message</li>
<li>pagination</li>
<li>modal boxes</li>
<li>popover</li>
<li>label</li>
<li>media grid</li>
</ul><p>(See the patterns.less file).</p>
<h4>Forms</h4>
<p>Bootstrap uses Less to style forms (see the forms.less file).</p>
<p>Foundation provides styles for forms (see the forms.css file).</p>
<h4>Tables</h4>
<p>Bootstrap uses Less to style tables (see the tables.less file).</p>
<p>Foundation provides styles for tables (see the globals.css file).</p>
<h4>Lists</h4>
<p>Bootstrap provides styles for lists (see the type.less file).</p>
<p>Foundation provides styles for lists (see the globals.css file).</p>
<h4>Links</h4>
<p>Bootstrap uses Less to style links (see the patterns.less, scaffolding.less, and variables.less files).</p>
<p>Foundation provides styles for links (see the globals.css file).</p>
<h4>Typography</h4>
<p>Bootstrap uses Less to style typography for common elements such as headings, body text, lists, and code (see the type.less file).</p>
<p>Foundation provides styles for typography for headings, body text, etc. (see the globals.css file).</p>
<h4>Print styles</h4>
<p>Bootstrap has no styles for printing (@media print).</p>
<p>Foundation provides styles for printing (@media print) derived from Paul Irish’s HTML5 Boilerplate.</p>
<h4>Small screens</h4>
<p>The current version of Bootstrap (V1.4.0 released November 3, 2011) does not provide responsive layouts for mobile devices. A responsive stylesheet is planned for a future 2.0 version.</p>
<p>The Foundation grid system responds to mobile device with small screens.</p>
</div><!-- class="content" -->
<div class="comments">
<div class="content wikistyle gollum">
<h2>Comments</h2>
</div>
<p>Is this helpful? Please "like" below. Question or suggestion? Please add a comment below. Got a correction or addition? You can edit this page <a href="https://github.com/RailsApps/railsapps.github.com/wiki/_pages">on the wiki</a> or create a <a href="https://github.com/RailsApps/railsapps.github.com/issues">GitHub issue</a> to alert me.</p>
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'railsapps'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div><!-- class="comments" -->
<div class="footer row">
<div class="span4">
<h3>Credits</h3>
<p><a href="http://danielkehoe.com/">Daniel Kehoe</a> initiated the <a href="http://railsapps.github.com/">RailsApps Project</a>. Thanks to <a href="http://tigrish.com/">Christopher Dell</a> for design contributions.</p>
</div>
<div class="span4">
<h3>Contributions</h3>
<p>Corrections? Additions? You can edit this page <a href="https://github.com/RailsApps/railsapps.github.com/wiki/_pages">on the wiki</a>.</p>
</div>
<div class="span4">
<h3>Last edit</h3>
<p>by <b>Daniel Kehoe</b>, 2012-05-19 20:21:06</p>
</div>
</div>
</div>
</body>
</html>