all repos — h3rald @ b3442cd80d633f1412303de98a8301e8b8fd86c0

The sources of https://h3rald.com

contents/articles/h3rald-83.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
-----
title: "H3RALD.com v8.3 Released"
content-type: article
subtitle: "A new minimalist design, powered by Twitter Bootstrap"
timestamp: 1356648094
tags: "website|webdevelopment"
-----

<section class="section">
	<p>One of the many things that really bothered me about my web site was the fact that it didn't look good on
		my iPhone, or any small screen for that matter.</p>
	<p>Years ago I <a href="http://www.alistapart.com/articles/responsive-web-design/">read about</a> responsive web
		design, media queries, etc., but I never had the will or the time to dive into the subject. Then <a
			href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a> came out, and it changed
		<em>everything</em>.
	</p>
	<p>Not only Bootstrap provides a very solid <span class="caps">HTML</span> boilerplate and grid system, it also
		comes with some very nice and complete styles for every <span class="caps">HTML</span> element, a few
		Javascript-enhanced UI components, and best of all it is fully responsive.</p>

	<section class="section">
		<header>
			<h1 id="h_1" class="toc">Getting to know Bootstrap & its CSS wizardry</h1>
		</header>
		<p>Redesigning H3RALD.com using Twitter Bootstrap turned out to be fairly easy. I headed up to the <a
				href="http://twitter.github.com/bootstrap/customize.html">Customize and Download</a> page and set a few
			variables like the font to use (the beautiful <a href="http://aldusleaf.org/crimson.php">Crimson text</a>),
			the link color and so on, and downloaded the lot.</p>
		<p>I more or less completely forgot about my old <span class="caps">CSS</span> stylesheets and went with
			Bootstrap all the way. I was happy with a lot of the defaults, but I had to add a few rules and overrides
			for:</p>
		<ul>
			<li>headings</li>
			<li>line heights</li>
			<li>A few custom classes I use extensively, like add a <code>text-align: justify;</code> for the
				<code>hyphenate</code> class.
			</li>
		</ul>
		<p>Now, one of the cool things of Bootstrap is that it comes with smart defaults, and that it lets you add
			specific features to elements simply by adding a <span class="caps">CSS</span> class to them. Take a look at
			how <a href="http://twitter.github.com/bootstrap/base-css.html#buttons">buttons</a> are constructed, for
			instance. Normal button? Sure:</p>
		<table>
			<tr>
				<td>
					<div class="code">
						<pre>
<code>
&lt;button class="btn"&gt;Click Me!&lt;/button&gt;
</code>
</pre>
					</div>
					<p>
				</td>
				<td><button class="btn">Click Me!</button></td>
				</p>
			</tr>
		</table>
		<p>That's grey with black text. Boring. Want it red? Sure, add the <code>.btn-danger</code> class:</p>
		<table>
			<tr>
				<td>
					<div class="code">
						<pre>
<code>
&lt;button class="btn btn-danger"&gt;Click Me!&lt;/button&gt;
</code>
</pre>
					</div>
					<p>
				</td>
				<td><button class="btn btn-danger">Click Me!</button></td>
				</p>
			</tr>
		</table>
		<p>Too big? No problem, make it smaller with <code>.btn-sm</code>, so we have:</p>
		<table>
			<tr>
				<td>
					<div class="code">
						<pre>
<code>
&lt;button class="btn btn-danger btn-small"&gt;Click Me!&lt;/button&gt;
</code>
</pre>
					</div>
					<p>
				</td>
				<td><button class="btn btn-danger btn-small">Click Me!</button></td>
				</p>
			</tr>
		</table>
		<p>Wouldn't it be nice to have a nice icon in it? Add an empty <code>&lt;i&gt;</code> element with a
			suitable class and there you have a nice <a
				href="http://twitter.github.com/bootstrap/base-css.html#icons">Glyphicon</a> before the button text (or
			you can use other icon fonts, like <a href="http://fontawesome.io/">FontAwesome</a>).</p>
		<table>
			<tr>
				<td>
					<div class="code">
						<pre>
<code>
&lt;button class="btn btn-danger btn-sm"&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt; Click Me!&lt;/button&gt;
</code>
</pre>
					</div>
					<p>
				</td>
				<td><button class="btn btn-danger btn-sm"><i class="fa fa-check"></i> Click Me!</button></td>
				</p>
			</tr>
		</table>
		<p>&#8230;You get the picture. And it works surprisingly well &#8212; if you embrace its philosophy, that is.
			Just like Rails &amp; Co.: an <em>opinionated</em> framework.</p>
		<p>The only thing that bugged me about all this was that by adding smart <span class="caps">CSS</span> classes
			to elements you're actually specifying how something looks like by polluting <span class="caps">HTML</span>
			code. Granted, if your stylesheet doesn't include a
			<code>.btn-inverse</code> your buttons won't automagically become black, but you know what I mean.
			Although in a very nice way, by following Bootstrap's way of doing things you are no longer separating
			content from presentation. And in the next six months, when I'll ditch Bootstrap for something better,
			all the previews of the code snippets above won't work unless I keep using the Bootstrap stylesheet or
			at least some of its button classes.
		</p>
		<p>The real problems arise for the stylesheets provided for general elements. By default, Bootstrap styles
			tables with no borders or colors. What if I wanted just ordinary tables to be striped and bordered? Sure, I
			can add the <code>.table-striped</code> and <code>.table-bordered</code> classes to all tables, and
			that's it. In <span class="caps">EVERY</span> table. Or of course undo bootstrap's magic by
			overriding the <span class="caps">CSS</span> rules for ordinary tables, to include the rules specified for
			<code>.table-striped</code> and <code>.table-bordered</code>. Copy &amp; paste someone else's code?
			Not nice.
		</p>
		<p>Luckily, using <a href="http://sass-lang.com/"><span class="caps">SASS</span></a> finally paid off, and
			here's how to do it in a nice and tidy way:</p>

		<div class="code">
			<pre>
