psique 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (89) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +14 -0
  3. data/Gemfile +5 -0
  4. data/LICENSE +22 -0
  5. data/README.md +2 -0
  6. data/Rakefile +34 -0
  7. data/assets/fonts/psique/roboto-bold.eot +0 -0
  8. data/assets/fonts/psique/roboto-bold.svg +593 -0
  9. data/assets/fonts/psique/roboto-bold.ttf +0 -0
  10. data/assets/fonts/psique/roboto-bold.woff +0 -0
  11. data/assets/fonts/psique/roboto-regular.eot +0 -0
  12. data/assets/fonts/psique/roboto-regular.svg +621 -0
  13. data/assets/fonts/psique/roboto-regular.ttf +0 -0
  14. data/assets/fonts/psique/roboto-regular.woff +0 -0
  15. data/assets/fonts/psique/sourcesanspro-bold.eot +0 -0
  16. data/assets/fonts/psique/sourcesanspro-bold.svg +954 -0
  17. data/assets/fonts/psique/sourcesanspro-bold.ttf +0 -0
  18. data/assets/fonts/psique/sourcesanspro-bold.woff +0 -0
  19. data/assets/fonts/psique/sourcesanspro-regular.eot +0 -0
  20. data/assets/fonts/psique/sourcesanspro-regular.svg +977 -0
  21. data/assets/fonts/psique/sourcesanspro-regular.ttf +0 -0
  22. data/assets/fonts/psique/sourcesanspro-regular.woff +0 -0
  23. data/assets/images/psique/.keep +0 -0
  24. data/assets/javascripts/psique.js.coffee +2 -0
  25. data/assets/javascripts/psique/panels.js.coffee +7 -0
  26. data/assets/stylesheets/psique.scss +19 -0
  27. data/assets/stylesheets/psique/_buttons.scss +222 -0
  28. data/assets/stylesheets/psique/_forms.scss +92 -0
  29. data/assets/stylesheets/psique/_grid.scss +20 -0
  30. data/assets/stylesheets/psique/_lists.scss +160 -0
  31. data/assets/stylesheets/psique/_mixins.scss +69 -0
  32. data/assets/stylesheets/psique/_panels.scss +148 -0
  33. data/assets/stylesheets/psique/_settings.scss +127 -0
  34. data/assets/stylesheets/psique/_summaries.scss +188 -0
  35. data/assets/stylesheets/psique/_typography.scss +70 -0
  36. data/doc/assets/_footer.html +7 -0
  37. data/doc/assets/_header.html +66 -0
  38. data/doc/assets/brick.png +0 -0
  39. data/doc/assets/css/doc.css +132 -0
  40. data/doc/assets/css/github.css +61 -0
  41. data/doc/assets/css/screen.css +16 -0
  42. data/doc/assets/script/components.js +89 -0
  43. data/doc/public/styleguide/brick.png +0 -0
  44. data/doc/public/styleguide/components.html +593 -0
  45. data/doc/public/styleguide/core.html +105 -0
  46. data/doc/public/styleguide/css/doc.css +132 -0
  47. data/doc/public/styleguide/css/github.css +61 -0
  48. data/doc/public/styleguide/css/screen.css +16 -0
  49. data/doc/public/styleguide/index.html +105 -0
  50. data/doc/public/styleguide/script/components.js +89 -0
  51. data/hologram_config.yml +28 -0
  52. data/lib/psique.rb +8 -0
  53. data/lib/psique/engine.rb +17 -0
  54. data/lib/psique/version.rb +3 -0
  55. data/psique.gemspec +33 -0
  56. data/test/dummy/README.rdoc +3 -0
  57. data/test/dummy/Rakefile +6 -0
  58. data/test/dummy/app/assets/images/.keep +0 -0
  59. data/test/dummy/app/assets/javascripts/application.js +2 -0
  60. data/test/dummy/app/assets/stylesheets/application.css.scss +1 -0
  61. data/test/dummy/app/controllers/application_controller.rb +5 -0
  62. data/test/dummy/app/controllers/styleguide_controller.rb +4 -0
  63. data/test/dummy/app/views/layouts/application.html.haml +15 -0
  64. data/test/dummy/app/views/styleguide/index.html.haml +17 -0
  65. data/test/dummy/bin/bundle +3 -0
  66. data/test/dummy/bin/rails +4 -0
  67. data/test/dummy/bin/rake +4 -0
  68. data/test/dummy/config.ru +4 -0
  69. data/test/dummy/config/application.rb +10 -0
  70. data/test/dummy/config/boot.rb +5 -0
  71. data/test/dummy/config/database.yml +25 -0
  72. data/test/dummy/config/environment.rb +5 -0
  73. data/test/dummy/config/environments/development.rb +37 -0
  74. data/test/dummy/config/environments/production.rb +78 -0
  75. data/test/dummy/config/environments/test.rb +39 -0
  76. data/test/dummy/config/initializers/assets.rb +8 -0
  77. data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
  78. data/test/dummy/config/initializers/cookies_serializer.rb +3 -0
  79. data/test/dummy/config/initializers/filter_parameter_logging.rb +4 -0
  80. data/test/dummy/config/initializers/inflections.rb +16 -0
  81. data/test/dummy/config/initializers/mime_types.rb +4 -0
  82. data/test/dummy/config/initializers/session_store.rb +3 -0
  83. data/test/dummy/config/initializers/wrap_parameters.rb +14 -0
  84. data/test/dummy/config/locales/en.yml +23 -0
  85. data/test/dummy/config/routes.rb +3 -0
  86. data/test/dummy/config/secrets.yml +22 -0
  87. data/test/psique_test.rb +7 -0
  88. data/test/test_helper.rb +15 -0
  89. metadata +1185 -0
