-
Notifications
You must be signed in to change notification settings - Fork 0
/
atom.xml
119 lines (102 loc) · 6.74 KB
/
atom.xml
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
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[CodeCrusade]]></title>
<link href="http://codecrusade.github.io/atom.xml" rel="self"/>
<link href="http://codecrusade.github.io/"/>
<updated>2015-09-23T20:07:47-05:00</updated>
<id>http://codecrusade.github.io/</id>
<author>
<name><![CDATA[Richard Kent Jordan]]></name>
</author>
<generator uri="http://octopress.org/">Octopress</generator>
<entry>
<title type="html"><![CDATA[Stop Using Bootstrap]]></title>
<link href="http://codecrusade.github.io/blog/2015/09/02/stop-using-bootstrap/"/>
<updated>2015-09-02T13:41:22-05:00</updated>
<id>http://codecrusade.github.io/blog/2015/09/02/stop-using-bootstrap</id>
<content type="html"><![CDATA[<p>TLDR: Let SCSS DRY up your markup and keep your styles where they
belong, in your css</p>
<p>You love Bootstrap. I love Bootstrap. It’s fantasic for getting a
site out the door quickly with some nice styling. BUT….
How often have you seen this uglyness?</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">></span>
</span><span class='line'> Lorem Ipsum
</span><span class='line'> <span class="nt"></div></span>
</span><span class='line'> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-2"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><ul></span>
</span><span class='line'> <span class="nt"><li></span>Morem Ipsum<span class="nt"></li></span>
</span><span class='line'> <span class="nt"></ul></span>
</span><span class='line'> <span class="nt"></div></span>
</span><span class='line'> <span class="nt"></div></span>
</span><span class='line'><span class="nt"></div></span>
</span></code></pre></td></tr></table></div></figure>
<p>This is nearly as bad as all the style= tags from a few years back. You
are explicitly tying your stying to your markup and making a hard to
maintain mess. Now when you need to change to your new design fresh from
your new marketing team, you have a million html files that need to be
updated to the new style. This is a serious violation of the
<a href="https://en.wikipedia.org/wiki/Single_responsibility_principle">Single Responsibility Principle</a></p>
<p>So, how can we DRY this up and make our design more flexible and more
accepting of change. Easy, it’s built in. SCSS and LESS both support syntax
for inheriting properties. Lets see what this would look like with a bit of
SCSS help.</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='scss'><span class='line'><span class="nc">.content</span> <span class="p">{</span>
</span><span class='line'> <span class="k">@extend</span> <span class="nt">col-sm-10</span><span class="o">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'><span class="nc">.sidebar</span> <span class="p">{</span>
</span><span class='line'> <span class="k">@extend</span> <span class="nt">col-sm-2</span><span class="o">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">></span>
</span><span class='line'> Lorem Ipsum
</span><span class='line'> <span class="nt"></div></span>
</span><span class='line'> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"sidebar"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><ul></span>
</span><span class='line'> <span class="nt"><li></span>Morem Ipsum<span class="nt"></li></span>
</span><span class='line'> <span class="nt"></ul></span>
</span><span class='line'> <span class="nt"></div></span>
</span><span class='line'> <span class="nt"></div></span>
</span><span class='line'><span class="nt"></div></span>
</span></code></pre></td></tr></table></div></figure>
<p>There is no need to override Bootstrap where their classes make
sense in your code (for example row), but now you have contextual
anchors in your markup that mean something to your applicaton
and when the time comes for change, you only have to change the scss
directives making changes and upgrades much easier.</p>
]]></content>
</entry>
</feed>