hologram 0.6.0 → 1.0.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 (34) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +7 -4
  3. data/Rakefile +5 -0
  4. data/hologram.gemspec +1 -1
  5. data/lib/hologram.rb +13 -445
  6. data/lib/hologram/display_message.rb +79 -0
  7. data/lib/hologram/doc_block_collection.rb +48 -0
  8. data/lib/hologram/doc_builder.rb +196 -0
  9. data/lib/hologram/doc_parser.rb +125 -0
  10. data/lib/hologram/document_block.rb +36 -0
  11. data/lib/hologram/template_variables.rb +21 -0
  12. data/lib/hologram/version.rb +1 -1
  13. data/lib/template/doc_assets/_header.html +7 -2
  14. data/lib/template/hologram_config.yml +3 -0
  15. data/spec/display_message_spec.rb +115 -0
  16. data/spec/doc_block_collection_spec.rb +80 -0
  17. data/spec/doc_builder_spec.rb +92 -0
  18. data/spec/doc_parser_spec.rb +89 -0
  19. data/spec/document_block_spec.rb +62 -0
  20. data/spec/fixtures/source/components/background/backgrounds.css +46 -0
  21. data/spec/fixtures/source/components/button/buttons.css +87 -0
  22. data/spec/fixtures/source/components/button/skin/buttonSkins.css +113 -0
  23. data/spec/fixtures/source/components/index.md +23 -0
  24. data/spec/fixtures/source/config.yml +17 -0
  25. data/spec/fixtures/source/extra/css/screen.css +1 -0
  26. data/spec/fixtures/source/templates/_footer.html +9 -0
  27. data/spec/fixtures/source/templates/_header.html +57 -0
  28. data/spec/fixtures/source/templates/static/css/doc.css +132 -0
  29. data/spec/fixtures/styleguide/base_css.html +170 -0
  30. data/spec/fixtures/styleguide/extra/css/screen.css +1 -0
  31. data/spec/fixtures/styleguide/index.html +84 -0
  32. data/spec/fixtures/styleguide/static/css/doc.css +132 -0
  33. data/spec/spec_helper.rb +7 -0
  34. metadata +66 -22