data/doc/public/styleguide/components.html ADDED
@@ -0,0 +1,593 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>My Style Guide Components</title>
5
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6
+ <link rel="shortcut icon" href="./brick.png" />
7
+
8
+ <!-- Styleguide CSS -->
9
+ <link rel="stylesheet" href="/styleguide/css/doc.css">
10
+ <link rel="stylesheet" href="/styleguide/css/github.css">
11
+ <link rel="stylesheet" href="/styleguide/css/screen.css">
12
+
13
+ <!-- CSS to be documented -->
14
+ <link rel="stylesheet" href="/assets/psique.scss">
15
+
16
+ <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
17
+ <!--[if lt IE 9]>
18
+ <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
19
+ <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
20
+ <![endif]-->
21
+
22
+ <!-- Main libraries -->
23
+ <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
24
+ <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
25
+ <script src="/styleguide/script/components.js"></script>
26
+ <script src="/assets/psique.js"></script>
27
+ </head>
28
+
29
+ <body class="styleguide">
30
+ <header class="header pbn" role="banner">
31
+ <div class="backgroundHighlight typeReversed1">
32
+ <div class="container">
33
+ <h1 class="h2 mvs">My Style Guide</h1>
34
+ </div>
35
+ </div>
36
+ <div class="backgroundLowlight typeReversed1">
37
+ <div class="container">
38
+ <span>
39
+ <ul class="docNav listInline">
40
+
41
+ <li><a href="/styleguide/components.html">Components</a></li>
42
+
43
+ <li><a href="/styleguide/core.html">Core</a></li>
44
+
45
+ </ul>
46
+ </span>
47
+ </div>
48
+ </div>
49
+ <!-- //header/container -->
50
+ </header>
51
+
52
+ <div class="content">
53
+ <section class="container">
54
+ <div class="line">
55
+
56
+ <div class="col cols4">
57
+ <div class="componentMenu box boxBasic backgroundBasic">
58
+ <div class="boxBody pan">
59
+ <ul class="componentList listBorderedHover">
60
+
61
+ <li><a href="#form">Form</a></li>
62
+
63
+ <li><a href="#list">Lists</a></li>
64
+
65
+ <li><a href="#panel">Panels</a></li>
66
+
67
+ <li><a href="#summary">Summaries</a></li>
68
+
69
+ </ul>
70
+ </div>
71
+ </div>
72
+ </div>
73
+
74
+ <div class="main col cols20 lastCol">
75
+ <h1 id="form">Form</h1>
76
+
77
+ <p>Description</p>
78
+ <div class="codeExample"><div class="exampleOutput"><input type='text'>
79
+ <textarea></textarea>
80
+ <h2 class='title-v1'>Lorem ipsum dolor sit amet</h2>
81
+ <select class='wide'>
82
+ <option>lorem</option>
83
+ <option>ipsum</option>
84
+ <option>dolor</option>
85
+ </select>
86
+ <select>
87
+ <option>lorem</option>
88
+ <option>ipsum</option>
89
+ <option>dolor</option>
90
+ <input class='highlight' type='text'>
91
+ </select>
92
+ </input>
93
+ </div><div class="codeBlock"><div class="highlight"><pre> <span class="nt">%input</span><span class="p">{</span><span class="ss">type: </span><span class="s1">'text'</span><span class="p">}</span>
94
+ <span class="nt">%textarea</span>
95
+ <span class="nt">%h2</span><span class="nc">.title-v1</span> Lorem ipsum dolor sit amet
96
+ <span class="nt">%select</span><span class="nc">.wide</span>
97
+ <span class="nt">%option</span> lorem
98
+ <span class="nt">%option</span> ipsum
99
+ <span class="nt">%option</span> dolor
100
+ <span class="nt">%select</span>
101
+ <span class="nt">%option</span> lorem
102
+ <span class="nt">%option</span> ipsum
103
+ <span class="nt">%option</span> dolor
104
+ <span class="nt">%input</span><span class="nc">.highlight</span><span class="p">{</span><span class="ss">type: </span><span class="s1">'text'</span><span class="p">}</span>
105
+ </pre></div></div></div>
106
+ <h1 id="list">Lists</h1>
107
+ <div class="codeExample"><div class="exampleOutput"><aside class='panel'>
108
+ <header class='panel-header border-bottom'>
109
+ Foros
110
+ </header>
111
+ <section class='panel-content'>
112
+ <article class='media'>
113
+ <div class='media-left'>
114
+ <img src='http://www.fillmurray.com/g/75/70/'>
115
+ </div>
116
+ <div class='media-right'>
117
+ <header class='media-header'>
118
+ <h4 class='media-title'>
119
+ <a href='#'>Lorem ipsum dolor sit amet consectetur adipisicing</a>
120
+ <span class='author'>john doe</span>
121
+ </h4>
122
+ </header>
123
+ <section class='media-content'>
124
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
125
+ </section>
126
+ </div>
127
+ </article>
128
+ <article class='media'>
129
+ <div class='media-left'>
130
+ <img src='http://www.fillmurray.com/g/80/75/'>
131
+ </div>
132
+ <div class='media-right'>
133
+ <header class='media-header'>
134
+ <h4 class='media-title'>
135
+ <a href='#'>Lorem ipsum dolor sit amet consectetur adipisicing</a>
136
+ <span class='author'>john doe</span>
137
+ </h4>
138
+ </header>
139
+ <section class='media-content'>
140
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
141
+ </section>
142
+ </div>
143
+ </article>
144
+ </section>
145
+ </aside>
146
+ </div><div class="codeBlock"><div class="highlight"><pre><span class="nt">%aside</span><span class="nc">.panel</span>
147
+ <span class="nt">%header</span><span class="nc">.panel-header.border-bottom</span>
148
+ Foros
149
+ <span class="nt">%section</span><span class="nc">.panel-content</span>
150
+ <span class="nt">%article</span><span class="nc">.media</span>
151
+ <span class="nc">.media-left</span>
152
+ <span class="nt">%img</span><span class="p">{</span><span class="ss">:src</span> <span class="o">=&gt;</span> <span class="s2">"http://www.fillmurray.com/g/75/70/"</span><span class="p">}</span>
153
+ <span class="nc">.media-right</span>
154
+ <span class="nt">%header</span><span class="nc">.media-header</span>
155
+ <span class="nt">%h4</span><span class="nc">.media-title</span>
156
+ <span class="nt">%a</span><span class="p">{</span><span class="ss">href: </span><span class="s1">'#'</span><span class="p">}</span> Lorem ipsum dolor sit amet consectetur adipisicing
157
+ <span class="nt">%span</span><span class="nc">.author</span> john doe
158
+ <span class="nt">%section</span><span class="nc">.media-content</span>
159
+ <span class="nt">%p</span> Lorem ipsum dolor sit amet consectetur adipisicing.
160
+
161
+ <span class="nt">%article</span><span class="nc">.media</span>
162
+ <span class="nc">.media-left</span>
163
+ <span class="nt">%img</span><span class="p">{</span><span class="ss">:src</span> <span class="o">=&gt;</span> <span class="s2">"http://www.fillmurray.com/g/80/75/"</span><span class="p">}</span>
164
+ <span class="nc">.media-right</span>
165
+ <span class="nt">%header</span><span class="nc">.media-header</span>
166
+ <span class="nt">%h4</span><span class="nc">.media-title</span>
167
+ <span class="nt">%a</span><span class="p">{</span><span class="ss">href: </span><span class="s1">'#'</span><span class="p">}</span> Lorem ipsum dolor sit amet consectetur adipisicing
168
+ <span class="nt">%span</span><span class="nc">.author</span> john doe
169
+ <span class="nt">%section</span><span class="nc">.media-content</span>
170
+ <span class="nt">%p</span> Lorem ipsum dolor sit amet consectetur adipisicing.
171
+ </pre></div></div></div><div class="codeExample"><div class="exampleOutput"><aside class='panel'>
172
+ <header class='panel-header border-bottom'>
173
+ Otras secciones
174
+ </header>
175
+ <section class='panel-content'>
176
+ <div class='links-clean'>
177
+ <ul class='left'>
178
+ <li>
179
+ <a>Lorem ipsum</a>
180
+ </li>
181
+ <li>
182
+ <a>Dolor sit amet</a>
183
+ </li>
184
+ <li>
185
+ <a>Consectetur</a>
186
+ </li>
187
+ </ul>
188
+ <ul class='right'>
189
+ <li>
190
+ <a>Lorem ipsum</a>
191
+ </li>
192
+ <li>
193
+ <a>Dolor sit amet</a>
194
+ </li>
195
+ <li>
196
+ <a>Consectetur</a>
197
+ </li>
198
+ </ul>
199
+ </div>
200
+ </section>
201
+ </aside>
202
+ </div><div class="codeBlock"><div class="highlight"><pre><span class="nt">%aside</span><span class="nc">.panel</span>
203
+ <span class="nt">%header</span><span class="nc">.panel-header.border-bottom</span>
204
+ Otras secciones
205
+ <span class="nt">%section</span><span class="nc">.panel-content</span>
206
+ <span class="nc">.links-clean</span>
207
+ <span class="nt">%ul</span><span class="nc">.left</span>
208
+ <span class="nt">%li</span>
209
+ <span class="nt">%a</span> Lorem ipsum
210
+ <span class="nt">%li</span>
211
+ <span class="nt">%a</span> Dolor sit amet
212
+ <span class="nt">%li</span>
213
+ <span class="nt">%a</span> Consectetur
214
+ <span class="nt">%ul</span><span class="nc">.right</span>
215
+ <span class="nt">%li</span>
216
+ <span class="nt">%a</span> Lorem ipsum
217
+ <span class="nt">%li</span>
218
+ <span class="nt">%a</span> Dolor sit amet
219
+ <span class="nt">%li</span>
220
+ <span class="nt">%a</span> Consectetur
221
+ </pre></div></div></div><div class="codeExample"><div class="exampleOutput"><aside class='panel'>
222
+ <header class='panel-header border-bottom'>
223
+ Otras secciones
224
+ </header>
225
+ <section class='panel-content'>
226
+ <div class='links-decorated'>
227
+ <ul class='left'>
228
+ <li>
229
+ <a>Lorem ipsum</a>
230
+ </li>
231
+ <li>
232
+ <a>Dolor sit amet</a>
233
+ </li>
234
+ <li>
235
+ <a>Consectetur</a>
236
+ </li>
237
+ </ul>
238
+ <ul class='right'>
239
+ <li>
240
+ <a>Lorem ipsum</a>
241
+ </li>
242
+ <li>
243
+ <a>Dolor sit amet</a>
244
+ </li>
245
+ <li>
246
+ <a>Consectetur</a>
247
+ </li>
248
+ </ul>
249
+ </div>
250
+ </section>
251
+ </aside>
252
+ </div><div class="codeBlock"><div class="highlight"><pre><span class="nt">%aside</span><span class="nc">.panel</span>
253
+ <span class="nt">%header</span><span class="nc">.panel-header.border-bottom</span>
254
+ Otras secciones
255
+ <span class="nt">%section</span><span class="nc">.panel-content</span>
256
+ <span class="nc">.links-decorated</span>
257
+ <span class="nt">%ul</span><span class="nc">.left</span>
258
+ <span class="nt">%li</span>
259
+ <span class="nt">%a</span> Lorem ipsum
260
+ <span class="nt">%li</span>
261
+ <span class="nt">%a</span> Dolor sit amet
262
+ <span class="nt">%li</span>
263
+ <span class="nt">%a</span> Consectetur
264
+ <span class="nt">%ul</span><span class="nc">.right</span>
265
+ <span class="nt">%li</span>
266
+ <span class="nt">%a</span> Lorem ipsum
267
+ <span class="nt">%li</span>
268
+ <span class="nt">%a</span> Dolor sit amet
269
+ <span class="nt">%li</span>
270
+ <span class="nt">%a</span> Consectetur
271
+ </pre></div></div></div>
272
+ <h1 id="panel">Panels</h1>
273
+
274
+ <p>Example usage of basic panels.</p>
275
+ <div class="codeExample"><div class="exampleOutput"><aside class='panel'>
276
+ <header class='panel-header'>
277
+ Panel title
278
+ </header>
279
+ <section class='panel-content'>
280
+ Panel content
281
+ </section>
282
+ </aside>
283
+ </div><div class="codeBlock"><div class="highlight"><pre><span class="nt">%aside</span><span class="nc">.panel</span>
284
+ <span class="nt">%header</span><span class="nc">.panel-header</span>
285
+ Panel title
286
+ <span class="nt">%section</span><span class="nc">.panel-content</span>
287
+ Panel content
288
+ </pre></div></div></div>
289
+ <p>Panel with header decorations. You can use the classes <code>arrow</code> and <code>border-bottom</code>.</p>
290
+ <div class="codeExample"><div class="exampleOutput"><aside class='panel'>
291
+ <header class='panel-header arrow'>
292
+ Panel title
293
+ </header>
294
+ <section class='panel-content'>
295
+ Panel content
296
+ </section>
297
+ </aside>
298
+ <aside class='panel'>
299
+ <header class='panel-header border-bottom'>
300
+ Panel title
301
+ </header>
302
+ <section class='panel-content'>
303
+ Panel content
304
+ </section>
305
+ </aside>
306
+ </div><div class="codeBlock"><div class="highlight"><pre><span class="nt">%aside</span><span class="nc">.panel</span>
307
+ <span class="nt">%header</span><span class="nc">.panel-header.arrow</span>
308
+ Panel title
309
+ <span class="nt">%section</span><span class="nc">.panel-content</span>
310
+ Panel content
311
+
312
+ <span class="nt">%aside</span><span class="nc">.panel</span>
313
+ <span class="nt">%header</span><span class="nc">.panel-header.border-bottom</span>
314
+ Panel title
315
+ <span class="nt">%section</span><span class="nc">.panel-content</span>
316
+ Panel content
317
+ </pre></div></div></div>
318
+ <p>Panel colors.</p>
319
+ <div class="codeExample"><div class="exampleOutput"><aside class='panel red'>
320
+ <header class='panel-header'>
321
+ Panel title
322
+ </header>
323
+ <section class='panel-content'>
324
+ Panel content
325
+ </section>
326
+ </aside>
327
+ <aside class='panel green'>
328
+ <header class='panel-header'>
329
+ Panel title
330
+ </header>
331
+ <section class='panel-content'>
332
+ Panel content
333
+ </section>
334
+ </aside>
335
+ <aside class='panel pink'>
336
+ <header class='panel-header'>
337
+ Panel title
338
+ </header>
339
+ <section class='panel-content'>
340
+ Panel content
341
+ </section>
342
+ </aside>
343
+ <aside class='panel orange'>
344
+ <header class='panel-header'>
345
+ Panel title
346
+ </header>
347
+ <section class='panel-content'>
348
+ Panel content
349
+ </section>
350
+ </aside>
351
+ </div><div class="codeBlock"><div class="highlight"><pre><span class="nt">%aside</span><span class="nc">.panel.red</span>
352
+ <span class="nt">%header</span><span class="nc">.panel-header</span>
353
+ Panel title
354
+ <span class="nt">%section</span><span class="nc">.panel-content</span>
355
+ Panel content
356
+
357
+ <span class="nt">%aside</span><span class="nc">.panel.green</span>
358
+ <span class="nt">%header</span><span class="nc">.panel-header</span>
359
+ Panel title
360
+ <span class="nt">%section</span><span class="nc">.panel-content</span>
361
+ Panel content
362
+
363
+ <span class="nt">%aside</span><span class="nc">.panel.pink</span>
364
+ <span class="nt">%header</span><span class="nc">.panel-header</span>
365
+ Panel title
366
+ <span class="nt">%section</span><span class="nc">.panel-content</span>
367
+ Panel content
368
+
369
+ <span class="nt">%aside</span><span class="nc">.panel.orange</span>
370
+ <span class="nt">%header</span><span class="nc">.panel-header</span>
371
+ Panel title
372
+ <span class="nt">%section</span><span class="nc">.panel-content</span>
373
+ Panel content
374
+ </pre></div></div></div>
375
+ <p>Panel with tabs.</p>
376
+ <div class="codeExample"><div class="exampleOutput"><aside class='panel'>
377
+ <ul class='tablist' role='tablist'>
378
+ <li aria-controls='panel1' class='tab active' role='tab' tabindex='0'>First tab</li>
379
+ <li aria-controls='panel2' class='tab' role='tab' tabindex='0'>Second tab</li>
380
+ <li aria-controls='panel3' class='tab' role='tab' tabindex='0'>Third tab</li>
381
+ </ul>
382
+ <section class='panel-content'>
383
+ <div class='tabpanel active' id='panel1' role='tabpanel'>
384
+ First panel
385
+ </div>
386
+ <div class='tabpanel' id='panel2' role='tabpanel'>
387
+ Second panel
388
+ </div>
389
+ <div class='tabpanel' id='panel3' role='tabpanel'>
390
+ Third panel
391
+ </div>
392
+ </section>
393
+ </aside>
394
+ </div><div class="codeBlock"><div class="highlight"><pre><span class="nt">%aside</span><span class="nc">.panel</span>
395
+ <span class="nt">%ul</span><span class="nc">.tablist</span><span class="p">{</span><span class="ss">role: </span><span class="s1">'tablist'</span><span class="p">}</span>
396
+ <span class="nt">%li</span><span class="nc">.tab.active</span><span class="p">{</span><span class="s1">'aria-controls'</span> <span class="o">=&gt;</span> <span class="s1">'panel1'</span><span class="p">,</span> <span class="ss">:role</span> <span class="o">=&gt;</span> <span class="s1">'tab'</span><span class="p">,</span> <span class="ss">:tabindex</span> <span class="o">=&gt;</span> <span class="s1">'0'</span><span class="p">}</span> First tab
397
+ <span class="nt">%li</span><span class="nc">.tab</span><span class="p">{</span><span class="s1">'aria-controls'</span> <span class="o">=&gt;</span> <span class="s1">'panel2'</span><span class="p">,</span> <span class="ss">:role</span> <span class="o">=&gt;</span> <span class="s1">'tab'</span><span class="p">,</span> <span class="ss">:tabindex</span> <span class="o">=&gt;</span> <span class="s1">'0'</span><span class="p">}</span> Second tab
398
+ <span class="nt">%li</span><span class="nc">.tab</span><span class="p">{</span><span class="s1">'aria-controls'</span> <span class="o">=&gt;</span> <span class="s1">'panel3'</span><span class="p">,</span> <span class="ss">:role</span> <span class="o">=&gt;</span> <span class="s1">'tab'</span><span class="p">,</span> <span class="ss">:tabindex</span> <span class="o">=&gt;</span> <span class="s1">'0'</span><span class="p">}</span> Third tab
399
+ <span class="nt">%section</span><span class="nc">.panel-content</span>
400
+ <span class="nf">#panel1</span><span class="nc">.tabpanel.active</span><span class="p">{</span><span class="ss">role: </span><span class="s1">'tabpanel'</span><span class="p">}</span>
401
+ First panel
402
+ <span class="nf">#panel2</span><span class="nc">.tabpanel</span><span class="p">{</span><span class="ss">role: </span><span class="s1">'tabpanel'</span><span class="p">}</span>
403
+ Second panel
404
+ <span class="nf">#panel3</span><span class="nc">.tabpanel</span><span class="p">{</span><span class="ss">role: </span><span class="s1">'tabpanel'</span><span class="p">}</span>
405
+ Third panel
406
+ </pre></div></div></div>
407
+ <h1 id="summary">Summaries</h1>
408
+
409
+ <p>A summary is a representative of a complete news extract, to place it in some
410
+ prominent and visible place in the website. The different formats summary,
411
+ allow give more importance to some elements or others, according to their
412
+ position on the page.</p>
413
+ <div class="codeExample"><div class="exampleOutput"><article class='summary featured'>
414
+ <div class='summary-left'>
415
+ <img src='http://www.fillmurray.com/400/305/'>
416
+ </div>
417
+ <div class='summary-right'>
418
+ <header class='summary-header'>
419
+ <h2 class='summary-title'>
420
+ <a href='#'>Lorem ipsum dolor sit amet consectetur adipisicing</a>
421
+ </h2>
422
+ <div class='summary-meta'>
423
+ <div class='author'>john doe</div>
424
+ <div class='comments'>
425
+ <i class='fa fa-comment'>7</i>
426
+ </div>
427
+ </div>
428
+ </header>
429
+ <section class='summary-content'>
430
+ <p>
431
+ <a class='topic' href='#'>officia consectetur.</a>
432
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
433
+ </p>
434
+ </section>
435
+ </div>
436
+ </article>
437
+ </div><div class="codeBlock"><div class="highlight"><pre><span class="nt">%article</span><span class="nc">.summary.featured</span>
438
+ <span class="nc">.summary-left</span>
439
+ <span class="nt">%img</span><span class="p">{</span><span class="ss">:src</span> <span class="o">=&gt;</span> <span class="s2">"http://www.fillmurray.com/400/305/"</span><span class="p">}</span>
440
+ <span class="nc">.summary-right</span>
441
+ <span class="nt">%header</span><span class="nc">.summary-header</span>
442
+ <span class="nt">%h2</span><span class="nc">.summary-title</span>
443
+ <span class="nt">%a</span><span class="p">{</span><span class="ss">href: </span><span class="s1">'#'</span><span class="p">}</span> Lorem ipsum dolor sit amet consectetur adipisicing
444
+ <span class="nc">.summary-meta</span>
445
+ <span class="nc">.author</span> john doe
446
+ <span class="nc">.comments</span>
447
+ <span class="nt">%i</span><span class="nc">.fa.fa-comment</span> 7
448
+ <span class="nt">%section</span><span class="nc">.summary-content</span>
449
+ <span class="nt">%p</span>
450
+ <span class="nt">%a</span><span class="nc">.topic</span><span class="p">{</span><span class="ss">href: </span><span class="s1">'#'</span><span class="p">}</span> officia consectetur.
451
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
452
+ </pre></div></div></div><div class="codeExample"><div class="exampleOutput"><article class='summary medium'>
453
+ <div class='summary-left'>
454
+ <img src='http://www.fillmurray.com/g/400/300/'>
455
+ </div>
456
+ <div class='summary-right'>
457
+ <header class='summary-header'>
458
+ <h3 class='summary-title'>
459
+ <a href='#'>Lorem ipsum dolor sit amet consectetur adipisicing</a>
460
+ <span class='author'>john doe</span>
461
+ </h3>
462
+ </header>
463
+ <section class='summary-content'>
464
+ <p>
465
+ <a class='topic' href='#'>officia consectetur.</a>
466
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
467
+ </p>
468
+ </section>
469
+ </div>
470
+ </article>
471
+ </div><div class="codeBlock"><div class="highlight"><pre><span class="nt">%article</span><span class="nc">.summary.medium</span>
472
+ <span class="nc">.summary-left</span>
473
+ <span class="nt">%img</span><span class="p">{</span><span class="ss">:src</span> <span class="o">=&gt;</span> <span class="s2">"http://www.fillmurray.com/g/400/300/"</span><span class="p">}</span>
474
+ <span class="nc">.summary-right</span>
475
+ <span class="nt">%header</span><span class="nc">.summary-header</span>
476
+ <span class="nt">%h3</span><span class="nc">.summary-title</span>
477
+ <span class="nt">%a</span><span class="p">{</span><span class="ss">href: </span><span class="s1">'#'</span><span class="p">}</span> Lorem ipsum dolor sit amet consectetur adipisicing
478
+ <span class="nt">%span</span><span class="nc">.author</span> john doe
479
+
480
+ <span class="nt">%section</span><span class="nc">.summary-content</span>
481
+ <span class="nt">%p</span>
482
+ <span class="nt">%a</span><span class="nc">.topic</span><span class="p">{</span><span class="ss">href: </span><span class="s1">'#'</span><span class="p">}</span> officia consectetur.
483
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
484
+ </pre></div></div></div><div class="codeExample"><div class="exampleOutput"><article class='summary new'>
485
+ <header class='summary-header'>
486
+ <h3 class='summary-title'>
487
+ <a href='#'>Lorem ipsum dolor sit amet consectetur adipisicing</a>
488
+ </h3>
489
+ </header>
490
+ <section class='summary-content'>
491
+ <div class='thumbnail'>
492
+ <img src='http://www.fillmurray.com/g/375/250/'>
493
+ </div>
494
+ <div class='summary-meta'>
495
+ <div class='author'>john doe</div>
496
+ <div class='comments'>
497
+ <i class='fa fa-comment'>7</i>
498
+ </div>
499
+ </div>
500
+ <p>
501
+ <a class='topic' href='#'>officia consectetur.</a>
502
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
503
+ </p>
504
+ </section>
505
+ </article>
506
+ </div><div class="codeBlock"><div class="highlight"><pre><span class="nt">%article</span><span class="nc">.summary.new</span>
507
+ <span class="nt">%header</span><span class="nc">.summary-header</span>
508
+ <span class="nt">%h3</span><span class="nc">.summary-title</span>
509
+ <span class="nt">%a</span><span class="p">{</span><span class="ss">href: </span><span class="s1">'#'</span><span class="p">}</span> Lorem ipsum dolor sit amet consectetur adipisicing
510
+ <span class="nt">%section</span><span class="nc">.summary-content</span>
511
+ <span class="nc">.thumbnail</span>
512
+ <span class="nt">%img</span><span class="p">{</span><span class="ss">:src</span> <span class="o">=&gt;</span> <span class="s2">"http://www.fillmurray.com/g/375/250/"</span><span class="p">}</span>
513
+ <span class="nc">.summary-meta</span>
514
+ <span class="nc">.author</span> john doe
515
+ <span class="nc">.comments</span>
516
+ <span class="nt">%i</span><span class="nc">.fa.fa-comment</span> 7
517
+ <span class="nt">%p</span>
518
+ <span class="nt">%a</span><span class="nc">.topic</span><span class="p">{</span><span class="ss">href: </span><span class="s1">'#'</span><span class="p">}</span> officia consectetur.
519
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
520
+ </pre></div></div></div><div class="codeExample"><div class="exampleOutput"><article class='summary default'>
521
+ <header class='summary-header'>
522
+ <h2 class='summary-title'>
523
+ <a href='#'>Lorem ipsum dolor sit amet consectetur adipisicing</a>
524
+ </h2>
525
+ <div class='summary-meta'>
526
+ <div class='author'>john doe</div>
527
+ <div class='comments'>
528
+ <i class='fa fa-comment'>7</i>
529
+ </div>
530
+ </div>
531
+ </header>
532
+ <section class='summary-content'>
533
+ <div class='thumbnail'>
534
+ <img src='http://www.fillmurray.com/g/800/250/'>
535
+ </div>
536
+ <p>
537
+ <a class='topic' href='#'>officia consectetur.</a>
538
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
539
+ </p>
540
+ </section>
541
+ </article>
542
+ </div><div class="codeBlock"><div class="highlight"><pre><span class="nt">%article</span><span class="nc">.summary.default</span>
543
+ <span class="nt">%header</span><span class="nc">.summary-header</span>
544
+ <span class="nt">%h2</span><span class="nc">.summary-title</span>
545
+ <span class="nt">%a</span><span class="p">{</span><span class="ss">href: </span><span class="s1">'#'</span><span class="p">}</span> Lorem ipsum dolor sit amet consectetur adipisicing
546
+ <span class="nc">.summary-meta</span>
547
+ <span class="nc">.author</span> john doe
548
+ <span class="nc">.comments</span>
549
+ <span class="nt">%i</span><span class="nc">.fa.fa-comment</span> 7
550
+ <span class="nt">%section</span><span class="nc">.summary-content</span>
551
+ <span class="nc">.thumbnail</span>
552
+ <span class="nt">%img</span><span class="p">{</span><span class="ss">:src</span> <span class="o">=&gt;</span> <span class="s2">"http://www.fillmurray.com/g/800/250/"</span><span class="p">}</span>
553
+ <span class="nt">%p</span>
554
+ <span class="nt">%a</span><span class="nc">.topic</span><span class="p">{</span><span class="ss">href: </span><span class="s1">'#'</span><span class="p">}</span> officia consectetur.
555
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
556
+ </pre></div></div></div><div class="codeExample"><div class="exampleOutput"><article class='summary small'>
557
+ <div class='summary-left'>
558
+ <img src='http://www.fillmurray.com/g/400/150/'>
559
+ </div>
560
+ <div class='summary-right'>
561
+ <header class='summary-header'>
562
+ <h4 class='category'>reprehenderit</h4>
563
+ <h4 class='summary-title'>
564
+ <a href='#'>Lorem ipsum dolor sit amet consectetur adipisicing</a>
565
+ </h4>
566
+ </header>
567
+ <section class='summary-content'>
568
+ <p>
569
+ <a class='topic' href='#'>officia consectetur.</a>
570
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
571
+ </p>
572
+ </section>
573
+ </div>
574
+ </article>
575
+ </div><div class="codeBlock"><div class="highlight"><pre><span class="nt">%article</span><span class="nc">.summary.small</span>
576
+ <span class="nc">.summary-left</span>
577
+ <span class="nt">%img</span><span class="p">{</span><span class="ss">:src</span> <span class="o">=&gt;</span> <span class="s2">"http://www.fillmurray.com/g/400/150/"</span><span class="p">}</span>
578
+ <span class="nc">.summary-right</span>
579
+ <span class="nt">%header</span><span class="nc">.summary-header</span>
580
+ <span class="nt">%h4</span><span class="nc">.category</span> reprehenderit
581
+ <span class="nt">%h4</span><span class="nc">.summary-title</span>
582
+ <span class="nt">%a</span><span class="p">{</span><span class="ss">href: </span><span class="s1">'#'</span><span class="p">}</span> Lorem ipsum dolor sit amet consectetur adipisicing
583
+ <span class="nt">%section</span><span class="nc">.summary-content</span>
584
+ <span class="nt">%p</span>
585
+ <span class="nt">%a</span><span class="nc">.topic</span><span class="p">{</span><span class="ss">href: </span><span class="s1">'#'</span><span class="p">}</span> officia consectetur.
586
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
587
+ </pre></div></div></div> </section>
588
+ <footer>
589
+ <p>This documentation generated using <a href="http://github.com/trulia/hologram">Hologram</a>
590
+ </footer>
591
+ </div>
592
+ </body>
593
+ </html>