psique 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
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>