@@ -0,0 +1,170 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width">
6
+
7
+ <title>My Style Guide Base CSS</title>
8
+
9
+ <!-- Styleguide CSS -->
10
+ <link rel="stylesheet" href="static/css/doc.css">
11
+ <link rel="stylesheet" href="static/css/github.css">
12
+
13
+ <!-- CSS to be documented -->
14
+ <link rel="stylesheet" href="extra/css/screen.css">
15
+ </head>
16
+
17
+ <body>
18
+ <header class="header pbn" role="banner">
19
+ <div class="backgroundHighlight typeReversed1">
20
+ <div class="container">
21
+ <h1 class="h2 mvs">My Style Guide</h1>
22
+ </div>
23
+ </div>
24
+ <div class="backgroundLowlight typeReversed1">
25
+ <div class="container">
26
+ <span>
27
+ <ul class="docNav listInline">
28
+ <!-- Add you pages here -->
29
+ <li><a href="index.html">Intro</a></li>
30
+ <li><a href="base_css.html">Base CSS</a></li>
31
+ </ul>
32
+ </span>
33
+ </div>
34
+ </div>
35
+ <!-- //header/container -->
36
+ </header>
37
+
38
+ <div class="content">
39
+ <section>
40
+ <div class="line">
41
+
42
+ <div class="col cols4">
43
+ <div class="componentMenu box boxBasic backgroundBasic">
44
+ <div class="boxBody pan">
45
+ <ul class="componentList listBorderedHover">
46
+
47
+ <li><a href="#background">Background Colors</a></li>
48
+
49
+ <li><a href="#button">Buttons</a></li>
50
+
51
+ <li><a href="#buttonSkins">Button Styles</a></li>
52
+
53
+ </ul>
54
+ </div>
55
+ </div>
56
+ </div>
57
+
58
+ <div class="main col cols20 lastCol">
59
+
60
+
61
+
62
+ <h1 id="background">Background Colors</h1>
63
+
64
+ <p>We have a few background colors that can be used in various contexts.
65
+ These are not for use as the entire page background but instead for
66
+ specific components and modules on the page.</p>
67
+
68
+ <div class="line txtC">
69
+ <div class="col cols6 ">
70
+ <div class="docSwatch backgroundLowlight"></div>
71
+ <code>backgroundLowlight</code>
72
+ </div>
73
+ <div class="col cols6 ">
74
+ <div class="docSwatch backgroundHighlight"></div>
75
+ <code>backgroundHighlight</code>
76
+ </div>
77
+ <div class="col cols6 ">
78
+ <div class="docSwatch backgroundBasic"></div>
79
+ <code>backgroundBasic</code>
80
+ </div>
81
+ <div class="col cols6 lastCol">
82
+ <div class="docSwatch backgroundInverse"></div>
83
+ <code>backgroundInverse</code>
84
+ </div>
85
+ </div>
86
+
87
+ <h1 id="button">Buttons</h1>
88
+
89
+ <p>Button styles can be applied to any element. Typically you&#39;ll want to
90
+ use either a <code>&lt;button&gt;</code> or an <code>&lt;a&gt;</code> element:</p>
91
+ <div class="codeExample"><div class="exampleOutput"><button class="btn btnDefault">Click</button>
92
+ <a class="btn btnDefault" href="http://trulia.com">Don't click</a>
93
+ </div><div class="codeBlock"><div class="highlight"><pre><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;btn btnDefault&quot;</span><span class="nt">&gt;</span>Click<span class="nt">&lt;/button&gt;</span>
94
+ <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btnDefault&quot;</span> <span class="na">href=</span><span class="s">&quot;http://trulia.com&quot;</span><span class="nt">&gt;</span>Don&#39;t click<span class="nt">&lt;/a&gt;</span>
95
+ </pre></div></div></div>
96
+ <p>If your button is actually a link to another page, please use the
97
+ <code>&lt;a&gt;</code> element, while if your button performs an action, such as submitting
98
+ a form or triggering some javascript event, then use a <code>&lt;button&gt;</code> element.</p>
99
+
100
+ <h2>Button Sizes</h2>
101
+
102
+ <p>There are three 3 sizes for buttons: Large, medium (default)
103
+ and small. Simply apply the size modifier class for the desired size.
104
+ There is also an additional modifier that will make the button take the
105
+ full width of the container. It may be used with the any of the button
106
+ size and style modifiers.</p>
107
+
108
+ <table><thead>
109
+ <tr>
110
+ <th>Button</th>
111
+ <th>Modifier Class</th>
112
+ </tr>
113
+ </thead><tbody>
114
+ <tr>
115
+ <td><button class="btn btnDefault btnLrg">Large</button></td>
116
+ <td><code>btn btnDefault btnLrg</code></td>
117
+ </tr>
118
+ <tr>
119
+ <td><button class="btn btnDefault">Default</button></td>
120
+ <td><code>btn btnDefault</code></td>
121
+ </tr>
122
+ <tr>
123
+ <td><button class="btn btnDefault btnSml">Small</button></td>
124
+ <td><code>btn btnDefault btnSml</code></td>
125
+ </tr>
126
+ <tr>
127
+ <td><button class="btn btnDefault btnFullWidth">Full width</button></td>
128
+ <td><code>btn btnDefault btnFullWidth</code></td>
129
+ </tr>
130
+ </tbody></table>
131
+
132
+ <h2 id="buttonSkins">Button Styles</h2>
133
+
134
+ <table><thead>
135
+ <tr>
136
+ <th>Button</th>
137
+ <th>Class</th>
138
+ <th>Description</th>
139
+ </tr>
140
+ </thead><tbody>
141
+ <tr>
142
+ <td><button class="btn btnDefault">Default</button></td>
143
+ <td><code>btn btnDefault</code></td>
144
+ <td>This is what buttons look like, this is the go to button style.</td>
145
+ </tr>
146
+ <tr>
147
+ <td><button class="btn btnPrimary">Primary</button></td>
148
+ <td><code>btn btnPrimary</code></td>
149
+ <td>Use this button as the primary call to action</td>
150
+ </tr>
151
+ <tr>
152
+ <td><button class="btn btnDanger">Delete</button></td>
153
+ <td><code>btn btnDanger</code></td>
154
+ <td>This button is for delete actions, these actions should also have a confirmation dialog</td>
155
+ </tr>
156
+ <tr>
157
+ <td><button class="btn btnDisabled">Disabled</button></td>
158
+ <td><code>btn btnDisabled</code></td>
159
+ <td>I&#39;m afraid I can&#39;t let you do that, yet.</td>
160
+ </tr>
161
+ </tbody></table>
162
+ </div>
163
+ </div>
164
+ </section>
165
+ <footer>
166
+ The source code for this style guide is licensed under the MIT license.
167
+ </footer>
168
+ </div>
169
+ </body>
170
+ </html>
@@ -0,0 +1 @@
1
+ @charset "UTF-8";article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}b,strong{font-weight:bold}dfn{font-style:italic}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,dt,dd,menu,ol,ul{margin:0;padding:0;list-style-type:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{margin:0;padding:0}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}th{font-weight:normal}.main{overflow:hidden;*overflow:visible;zoom:1}.line .lastCol{display:table-cell;vertical-align:top;width:10000px!important;*display:block;*zoom:1;*width:auto!important}.line,.box,.box .boxHead,.box .boxFoot,.content>section,.container{zoom:1}.line:before,.box:before,.box .boxHead:before,.box .boxFoot:before,.content>section:before,.container:before,.line:after,.box:after,.box .boxHead:after,.box .boxFoot:after,.content>section:after,.container:after{content:" ";display:table}.line:after,.box:after,.box .boxHead:after,.box .boxFoot:after,.content>section:after,.container:after{clear:both}.listInline>li{display:inline-block;*display:inline;*zoom:1}.hideVisually{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.hideVisually.focusable:active,.hideVisually.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.hideText{background-color:transparent;border:0;overflow:hidden;*text-indent:-9999px}.hideText:before{content:"";display:block;width:0;height:100%}.hideFully{display:none!important;visibility:hidden}.txtC,table .txtC,table tr .txtC{text-align:center}.txtL,table .txtL,table tr .txtL{text-align:left}.txtR,table .txtR,table tr .txtR{text-align:right}.txtT,table .txtT,table tr .txtT{vertical-align:top}.txtB,table .txtB,table tr .txtB{vertical-align:bottom}.txtM,table .txtM,table tr .txtM{vertical-align:middle}p,.headingDoubleSub,ol,ul,.table{margin-top:5px;margin-bottom:5px}.box{margin-top:21px;margin-bottom:21px}table h1,table h2,table h3,table h4,table h5,table h6,table p,table ul,table ol,table dl,table blockquote,table .media,table pre{margin-left:0;margin-right:0}.pan{padding:0!important}.man{margin:0!important}.pas{padding:5px!important}.mas{margin:5px!important}.pam{padding:10px!important}.mam{margin:10px!important}.pal{padding:21px!important}.mal{margin:21px!important}.pvn{padding-top:0!important;padding-bottom:0!important}.mvn{margin-top:0!important;margin-bottom:0!important}.pvs{padding-top:5px!important;padding-bottom:5px!important}.mvs{margin-top:5px!important;margin-bottom:5px!important}.pvm{padding-top:10px!important;padding-bottom:10px!important}.mvm{margin-top:10px!important;margin-bottom:10px!important}.pvl{padding-top:21px!important;padding-bottom:21px!important}.mvl{margin-top:21px!important;margin-bottom:21px!important}.phn{padding-left:0!important;padding-right:0!important}.mhn{margin-left:0!important;margin-right:0!important}.phs{padding-left:5px!important;padding-right:5px!important}.mhs{margin-left:5px!important;margin-right:5px!important}.phm{padding-left:10px!important;padding-right:10px!important}.mhm{margin-left:10px!important;margin-right:10px!important}.phl{padding-left:21px!important;padding-right:21px!important}.mhl{margin-left:21px!important;margin-right:21px!important}.ptn{padding-top:0!important}.mtn{margin-top:0!important}.pts{padding-top:5px!important}.mts{margin-top:5px!important}.ptm{padding-top:10px!important}.mtm{margin-top:10px!important}.ptl{padding-top:21px!important}.mtl{margin-top:21px!important}.prn{padding-right:0!important}.mrn{margin-right:0!important}.prs{padding-right:5px!important}.mrs{margin-right:5px!important}.prm{padding-right:10px!important}.mrm{margin-right:10px!important}.prl{padding-right:21px!important}.mrl{margin-right:21px!important}.pbn{padding-bottom:0!important}.mbn{margin-bottom:0!important}.pbs{padding-bottom:5px!important}.mbs{margin-bottom:5px!important}.pbm{padding-bottom:10px!important}.mbm{margin-bottom:10px!important}.pbl{padding-bottom:21px!important}.mbl{margin-bottom:21px!important}.pln{padding-left:0!important}.mln{margin-left:0!important}.pls{padding-left:5px!important}.mls{margin-left:5px!important}.plm{padding-left:10px!important}.mlm{margin-left:10px!important}.pll{padding-left:21px!important}.mll{margin-left:21px!important}@font-face{font-family:"OpenSans";src:url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Light-webfont.eot");src:url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Light-webfont.woff") format("woff"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Light-webfont.ttf") format("truetype"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Light-webfont.svg#OpenSansLight") format("svg");font-weight:300;font-style:normal}@font-face{font-family:"OpenSans";src:url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Regular-webfont.eot");src:url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Regular-webfont.woff") format("woff"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Regular-webfont.ttf") format("truetype"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Regular-webfont.svg#OpenSansRegular") format("svg");font-weight:400;font-style:normal}@font-face{font-family:"OpenSans";src:url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Bold-webfont.eot");src:url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Bold-webfont.woff") format("woff"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Bold-webfont.ttf") format("truetype"),url("http://static.trulia-cdn.com/images/fonts/OpenSans/OpenSans-Bold-webfont.svg#OpenSansBold") format("svg");font-weight:600;font-style:normal}body{font-size:14px;font-size:.875rem;line-height:1.5em;color:#222}body,input,select,textarea,button{font-family:OpenSans,sans-serif}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{font-weight:300;font-style:normal}h1,.h1{font-size:36px;font-size:2.25rem;line-height:1.3;margin:5px 0;font-weight:bold}h2,.h2{font-size:28px;font-size:1.75rem;line-height:1.4;margin:5px 0}h3,.h3{font-size:24px;font-size:1.5rem;line-height:1.4;margin:5px 0}h4,.h4{font-size:20px;font-size:1.25rem;line-height:1.4;margin:5px 0}h5,.h5{font-size:16px;font-size:1rem;line-height:1.5;margin:5px 0;font-weight:bold}h6,.h6{font-size:14px;font-size:.875rem;line-height:1.5;margin:5px 0;font-weight:bold}.h7{font-size:12px;font-size:.75rem;line-height:1.6;margin:5px 0}.headingDoubleSuper{display:block;clear:both;min-width:10px}.headingDoubleSub{font-size:14px;font-size:.875rem;display:block;float:left;font-weight:normal;line-height:1.5}.headingDoubleInline{display:inline-block}pre,code{font-family:Menlo,Consolas,Monaco,"Lucida Console",monospace}.typeWarning{color:#cc2114}.typeHighlight{color:#5eab1f}.typeLowlight{color:#999}.typeReversed1{color:white}.typeReversed2{color:#eff6e9}.typeDeemphasize{font-weight:300!important}.typeWeightNormal{font-weight:normal!important}.typeEmphasize{font-weight:bold!important}.cols1{width:4.16667%!important;*width:2.30496%!important}.cols2{width:8.33333%!important;*width:6.47163%!important}.cols3{width:12.5%!important;*width:10.6383%!important}.cols4{width:16.66667%!important;*width:14.80496%!important}.cols5{width:20.83333%!important;*width:18.97163%!important}.cols6{width:25%!important;*width:23.1383%!important}.cols7{width:29.16667%!important;*width:27.30496%!important}.cols8{width:33.33333%!important;*width:31.47163%!important}.cols9{width:37.5%!important;*width:35.6383%!important}.cols10{width:41.66667%!important;*width:39.80496%!important}.cols11{width:45.83333%!important;*width:43.97163%!important}.cols12{width:50%!important;*width:48.1383%!important}.cols13{width:54.16667%!important;*width:52.30496%!important}.cols14{width:58.33333%!important;*width:56.47163%!important}.cols15{width:62.5%!important;*width:60.6383%!important}.cols16{width:66.66667%!important;*width:64.80496%!important}.cols17{width:70.83333%!important;*width:68.97163%!important}.cols18{width:75%!important;*width:73.1383%!important}.cols19{width:79.16667%!important;*width:77.30496%!important}.cols20{width:83.33333%!important;*width:81.47163%!important}.cols21{width:87.5%!important;*width:85.6383%!important}.cols22{width:91.66667%!important;*width:89.80496%!important}.cols23{width:95.83333%!important;*width:93.97163%!important}.cols24{width:100%!important;*width:98.1383%!important}.line{margin-left:-21px}.line .col{min-height:1px;float:left;zoom:1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding-left:21px}.line .colExt{float:right;zoom:1;padding:0 0 0 21px}.line .lastCol{float:none;*display:block;*width:auto!important;*zoom:1}.line .col:last-child{display:table-cell;float:none;vertical-align:top;width:10000px!important}a,a:hover,a:focus,.linkLowlight{text-decoration:none}a{color:#1885f0}a:hover,a:focus{color:#5eab1f}.linkLowlight{color:#999}.linkLowlight:hover,.linkLowlight:focus{color:#5eab1f}.linkForward:after{margin-left:.35714em;content:"\00BB"}.linkBack:before{margin-right:.35714em;content:"\00AB"}.backgroundBasic{background-color:white}.backgroundLowlight{background-color:#f9f9f9}.backgroundHighlight{background-color:#5eab1f}.backgroundInverse{background-color:#222}.box{position:relative}.box .boxHead,.box .boxFoot{padding:0;margin:0 21px}.box .boxBody{padding:0 21px 1px}.boxHighlight{border:1px solid #e9e9e9;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.17);-moz-box-shadow:0 0 5px rgba(0,0,0,0.17);box-shadow:0 0 5px rgba(0,0,0,0.17)}.boxBasic{border:1px solid #e9e9e9;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px}.boxHeadBasic{border-bottom:solid 1px #e9e9e9}.boxFootBasic{border-top:solid 1px #e9e9e9}.boxClose{border:0;position:absolute;cursor:pointer;background-color:transparent}.boxClose{top:3px;right:6px;width:20px;height:20px;text-align:center;color:#999;font-size:14px;font-size:.875rem}.boxClose:hover,.boxClose:focus{color:#222}ol,ul{list-style-type:none}ol>li,ul>li{margin:.2em 0}.listBordered>li,.listBorderedHover>li{padding:10px;border-top:1px solid #e9e9e9}.listBordered>li:first-child,.listBorderedHover>li:first-child{border-top:1px solid transparent}.listBorderedHover>li{margin:0}.listBorderedHover>li:hover{background-color:#f9f9f9}.listInline>li{vertical-align:middle;padding-right:10px}.lvn>li{padding-top:0;padding-bottom:0}.lvs>li{padding-top:5px;padding-bottom:5px}.lvm>li{padding-top:10px;padding-bottom:10px}.lvl>li{padding-top:21px;padding-bottom:21px}.lhn>li{padding-left:0;padding-right:0}.lhs>li{padding-left:5px;padding-right:5px}.lhm>li{padding-left:10px;padding-right:10px}.lhl>li{padding-left:21px;padding-right:21px}.toggle{position:relative;cursor:pointer}.toggleArrow .before,.toggleArrow:before{content:"\25BA";display:inline-block;width:1.3em;font-size:.9em;text-align:center}.toggleArrowActive:before{content:"\25BC"}.toggleArrow:hover .before{text-decoration:none}.toggleArrow .active,.toggleActive .inactive{display:none}.toggleActive .active{display:inline-block}.toggleActive .inactive{display:none}.frameThumb,.frameSmall,.frameStandard,.frameStacked{display:inline-block;*display:inline;*zoom:1;*border:1px solid #e9e9e9;-webkit-box-shadow:0 0 1px 1px rgba(0,0,0,0.2);-moz-box-shadow:0 0 1px 1px rgba(0,0,0,0.2);box-shadow:0 0 1px 1px rgba(0,0,0,0.2)}.frameThumb img,.frameSmall img,.frameStandard img,.frameStacked img{display:block}.frameThumb .polaroid,.frameSmall .polaroid,.frameStandard .polaroid,.frameStacked .polaroid{margin-top:5px}.frameThumb{padding:2px}.frameSmall{padding:6px}.frameStandard{padding:8px}.frameStacked{padding:8px;position:relative;background-color:#fff}.frameStacked:before,.frameStacked:after{-webkit-box-shadow:0 0 1px 1px rgba(0,0,0,0.2);-moz-box-shadow:0 0 1px 1px rgba(0,0,0,0.2);box-shadow:0 0 1px 1px rgba(0,0,0,0.2);width:100%;height:100%;position:absolute;z-index:-999;content:"";background-color:#f9f9f9}.frameStacked:before{left:5px;top:0;-webkit-transform:rotate(1deg);-moz-transform:rotate(1deg);-ms-transform:rotate(1deg);-o-transform:rotate(1deg);transform:rotate(1deg)}.frameStacked:after{right:5px;top:0;-webkit-transform:rotate(-1deg);-moz-transform:rotate(-1deg);-ms-transform:rotate(-1deg);-o-transform:rotate(-1deg);transform:rotate(-1deg)}.badgeStandard,.badgePrimary,.badgeSecondary,.badgeTertiary{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;font-size:12px;font-size:.75rem;padding:.35714em .42857em .21429em;display:inline-block;color:white;line-height:1;text-transform:uppercase}.badgeStandard{background-color:#999}.badgePrimary{background-color:#ff5c00}.badgeSecondary{background-color:#5eab1f}.badgeTertiary{background-color:#cc2114}button{background:0;border:0}.btn{padding:.5em 1em;margin:0;display:inline-block;font-weight:normal;line-height:normal;font-size:14px;font-size:.875rem;text-decoration:none;cursor:pointer;border:0;background:0;text-align:center;border:1px solid #ccc;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px}.btnSml{font-size:12px;font-size:.75rem;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px}.btnLrg{font-size:16px;font-size:1rem;line-height:1.6;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px}.btnFullWidth{width:100%}.btnDefault,a.btnDefault{border:1px #d7d7d7 solid;background:#f3f3f3;color:#222;text-shadow:0 1px 0 white;-webkit-box-shadow:0 1px 0 #ccc;-moz-box-shadow:0 1px 0 #ccc;box-shadow:0 1px 0 #ccc}.btnDefault:hover,.btnDefault:focus{background:#f6f6f6}.btnDefault:active{position:relative;top:1px;-webkit-box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05)}.btnPrimary,a.btnPrimary,.btnDanger,a.btnDanger{color:white;text-shadow:0}.btnPrimary,a.btnPrimary{border:1px #d14b00 solid;background:#ff5c00;-webkit-box-shadow:0 1px 0 #d35500;-moz-box-shadow:0 1px 0 #d35500;box-shadow:0 1px 0 #d35500}.btnPrimary:hover,.btnPrimary:focus{background:#ff660f}.btnPrimary:active{position:relative;top:1px;-webkit-box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05)}.btnDanger,a.btnDanger{border:1px #a21a10 solid;background:#cc2114;-webkit-box-shadow:0 1px 0 #d35500;-moz-box-shadow:0 1px 0 #d35500;box-shadow:0 1px 0 #d35500}.btnDanger:hover,.btnDanger:focus{background:#da2315}.btnDanger:active{position:relative;top:1px;-webkit-box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 3px 7px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.05)}.btn[disabled],.btn[disabled]:hover,.btn[disabled]:focus .btn[disabled]:active,.btnDisabled,a.btnDisabled,.btnDisabled:hover,.btnDisabled:focus,.btnDisabled:active{border:0;background:#ccc;color:#999;text-shadow:0;cursor:default}.btn[disabled]:active,.btnDisabled:active{position:static;color:#999;box-shadow:none}.btnLink{color:#1885f0;border:1px solid transparent}.btnLink:hover,.btnLink:focus{color:#5eab1f}.table{width:100%}.table thead th{font-weight:bold;color:#222}.table th,.table td{padding:8px}.tableBasic th,.tableBasic td{border:1px solid #e9e9e9}.tan td,.tan th{padding:0}.tas td,.tas th{padding:5px}.tam td,.tam th{padding:10px}.tal td,.tal th{padding:21px}.tvn td,.tvn th{padding-top:0;padding-bottom:0}.tvs td,.tvs th{padding-top:5px;padding-bottom:5px}.tvm td,.tvm th{padding-top:10px;padding-bottom:10px}.tvl td,.tvl th{padding-top:21px;padding-bottom:21px}.thn td,.thn th{padding-left:0;padding-right:0}.ths td,.ths th{padding-left:5px;padding-right:5px}.thm td,.thm th{padding-left:10px;padding-right:10px}.thl td,.thl th{padding-left:21px;padding-right:21px}body{background:white}.content>section,.container{width:1128px;margin:0 auto}.main[role="main"]{position:relative;top:-10px}.content>section,.content .container{margin-top:0}.skipLink:focus{width:100%;padding:5px 0;display:block;position:absolute;z-index:100;text-indent:5px;color:#fff;background:#5eab1f}.header{padding-bottom:15px;*position:relative;*z-index:100;background:white;border-bottom:1px solid #ccc}.headerSubSection{margin:1px 0;font-size:11px;font-size:.6875rem;text-align:right;line-height:1}.headerSubSection a{color:#222}.headerSubSection .highlight{display:inline-block;padding:2px 10px;color:#fff;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-ms-border-radius:5px 5px 0 0;-o-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0;background:#888}.headerSubSection .listInline{margin:0}.headerMainSection{position:relative}.headerMainSection .logo{position:absolute;left:0;top:-1px}.menuWrap{margin-left:97px}.content{padding-top:5px}.content>section{margin-top:5px}.sideBar{width:185px;margin-right:20px;float:left}.main{float:none;*display:block;*width:auto;*zoom:1}.aside{width:300px;margin-left:20px;float:right}.footer{clear:both;margin-top:40px;font-size:12px;font-size:.75rem}.footerBox{border-top:5px solid #5eab1f}.footerBox .boxBody{margin:10px 0}.footerGroup a{color:#222}.footerGroup a:hover,.footerGroup a:focus{color:#5eab1f;text-decoration:underline}.footerCol{width:125px}.footerGroupHeading{float:left}.footerGroupHeading{width:120px;margin:0;clear:right;font-weight:bold}.footerGroupList{margin:0}.footerGroupList>li{margin:0}.footerDisclaimer{float:left}.footerNoteAside{float:right}
@@ -0,0 +1,84 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width">
6
+
7
+ <title>My Style Guide </title>
8
+
9
+ <!-- Styleguide CSS -->
10
+ <link rel="stylesheet" href="static/css/doc.css">
11
+ <link rel="stylesheet" href="static/css/github.css">
12
+
13
+ <!-- CSS to be documented -->
14
+ <link rel="stylesheet" href="extra/css/screen.css">
15
+ </head>
16
+
17
+ <body>
18
+ <header class="header pbn" role="banner">
19
+ <div class="backgroundHighlight typeReversed1">
20
+ <div class="container">
21
+ <h1 class="h2 mvs">My Style Guide</h1>
22
+ </div>
23
+ </div>
24
+ <div class="backgroundLowlight typeReversed1">
25
+ <div class="container">
26
+ <span>
27
+ <ul class="docNav listInline">
28
+ <!-- Add you pages here -->
29
+ <li><a href="index.html">Intro</a></li>
30
+ <li><a href="base_css.html">Base CSS</a></li>
31
+ </ul>
32
+ </span>
33
+ </div>
34
+ </div>
35
+ <!-- //header/container -->
36
+ </header>
37
+
38
+ <div class="content">
39
+ <section>
40
+ <div class="line">
41
+
42
+ <div class="col cols4">
43
+ <div class="componentMenu box boxBasic backgroundBasic">
44
+ <div class="boxBody pan">
45
+ <ul class="componentList listBorderedHover">
46
+
47
+ </ul>
48
+ </div>
49
+ </div>
50
+ </div>
51
+
52
+ <div class="main col cols20 lastCol">
53
+
54
+
55
+
56
+ <h1>Welcome</h1>
57
+
58
+ <p>This style guide is an example of what
59
+ <a href="http://trulia.github.io/hologram">hologram</a> can help you build and
60
+ maintain.</p>
61
+
62
+ <p>The goal of hologram is to make it easy to document your CSS and to
63
+ display the code examples to use that CSS. Hologram has no
64
+ opinions about how you should actually organize/style your style guide.
65
+ You could do everything as a single file with no header/footer and it
66
+ would work just fine. Or, you could break it up into an individual file
67
+ for each component. Top navigation, left navigation, no
68
+ navigation....that&#39;s up to you. Build it however you&#39;d like. </p>
69
+
70
+ <p>We&#39;ve borrowed some of <a href="http://trulia.com">Trulia</a>&#39;s own CSS library to
71
+ demonstrate how hologram can be used. If you want more details about
72
+ hologram see the <a href="http://github.com/trulia/hologram">git repository</a>. </p>
73
+
74
+ <p>This is a work in progress, please consider contributing to
75
+ <a href="http://github.com/trulia/hologram">hologram</a>.</p>
76
+ </div>
77
+ </div>
78
+ </section>
79
+ <footer>
80
+ The source code for this style guide is licensed under the MIT license.
81
+ </footer>
82
+ </div>
83
+ </body>
84
+ </html>
@@ -0,0 +1,132 @@
1
+ .container {
2
+ max-width: 1128px;
3
+ width: auto;
4
+ margin: 0 auto;
5
+ }
6
+
7
+ .content {
8
+ margin-top: 5px;
9
+ }
10
+
11
+
12
+ .main > h1 {
13
+ margin-top: 30px;
14
+ }
15
+
16
+ .main > h1:first-child {
17
+ margin-top: 0;
18
+ }
19
+
20
+ footer {
21
+ margin-top: 20px;
22
+ text-align: center;
23
+ }
24
+
25
+
26
+ .componentMenu {
27
+ max-height: 535px;
28
+ width: 175px;
29
+ overflow-y: auto;
30
+ }
31
+
32
+ blockquote:before {
33
+ content: "Design Note:";
34
+ font-weight: bold;
35
+ }
36
+
37
+ blockquote {
38
+ border: 1px solid #eee;
39
+ border-radius: 4px;
40
+ font-family: "Comic Sans MS";
41
+ font-size:16px;
42
+ margin: 10px 0;
43
+ padding: 5px;
44
+
45
+ }
46
+
47
+
48
+ code {
49
+ padding: 2px 4px;
50
+ color: #d14;
51
+ white-space: nowrap;
52
+ background-color: #f9f9f9;
53
+ border: 1px solid #ccc;
54
+ border-radius: 4px;
55
+ }
56
+
57
+ div.codeExample, div.jsExample {
58
+ border: 1px solid #ccc;
59
+ border-radius: 4px;
60
+ margin: 10px 0;
61
+ }
62
+
63
+ div.jsExample {
64
+ border-top: 0px;
65
+ }
66
+
67
+ div.codeExample:before, div.jsExample:before {
68
+ font-family: "OpenSans", sans-serif;
69
+ color: #222;
70
+ border: 1px solid #ccc;
71
+ border-radius: 4px;
72
+ border-bottom-left-radius: 0;
73
+ border-top-right-radius: 0;
74
+ position: relative;
75
+ padding: 2px;
76
+ display: block;
77
+ }
78
+
79
+ div.codeExample:before {
80
+ content: "Example";
81
+ background-color: #f9f9f9;
82
+ width: 60px;
83
+ top: -1px;
84
+ left: -1px;
85
+ }
86
+
87
+ div.jsExample:before {
88
+ content: "JS Example";
89
+ background-color: #fff;
90
+ width: 80px;
91
+ top: -11px;
92
+ left: -11px;
93
+ }
94
+
95
+ div.codeBlock, div.exampleOutput {
96
+ padding: 10px;
97
+ }
98
+
99
+ div.codeBlock {
100
+ background-color: #f9f9f9;
101
+ border-top: 1px solid #ccc;
102
+ border-bottom-left-radius: 4px;
103
+ border-bottom-right-radius: 4px;
104
+ }
105
+
106
+ .docSwatch {
107
+ min-height: 218.21px;
108
+ border: 1px solid #ccc;
109
+ padding: 10px 0 0 10px;
110
+ font-size: 12px;
111
+ margin-bottom: 5px;
112
+ }
113
+
114
+ .codeExample .line > div:after {
115
+ content: attr(class);
116
+ display: block;
117
+ min-height: 40px;
118
+ line-height: 40px;
119
+ background-color: #EEE;
120
+ text-align: center;
121
+ border-radius: 3px;
122
+ font-size: 12px;
123
+ }
124
+
125
+ table, table tr, table td, table th {
126
+ padding: 7px;
127
+ border: 1px solid #ccc;
128
+ }
129
+
130
+ table th {
131
+ font-weight: bold;
132
+ }
@@ -0,0 +1,7 @@
1
+ require 'rspec'
2
+ require 'hologram'
3
+ require 'tmpdir'
4
+
5
+ RSpec.configure do |config|
6
+ config.order = "random"
7
+ end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: hologram
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.6.0
4
+ version: 1.0.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - JD Cantrell
@@ -9,76 +9,76 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2013-12-16 00:00:00.000000000 Z
12
+ date: 2014-02-27 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: redcarpet
16
16
  requirement: !ruby/object:Gem::Requirement
17
17
  requirements:
18
- - - "~>"
18
+ - - ~>
19
19
  - !ruby/object:Gem::Version
20
20
  version: 2.2.2
21
21
  type: :runtime
22
22
  prerelease: false
23
23
  version_requirements: !ruby/object:Gem::Requirement
24
24
  requirements:
25
- - - "~>"
25
+ - - ~>
26
26
  - !ruby/object:Gem::Version
27
27
  version: 2.2.2
28
28
  - !ruby/object:Gem::Dependency
29
- name: sass
29
+ name: pygments.rb
30
30
  requirement: !ruby/object:Gem::Requirement
31
31
  requirements:
32
- - - "~>"
32
+ - - ~>
33
33
  - !ruby/object:Gem::Version
34
- version: 3.2.7
34
+ version: 0.4.2
35
35
  type: :runtime
36
36
  prerelease: false
37
37
  version_requirements: !ruby/object:Gem::Requirement
38
38
  requirements:
39
- - - "~>"
39
+ - - ~>
40
40
  - !ruby/object:Gem::Version
41
- version: 3.2.7
41
+ version: 0.4.2
42
42
  - !ruby/object:Gem::Dependency
43
- name: pygments.rb
43
+ name: rspec
44
44
  requirement: !ruby/object:Gem::Requirement
45
45
  requirements:
46
- - - "~>"
46
+ - - ~>
47
47
  - !ruby/object:Gem::Version
48
- version: 0.4.2
48
+ version: 2.14.1
49
49
  type: :runtime
50
50
  prerelease: false
51
51
  version_requirements: !ruby/object:Gem::Requirement
52
52
  requirements:
53
- - - "~>"
53
+ - - ~>
54
54
  - !ruby/object:Gem::Version
55
- version: 0.4.2
55
+ version: 2.14.1
56
56
  - !ruby/object:Gem::Dependency
57
57
  name: bundler
58
58
  requirement: !ruby/object:Gem::Requirement
59
59
  requirements:
60
- - - "~>"
60
+ - - ~>
61
61
  - !ruby/object:Gem::Version
62
62
  version: '1.3'
63
63
  type: :development
64
64
  prerelease: false
65
65
  version_requirements: !ruby/object:Gem::Requirement
66
66
  requirements:
67
- - - "~>"
67
+ - - ~>
68
68
  - !ruby/object:Gem::Version
69
69
  version: '1.3'
70
70
  - !ruby/object:Gem::Dependency
71
71
  name: rake
72
72
  requirement: !ruby/object:Gem::Requirement
73
73
  requirements:
74
- - - ">="
74
+ - - '>='
75
75
  - !ruby/object:Gem::Version
76
76
  version: '0'
77
77
  type: :development
78
78
  prerelease: false
79
79
  version_requirements: !ruby/object:Gem::Requirement
80
80
  requirements:
81
- - - ">="
81
+ - - '>='
82
82
  - !ruby/object:Gem::Version
83
83
  version: '0'
84
84
  description: Build doc type things
@@ -89,7 +89,7 @@ executables:
89
89
  extensions: []
90
90
  extra_rdoc_files: []
91
91
  files:
92
- - ".gitignore"
92
+ - .gitignore
93
93
  - Gemfile
94
94
  - LICENSE.txt
95
95
  - README.md
@@ -97,11 +97,36 @@ files:
97
97
  - bin/hologram
98
98
  - hologram.gemspec
99
99
  - lib/hologram.rb
100
+ - lib/hologram/display_message.rb
101
+ - lib/hologram/doc_block_collection.rb
102
+ - lib/hologram/doc_builder.rb
103
+ - lib/hologram/doc_parser.rb
104
+ - lib/hologram/document_block.rb
105
+ - lib/hologram/template_variables.rb
100
106
  - lib/hologram/version.rb
101
107
  - lib/hologram_markdown_renderer.rb
102
108
  - lib/template/doc_assets/_footer.html
103
109
  - lib/template/doc_assets/_header.html
104
110
  - lib/template/hologram_config.yml
111
+ - spec/display_message_spec.rb
112
+ - spec/doc_block_collection_spec.rb
113
+ - spec/doc_builder_spec.rb
114
+ - spec/doc_parser_spec.rb
115
+ - spec/document_block_spec.rb
116
+ - spec/fixtures/source/components/background/backgrounds.css
117
+ - spec/fixtures/source/components/button/buttons.css
118
+ - spec/fixtures/source/components/button/skin/buttonSkins.css
119
+ - spec/fixtures/source/components/index.md
120
+ - spec/fixtures/source/config.yml
121
+ - spec/fixtures/source/extra/css/screen.css
122
+ - spec/fixtures/source/templates/_footer.html
123
+ - spec/fixtures/source/templates/_header.html
124
+ - spec/fixtures/source/templates/static/css/doc.css
125
+ - spec/fixtures/styleguide/base_css.html
126
+ - spec/fixtures/styleguide/extra/css/screen.css
127
+ - spec/fixtures/styleguide/index.html
128
+ - spec/fixtures/styleguide/static/css/doc.css
129
+ - spec/spec_helper.rb
105
130
  homepage: http://trulia.github.io/hologram
106
131
  licenses:
107
132
  - MIT
@@ -112,12 +137,12 @@ require_paths:
112
137
  - lib
113
138
  required_ruby_version: !ruby/object:Gem::Requirement
114
139
  requirements:
115
- - - ">="
140
+ - - '>='
116
141
  - !ruby/object:Gem::Version
117
142
  version: '0'
118
143
  required_rubygems_version: !ruby/object:Gem::Requirement
119
144
  requirements:
120
- - - ">="
145
+ - - '>='
121
146
  - !ruby/object:Gem::Version
122
147
  version: '0'
123
148
  requirements: []
@@ -126,4 +151,23 @@ rubygems_version: 2.0.3
126
151
  signing_key:
127
152
  specification_version: 4
128
153
  summary: Build document type things.
129
- test_files: []
154
+ test_files:
155
+ - spec/display_message_spec.rb
156
+ - spec/doc_block_collection_spec.rb
157
+ - spec/doc_builder_spec.rb
158
+ - spec/doc_parser_spec.rb
159
+ - spec/document_block_spec.rb
160
+ - spec/fixtures/source/components/background/backgrounds.css
161
+ - spec/fixtures/source/components/button/buttons.css
162
+ - spec/fixtures/source/components/button/skin/buttonSkins.css
163
+ - spec/fixtures/source/components/index.md
164
+ - spec/fixtures/source/config.yml
165
+ - spec/fixtures/source/extra/css/screen.css
166
+ - spec/fixtures/source/templates/_footer.html
167
+ - spec/fixtures/source/templates/_header.html
168
+ - spec/fixtures/source/templates/static/css/doc.css
169
+ - spec/fixtures/styleguide/base_css.html
170
+ - spec/fixtures/styleguide/extra/css/screen.css
171
+ - spec/fixtures/styleguide/index.html
172
+ - spec/fixtures/styleguide/static/css/doc.css
173
+ - spec/spec_helper.rb