<code>
@import "_bootstrap.scss"; 
/* The bootstrap stylesheet - just changed its extension and prepended an underscore, nothing more */

table {
  @extend .table;
  @extend .table-striped;
  @extend .table-bordered;
}
</code>
</pre>
		</div>
		<p>There you go. All tables (ordinary <code>&lt;table&gt;</code> elements with no silly classes attached) are
			now bordered and striped.</p>

	</section>


	<section class="section">
		<header>
			<h1 id="h_2" class="toc">Header & navigation bar</h1>
		</header>
		<p>As far as the main site header goes, I decided to use the same one for all pages, containing:</p>
		<ul>
			<li>The site logo</li>
			<li>The search input box (powered by <a href="http://www.google.com/cse/">Google Custom Search Engine</a>
			</li>
			<li>A <em>responsive</em> navigation bar with links to all the main sections of the site</li>
		</ul>
		<p>As far as the navigation bar goes, that's pure Bootstrap goodness, nothing new there (except the serif
			font), <a href="http://twitter.github.com/bootstrap/components.html#navbar">look it up</a>.</p>
		<p>For the logo&#8230; Well, I had this nice plan of using just plain <span class="caps">CSS</span> and web
			fonts to make it (hell, it's basically the word &#8220;H3RALD&#8221;, with the 3 slightly bigger and
			moved a bit). It worked mostly fine (in webkit browser and in Opera), but Firefox didn't like it much,
			and IE&#8230; well, some old versions of IE don't play nice with web fonts, so I decided to make a
			nice <span class="caps">PNG</span> image and stick it there instead. Less hassle, it works everywhere, job
			done.</p>
		<p>The search input box was a bit more of a challenge. I read up on the new <a
				href="https://developers.google.com/custom-search/docs/element">Custom Search Element Control <span
					class="caps">API</span></a>, discovered that Google decided that web designers don't know
			Javascript or <span class="caps">CSS</span> nowadays and proposed a new <span class="caps">API</span> that
			has numerous advantages like:</p>
		<blockquote>
			<ul>
				<li>Easy to use syntax—no JavaScript knowledge required.</li>
				<li>Custom Search elements (search boxes and results pages) are rendered based on settings stored on the
					<span class="caps">CSE</span> servers (along with any client-side customization). Server-side
					changes don't require you to copy and paste any new code into your site<br />
		</blockquote>
		</li>
		</ul>
		<p>Thanks Google. Now every time I change my stylesheet I have to remember to go back to your page and change
			the link colors etc. And if I decide to hide the page <span class="caps">URL</span> underneath the link in
			the results? I can't. And that's why I decided to reverse engineer their <span class="caps">CSS</span> and
			provide my overrides. Nasty, but at least I have some control! They're
			all <a href="https://github.com/h3rald/h3rald/blob/master/content/styles/_vendor.scss">here</a>, if you are
			curious.</p>

	</section>

	<section class="section">
		<header>
			<h1 id="h_3" class="toc">Other minor changes & tweaks</h1>
		</header>
		<p>Other changes from the previous design were relatively minimal:</p>
		<ul>
			<li>No more newspaper-style home page with five columns, two will suffice.</li>
			<li>A brand new Tags page, listing&#8230; well, all the site tags that were previously in the Archives pages
				(now only listing articles by month of publication)</li>
			<li>No more Links page. No need for it.</li>
			<li>A new, minimalist Contact page, featuring some of the nice <a
					href="http://zocial.smcllns.com/">Zocial</a> font icons.</li>
			<li>No more social buttons on pages. If you use social networks like Twitter, Facebook or Google+ you
				already know how to share items using bookmarklets or browser extensions. No need to plague my web site
				with their nasty buttons, badges, ribbons &amp; alike.</li>
			<li>No ads! I have a full-time job, my site uses free and open source technologies, and I write because I
				like to do so, not to make money. And I can afford the few bucks necessary to pay the hosting provider.
				That's why there are NO <span class="caps">ADS</span> on H3RALD.com anymore <sup>(*)</sup>.</li>
		</ul>
		<p><sup>(*)</sup>: For now, that is. Then I'll probably change my mind, but until then enjoy the true
			no-ads experience!</p>

	</section>

</section>