/
index.html
executable file
·171 lines (141 loc) · 14.9 KB
/
index.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
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Content and Display Patterns with Expressive CSS</title>
<meta name="description" content="How to implement Content and Display Patterns using Expressive CSS, an approach to writing lightweight, scalable CSS using utility classes that are easy to write and understand.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,700,400italic,200,200italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="./css/style.min.css">
<link rel="shortcut icon" href="favicon.ico">
</head>
<body class="bgr-grey-lt">
<div class="box-1100 box-center group pad-3 s-pad-2">
<section class="marg-1-left grid-12 pad-3-left rel">
<a class="border-0" href="https://twitter.com/johnpolacek"><img src="img/johnpolacek.jpg" alt="John Polacek" width="36" height="36" class="box-circle marg-1-right abs pos-top pos-left"></a>
<div class="text-small pad-2-left pad-1-top">
<p class="text-smaller">
<span><a class="border-0" href="http://johnpolacek.com">John Polacek</a></span>
<span class="text-grey border-left marg-1-sides"></span>
<span><a class="border-0" href="https://twitter.com/johnpolacek">@johnpolacek</a></span>
<span class="text-grey border-left marg-1-sides"></span>
<span><a class="border-0" href="http://johnpolacek.com">johnpolacek.com</a></span>
</p>
</div>
</section>
<section class="grid-12 pad-2-top s-pad-0">
<div class="grid-12 pad-2-bottom border-bottom marg-3-bottom">
<h1 class="text-green-dk text-light">Content & Display Patterns with Expressive CSS</h1>
</div>
<div class="grid-3 s-grid-12 pad-2-top s-pad-1-top">
<figure>
<a href="http://danielmall.com/articles/content-display-patterns/">
<img class="wide" src="img/events.jpg" alt="Example events page layout from the Content Display Patterns article">
</a>
<figcaption class="pad-1-top text-small-2 text-grey italic">Events Page layout design<br/> from <a href="http://danielmall.com/articles/content-display-patterns/">Content & Display Patterns</a> by Daniel Mall</figcaption>
</figure>
</div>
<div class="grid-9 s-grid-12 pad-3 s-pad-0-sides s-pad-3-top s-pad-0-bottom">
<p>Dan Mall’s <a href="http://danielmall.com/articles/content-display-patterns/" target="_blank">Content & Display Patterns article</a> talks about the importance of decoupling content and design.</p>
<p>Content patterns are established first, independently from the design. Next, designers create display patterns with various pieces of content. Last, it is up to the developers to “create the hooks for content patterns to flow into the display patterns appropriately”.</p>
<p>CSS is entirely concerned with display, yet in the pursuit of being “semantic” we often permeate our stylesheets with content references.</p>
<div class="bgr-white border pad-2-top pad-2-sides marg-2-bottom">
<pre><code><div class=<strong class="text-purple">"event"</strong>>
<h1 class=<strong class="text-purple">"event__title"</strong>>Star Wars: The Force Awakens Premiere</h1>
<p class=<strong class="text-purple">"event__date"</strong>>Dec 20, 2015</p>
<p class=<strong class="text-purple">"event__location"</strong>>Ritz East, Philadelphia PA</p>
</div></code></pre>
</div>
<p>Developers understand the importance of modular design systems. Instead of creating CSS around content patterns, we could instead craft our CSS based upon display patterns.</p>
<p><a href="http://johnpolacek.github.io/expressive-css/">Expressive CSS</a> is an approach to writing lightweight, scalable CSS using utility classes that are easy to write and understand.</p>
<div class="bgr-white border pad-2-top pad-2-sides marg-2-bottom">
<pre><code><div class="abs pos-bottom pos-left text-white pad-2">
<h2 class="text-reg pad-2-top">My Great Event</h2>
<span class="bold">February 17-20</span></code></pre>
</div>
<p>Many front end developers have a strong negative reaction when they see markup like the above.</p>
<blockquote class="border bgr-white pad-2 marg-2-top italic">
<p>For individuals weaned on an ideology where “semantic HTML” means using content-derived class names (and even then, only as a last resort), it usually requires you to work on a large application before you can become acutely aware of the impractical nature of that approach. You have to be prepared to disgard old ideas, look at alternatives, and even revisit ways that you may have previously dismissed.</p>
<cite class="text-small italic bold pad-1-bottom block">From <a href="http://nicolasgallagher.com/about-html-semantics-front-end-architecture/">About HTML Semantics and Front-End Architecture</a> by Necolas Gallagher</cite>
</blockquote>
<ul class="pad-2-vert">
<li><a href="https://blog.colepeters.com/building-and-shipping-functional-css/">Building and shipping functional CSS</a></li>
<li><a href="http://seesparkbox.com/foundry/naming_css_stuff_is_really_hard">Naming CSS Stuff Is Really Hard</a></li>
<li><a href="http://tympanus.net/codrops/2013/01/22/defending-presentational-class-names/">Defending Presentational Class Names</a></li>
<li><a href="http://www.impressivewebs.com/avoid-nonsemantic-classes/">Why Avoid Non-semantic Classes? Because They’re Non-semantic!</a></li>
<li><a href="http://www.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/">Challenging CSS Best Practices</a></li>
<li><a href="http://nicolasgallagher.com/about-html-semantics-front-end-architecture/">About HTML Semantics and Front-End Architecture</a></li>
<li><a href="http://csswizardry.com/2015/06/contextual-styling-ui-components-nesting-and-implementation-detail/">Contextual Styling: UI Components, Nesting, and Implementation Detail</a></li>
<li><a href="http://www.sitepoint.com/using-helper-classes-dry-scale-css/">Using Helper Classes to DRY and Scale CSS</a></li>
</ul>
<p>In the examples below, I demonstrate how one can use the Expressive CSS approach to build a layout like the <a href="http://danielmall.com/articles/content-display-patterns/oreilly-comp2.png">one featured in Dan’s article</a>.</p>
<p>The benefits of building the layout in this way were:</p>
<ul>
<li>Maintained separation of content and display by keeping content references out of the CSS.</li>
<li>Able to quickly build the layout without hardly needing to actually write any new lines of CSS.</li>
<li>Simple to create a responsive version even though no phone or tablet layout were provided because responsive utility classes make it easy to experiment.</li>
</ul>
<p>For more information on the principles and benefits of using this approach, check out the <a href="http://johnpolacek.github.io/expressive-css/">Expressive CSS Project Page</a>.</p>
</div>
</section>
<section class="grid-12 pad-3-vert">
<h3 class="text-blue-dk pad-2-bottom">Basic Demo</h3>
<iframe class="marg-3-bottom" height='900' scrolling='no' src='//codepen.io/johnpolacek/embed/eJoErV/?height=900&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/johnpolacek/pen/eJoErV/'>Content Display Patterns with Expressive CSS Basic Example</a> by John Polacek (<a href='http://codepen.io/johnpolacek'>@johnpolacek</a>) on <a href='http://codepen.io'>CodePen</a>.</iframe>
<p>To build this example, I wrote markup then simply added CSS utility classes that are part of the default <a href="http://johnpolacek.github.io/expressive-css/styleguide/">Expressive CSS Styleguide</a>. I was nearly able to achieve the layout <em class="bold">without writing any new CSS</em>.</p>
<p>There were only two instances when it was necessary to add new styles. I added a <code>.box-gradient-overlay</code> so the white text on the main image would be readable, and a thick border left class for the colored line on the category kicker.</p>
<p>Portability is one of the main benefits of the Expressive CSS approach. Scalability is another. As a website, project or application grows, it is important to keep stylesheets small and maintainable.</p>
<p class="marg-2-top"><a href="http://codepen.io/johnpolacek/pen/eJoErV" target="_blank">View on Codepen</a></p>
<p><a href="https://github.com/johnpolacek/expressive-css-content-display-patterns" target="_blank">View on Github</a></p>
</section>
<section class="grid-12 pad-3-vert">
<h3 class="text-blue-dk pad-2-bottom">Responsive Demo</h3>
<iframe class="marg-3-bottom" height='900' scrolling='no' src='//codepen.io/johnpolacek/embed/PZgOZe/?height=900&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/johnpolacek/pen/PZgOZe/'>Content Display Patterns with Expressive CSS Responsive Example</a> by John Polacek (<a href='http://codepen.io/johnpolacek'>@johnpolacek</a>) on <a href='http://codepen.io'>CodePen</a>.</iframe>
<p>The article only had an example for the desktop layout, but with <a href="http://johnpolacek.github.io/simple-grid/">Simple Grid</a> and our responsive utility classes, it was quick and easy to adjust the layout for different screen sizes. <span class="s-hidden">(Adjust your browser window width to see the responsive layout adjustments)</span></p>
<div class="bgr-white border pad-2 marg-2-bottom">
<pre><code><span class="text-grey">// Before</span>
<div class="grid-6 border-right marg-2-bottom">
<span class="text-grey">// After</span>
<div class="grid-12 l-grid-6 l-border-right m-border-bottom s-border-bottom marg-2-bottom">
</code></pre>
</div>
<p>When flowing in real content across different screen sizes, various layout issues will likely arise. In this case, the heights of the bottom four events vary quite a bit depending on the content. I added a <code>.grid-flex</code> class to the container to make sure the heights were equalized.</p>
<p class="marg-2-top"><a href="http://codepen.io/johnpolacek/pen/PZgOZe" target="_blank">View on Codepen</a></p>
<p><a href="https://github.com/johnpolacek/expressive-css-content-display-patterns" target="_blank">View on Github</a></p>
</section>
<section class="grid-12 pad-3-vert">
<h3 class="text-blue-dk pad-2-bottom">Template Demo</h3>
<p>In the real world, it is likely that you are using templates to render content that comes from a database. In <a href="demo-template.php" target="_blank">this example</a>, I used the <a href="http://twig.sensiolabs.org/">Twig Template Engine</a>. I’ve created some sample data in a JSON file to represent what one might expect to come from the backend to give the templates something to render.</p>
<div class="bgr-white border pad-2 marg-2-bottom">
<pre><code><div class="marg-1-top marg-2-bottom">
<span class="pad-1-sides pad-half-vert bgr-grey-lt border-left-6-blue">
<span class="text-small-2 letter-space-1 uppercase">{{ events[i].category }}</span>
</span>
</div>
<h5 class="text-reg">{{ events[i].title }}</h5>
<p class="bold text-small pad-1-bottom">{{ events[i].dates }}, {{ events[i].location }}</p>
<p class="text-small pad-0">{{ events[i].description }}</p></code></pre>
</div>
<p>Breaking down our display patterns into template partials (components) gives us the opportunity to keep our codebase even more DRY and maintainable. We can change our components at will, without needing to touch any CSS or the underlying content itself.</p>
<p><a href="demo-template.php" target="_blank">View the Template Demo</a></p>
<p><a href="https://github.com/johnpolacek/expressive-css-content-display-patterns/blob/master/templates/events.html" target="_blank">View the Events Template Code</a></p>
</section>
<section class="grid-12 pad-3-vert border-top marg-3-top">
<h4>Related Links</h4>
<ul>
<li><a href="http://danielmall.com/">danielmall.com</a></li>
<li><a href="https://twitter.com/danielmall">@danielmall</a></li>
<li><a href="http://johnpolacek.com/">johnpolacek.com</a></li>
<li><a href="https://twitter.com/johnpolacek">@johnpolacek</a></li>
<li><a href="http://danielmall.com/articles/content-display-patterns/">Content & Display Patterns</a></li>
<li><a href="http://johnpolacek.github.io/expressive-css/">Expressive CSS</a></li>
<li><a href="http://www.fillmurray.com/">fillmurray.com</a></li>
<li><a href="https://www.stevensegallery.com/">stevensegallery.com</a></li>
</ul>
</section>
<div id="disqus_thread"></div>
<script>(function(){var d = document, s = d.createElement('script');s.src = '//johnpolacek.disqus.com/embed.js';s.setAttribute('data-timestamp', +new Date());(d.head || d.body).appendChild(s);})();</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
</div>
</body>
</html>