shibori 1.0.0.beta1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (239) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +20 -0
  3. data/Gemfile +4 -0
  4. data/Gemfile.lock +27 -0
  5. data/Procfile +1 -0
  6. data/README.md +24 -0
  7. data/Rakefile +2 -0
  8. data/app.json +11 -0
  9. data/builder/lineage_hunter.js +80 -0
  10. data/builder/list_item_hunter.js +106 -0
  11. data/builder/media_hunter.js +51 -0
  12. data/builder/object_factory.js +60 -0
  13. data/builder/parameter_hunter.js +69 -0
  14. data/builder/pattern_assembler.js +258 -0
  15. data/builder/pattern_exporter.js +43 -0
  16. data/builder/patternlab.js +365 -0
  17. data/builder/patternlab_grunt.js +38 -0
  18. data/builder/patternlab_gulp.js +26 -0
  19. data/builder/pseudopattern_hunter.js +78 -0
  20. data/config.json +34 -0
  21. data/docs/Pattern Lab Node.md +225 -0
  22. data/favicon.ico +0 -0
  23. data/gulpfile.js +148 -0
  24. data/index.js +20 -0
  25. data/lib/shibori/version.rb +3 -0
  26. data/lib/shibori.rb +11 -0
  27. data/package.json +44 -0
  28. data/public/data/annotations.js +109 -0
  29. data/public/styleguide/css/static.css +458 -0
  30. data/public/styleguide/css/static.scss +404 -0
  31. data/public/styleguide/css/styleguide-specific.css +170 -0
  32. data/public/styleguide/css/styleguide-specific.scss +204 -0
  33. data/public/styleguide/css/styleguide.css +880 -0
  34. data/public/styleguide/css/styleguide.scss +950 -0
  35. data/public/styleguide/css/vendor/prism.css +112 -0
  36. data/public/styleguide/css/vendor/typeahead.css +66 -0
  37. data/public/styleguide/fonts/icomoon.eot +0 -0
  38. data/public/styleguide/fonts/icomoon.svg +22 -0
  39. data/public/styleguide/fonts/icomoon.ttf +0 -0
  40. data/public/styleguide/fonts/icomoon.woff +0 -0
  41. data/public/styleguide/html/README +1 -0
  42. data/public/styleguide/images/spinner.gif +0 -0
  43. data/public/styleguide/js/annotations-pattern.js +308 -0
  44. data/public/styleguide/js/annotations-viewer.js +289 -0
  45. data/public/styleguide/js/code-pattern.js +120 -0
  46. data/public/styleguide/js/code-viewer.js +443 -0
  47. data/public/styleguide/js/data-saver.js +169 -0
  48. data/public/styleguide/js/pattern-finder.js +114 -0
  49. data/public/styleguide/js/postmessage.js +127 -0
  50. data/public/styleguide/js/styleguide.js +600 -0
  51. data/public/styleguide/js/url-handler.js +182 -0
  52. data/public/styleguide/js/vendor/classlist-polyfill.js +176 -0
  53. data/public/styleguide/js/vendor/jquery.js +4 -0
  54. data/public/styleguide/js/vendor/jwerty.js +523 -0
  55. data/public/styleguide/js/vendor/prism.js +7 -0
  56. data/public/styleguide/js/vendor/typeahead.bundle.min.js +7 -0
  57. data/script/bootstrap +58 -0
  58. data/shibori.gemspec +18 -0
  59. data/shibori.jpg +0 -0
  60. data/source/_data/annotations.js +109 -0
  61. data/source/_data/data.json +93 -0
  62. data/source/_data/listitems.json +782 -0
  63. data/source/_patternlab-files/README +1 -0
  64. data/source/_patternlab-files/index.mustache +94 -0
  65. data/source/_patternlab-files/partials/ishControls.mustache +64 -0
  66. data/source/_patternlab-files/partials/patternNav.mustache +17 -0
  67. data/source/_patternlab-files/partials/patternPaths.mustache +3 -0
  68. data/source/_patternlab-files/partials/viewAllPaths.mustache +3 -0
  69. data/source/_patternlab-files/pattern-header-footer/README +1 -0
  70. data/source/_patternlab-files/pattern-header-footer/footer.html +34 -0
  71. data/source/_patternlab-files/pattern-header-footer/header.html +44 -0
  72. data/source/_patternlab-files/styleguide.mustache +75 -0
  73. data/source/_patternlab-files/viewall.mustache +75 -0
  74. data/source/_patterns/00-atoms/00-typography/00-headings.mustache +6 -0
  75. data/source/_patterns/00-atoms/00-typography/01-headings-options.mustache +7 -0
  76. data/source/_patterns/00-atoms/00-typography/02-body.mustache +2 -0
  77. data/source/_patterns/00-atoms/00-typography/03-text-manipulation.mustache +12 -0
  78. data/source/_patterns/00-atoms/00-typography/04-blockquotes.mustache +3 -0
  79. data/source/_patterns/00-atoms/00-typography/05-lists.mustache +64 -0
  80. data/source/_patterns/00-atoms/01-colors/00-colors-monochromatic.mustache +36 -0
  81. data/source/_patterns/00-atoms/01-colors/01-colors-brand.mustache +26 -0
  82. data/source/_patterns/00-atoms/01-colors/02-colors-gradients.mustache +38 -0
  83. data/source/_patterns/00-atoms/02-buttons/00-btn-lg.mustache +7 -0
  84. data/source/_patterns/00-atoms/02-buttons/01-btn-sm.mustache +7 -0
  85. data/source/_patterns/00-atoms/02-buttons/02-btn-xs.mustache +7 -0
  86. data/source/_patterns/00-atoms/02-buttons/03-btn-block.mustache +7 -0
  87. data/source/_patterns/00-atoms/02-buttons/04-btn-deploy.mustache +4 -0
  88. data/source/_patterns/00-atoms/03-forms/00-text-fields.mustache +24 -0
  89. data/source/_patterns/00-atoms/03-forms/01-select-menu.mustache +6 -0
  90. data/source/_patterns/00-atoms/03-forms/02-checkbox.mustache +10 -0
  91. data/source/_patterns/00-atoms/03-forms/03-radios.mustache +10 -0
  92. data/source/_patterns/00-atoms/03-forms/04-validation.mustache +14 -0
  93. data/source/_patterns/00-atoms/04-quote/00-pullquote.mustache +7 -0
  94. data/source/_patterns/00-atoms/04-quote/01-quote-small.mustache +7 -0
  95. data/source/_patterns/00-atoms/05-code/01-pre.mustache +11 -0
  96. data/source/_patterns/00-atoms/06-tooltips/00-text.mustache +3 -0
  97. data/source/_patterns/00-atoms/06-tooltips/01-diagram-callout.mustache +1 -0
  98. data/source/_patterns/00-atoms/07-loader/00-spinner.mustache +5 -0
  99. data/source/_patterns/00-atoms/08-readmore/00-readmore.mustache +3 -0
  100. data/source/_patterns/00-atoms/09-slider/00-dots.mustache +8 -0
  101. data/source/_patterns/00-atoms/10-tables/00-tables.mustache +26 -0
  102. data/source/_patterns/00-atoms/12-modal/00-modal.mustache +14 -0
  103. data/source/_patterns/00-atoms/13-panel/00-panel.mustache +3 -0
  104. data/source/_patterns/00-atoms/14-users/00-avatar.mustache +3 -0
  105. data/source/_patterns/00-atoms/15-icons/00-icons.mustache +333 -0
  106. data/source/_patterns/00-atoms/15-icons/04-icon-colors.mustache +38 -0
  107. data/source/_patterns/00-atoms/15-icons/05-icon-sizes.mustache +31 -0
  108. data/source/_patterns/00-atoms/15-icons/_02-languages.mustache +0 -0
  109. data/source/_patterns/00-atoms/15-icons/_03-social.mustache +0 -0
  110. data/source/_patterns/00-atoms/15-icons/_05-icon-containers.mustache +0 -0
  111. data/source/_patterns/00-atoms/16-video/01-video.mustache +3 -0
  112. data/source/_patterns/00-atoms/16-video/_00-play-button.mustache +0 -0
  113. data/source/_patterns/00-atoms/17-utilities/00-visibility.mustache +8 -0
  114. data/source/_patterns/00-atoms/17-utilities/01-ui-elements.mustache +3 -0
  115. data/source/_patterns/00-atoms/18-grid/_00-grid.mustache +0 -0
  116. data/source/_patterns/01-molecules/00-text/00-header-groups.mustache +4 -0
  117. data/source/_patterns/01-molecules/00-text/01-intro-text.mustache +5 -0
  118. data/source/_patterns/01-molecules/01-layout/00-one-up.mustache +8 -0
  119. data/source/_patterns/01-molecules/01-layout/01-two-up.mustache +9 -0
  120. data/source/_patterns/01-molecules/01-layout/02-three-up.mustache +10 -0
  121. data/source/_patterns/01-molecules/01-layout/03-four-up.mustache +11 -0
  122. data/source/_patterns/01-molecules/01-layout/04-masonary-2.mustache +24 -0
  123. data/source/_patterns/01-molecules/01-layout/05-masonary-3.mustache +24 -0
  124. data/source/_patterns/01-molecules/02-navigation/01-subnav.mustache +21 -0
  125. data/source/_patterns/01-molecules/02-navigation/02-breadcrumbs.mustache +25 -0
  126. data/source/_patterns/01-molecules/02-navigation/03-side-nav.mustache +11 -0
  127. data/source/_patterns/01-molecules/02-navigation/04-side-nav-small.mustache +32 -0
  128. data/source/_patterns/01-molecules/02-navigation/05-pagination.mustache +0 -0
  129. data/source/_patterns/01-molecules/02-navigation/06-tabs.mustache +46 -0
  130. data/source/_patterns/01-molecules/03-forms/_00-search.mustache +0 -0
  131. data/source/_patterns/01-molecules/04-slider/00-slider.mustache +8 -0
  132. data/source/_patterns/01-molecules/05-messages/00-alert.mustache +15 -0
  133. data/source/_patterns/01-molecules/06-components/_00-social-share.mustache +0 -0
  134. data/source/_patterns/01-molecules/07-Elements/01-Addons-Card.mustache +79 -0
  135. data/source/_patterns/01-molecules/07-Elements/02-Buttons-Card.mustache +131 -0
  136. data/source/_patterns/01-molecules/07-Elements/03-Buildpack-Card.mustache +109 -0
  137. data/source/_patterns/01-molecules/08-vertical-tabs/01-vertical-tabs.mustache +30 -0
  138. data/source/_patterns/02-organisms/03-sections/00-purple.mustache +11 -0
  139. data/source/_patterns/02-organisms/03-sections/01-purple-dark.mustache +12 -0
  140. data/source/_patterns/02-organisms/03-sections/03-gray-light.mustache +12 -0
  141. data/source/css/hk-icon-rails.scss +13 -0
  142. data/source/css/scss/base/_base.scss +62 -0
  143. data/source/css/scss/base/_fonts.scss +12 -0
  144. data/source/css/scss/base/_normalize.scss +431 -0
  145. data/source/css/scss/base/_type.scss +128 -0
  146. data/source/css/scss/base/_utilities.scss +78 -0
  147. data/source/css/scss/components/_alert.scss +38 -0
  148. data/source/css/scss/components/_animate.scss +3340 -0
  149. data/source/css/scss/components/_animation.scss +15 -0
  150. data/source/css/scss/components/_buttons.scss +175 -0
  151. data/source/css/scss/components/_code.scss +26 -0
  152. data/source/css/scss/components/_forms.scss +136 -0
  153. data/source/css/scss/components/_hero.scss +18 -0
  154. data/source/css/scss/components/_hr.scss +11 -0
  155. data/source/css/scss/components/_icons.scss +85 -0
  156. data/source/css/scss/components/_lists.scss +45 -0
  157. data/source/css/scss/components/_logos.scss +15 -0
  158. data/source/css/scss/components/_masonary.scss +46 -0
  159. data/source/css/scss/components/_modal.scss +218 -0
  160. data/source/css/scss/components/_owlCarousel.scss +270 -0
  161. data/source/css/scss/components/_panel.scss +11 -0
  162. data/source/css/scss/components/_pill-box.scss +38 -0
  163. data/source/css/scss/components/_quote.scss +96 -0
  164. data/source/css/scss/components/_readmore.scss +11 -0
  165. data/source/css/scss/components/_slider.scss +96 -0
  166. data/source/css/scss/components/_spinner.scss +64 -0
  167. data/source/css/scss/components/_sprites.scss +3 -0
  168. data/source/css/scss/components/_sr-only.scss +10 -0
  169. data/source/css/scss/components/_tables.scss +62 -0
  170. data/source/css/scss/components/_tooltips.scss +93 -0
  171. data/source/css/scss/components/_users.scss +11 -0
  172. data/source/css/scss/components/_vertical-tabs.scss +129 -0
  173. data/source/css/scss/components/_video.scss +7 -0
  174. data/source/css/scss/ecosystem/_addons-card.scss +3 -0
  175. data/source/css/scss/ecosystem/_cards.scss +369 -0
  176. data/source/css/scss/ecosystem/_elements-brand.scss +32 -0
  177. data/source/css/scss/ecosystem/_elements.scss +4 -0
  178. data/source/css/scss/globals/_colors.scss +189 -0
  179. data/source/css/scss/globals/_mixins.scss +45 -0
  180. data/source/css/scss/globals/_variables.scss +87 -0
  181. data/source/css/scss/layout/_grid-settings.scss +13 -0
  182. data/source/css/scss/layout/_layout.scss +95 -0
  183. data/source/css/scss/page-elements/_headers.scss +3 -0
  184. data/source/css/scss/page-elements/_navigation.scss +254 -0
  185. data/source/css/scss/page-elements/_sections.scss +66 -0
  186. data/source/css/scss/page-elements/_sidebar.scss +34 -0
  187. data/source/css/shibori.scss +63 -0
  188. data/source/fonts/bentonsans/bentonsans-book.eot +0 -0
  189. data/source/fonts/bentonsans/bentonsans-book.svg +400 -0
  190. data/source/fonts/bentonsans/bentonsans-book.ttf +0 -0
  191. data/source/fonts/bentonsans/bentonsans-book.woff +0 -0
  192. data/source/fonts/bentonsans/bentonsans-medium.eot +0 -0
  193. data/source/fonts/bentonsans/bentonsans-medium.svg +416 -0
  194. data/source/fonts/bentonsans/bentonsans-medium.ttf +0 -0
  195. data/source/fonts/bentonsans/bentonsans-medium.woff +0 -0
  196. data/source/fonts/bentonsans/bentonsans-regular.eot +0 -0
  197. data/source/fonts/bentonsans/bentonsans-regular.svg +416 -0
  198. data/source/fonts/bentonsans/bentonsans-regular.ttf +0 -0
  199. data/source/fonts/bentonsans/bentonsans-regular.woff +0 -0
  200. data/source/fonts/hk-icon/hk-icon.eot +0 -0
  201. data/source/fonts/hk-icon/hk-icon.svg +261 -0
  202. data/source/fonts/hk-icon/hk-icon.ttf +0 -0
  203. data/source/fonts/hk-icon/hk-icon.woff +0 -0
  204. data/source/fonts/inconsolata/inconsolata-bold.eot +0 -0
  205. data/source/fonts/inconsolata/inconsolata-bold.svg +239 -0
  206. data/source/fonts/inconsolata/inconsolata-bold.ttf +0 -0
  207. data/source/fonts/inconsolata/inconsolata-bold.woff +0 -0
  208. data/source/fonts/inconsolata/inconsolata-regular.eot +0 -0
  209. data/source/fonts/inconsolata/inconsolata-regular.svg +239 -0
  210. data/source/fonts/inconsolata/inconsolata-regular.ttf +0 -0
  211. data/source/fonts/inconsolata/inconsolata-regular.woff +0 -0
  212. data/source/images/blockquote/close-sm.png +0 -0
  213. data/source/images/blockquote/close.png +0 -0
  214. data/source/images/blockquote/close@2x.png +0 -0
  215. data/source/images/blockquote/open-sm.png +0 -0
  216. data/source/images/blockquote/open.png +0 -0
  217. data/source/images/blockquote/open@2x.png +0 -0
  218. data/source/images/elements/heroku_suported.svg +32 -0
  219. data/source/images/forms/select-input-arrows.svg +8 -0
  220. data/source/js/init.js +26 -0
  221. data/source/js/main.js +22 -0
  222. data/source/js/vendor/bourbon-modal.js +17 -0
  223. data/source/js/vendor/fitvids.js +77 -0
  224. data/source/js/vendor/fixto.js +719 -0
  225. data/source/js/vendor/jquery-2.0.0b2.js +8690 -0
  226. data/source/js/vendor/modernizr.js +4 -0
  227. data/source/js/vendor/owl.carousel.js +3069 -0
  228. data/source/js/vendor/readmore.js +11 -0
  229. data/source/js/vendor/unslider.js +1 -0
  230. data/source/js/vendor/vertical-tabs.js +34 -0
  231. data/test/files/test.css +19 -0
  232. data/test/lineage_hunter_tests.js +262 -0
  233. data/test/list_item_hunter_tests.js +167 -0
  234. data/test/media_hunter_tests.js +74 -0
  235. data/test/object_factory_tests.js +62 -0
  236. data/test/parameter_hunter_tests.js +298 -0
  237. data/test/pattern_assembler_tests.js +43 -0
  238. data/test/patternlab_tests.js +8 -0
  239. metadata +320 -0
@@ -0,0 +1 @@
1
+ There should be no reason to touch these files in day-to-day use.
@@ -0,0 +1,94 @@
1
+ <!DOCTYPE html>
2
+ <html id="patternlab-html">
3
+ <head id="patternlab-head">
4
+ <title id="title">Heroku Pattern Lab</title>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width" />
7
+ <link rel="stylesheet" href="styleguide/css/styleguide.css" media="all" />
8
+ <link rel="stylesheet" href="styleguide/css/styleguide-specific.css" media="all" />
9
+ <link rel="stylesheet" href="styleguide/css/vendor/typeahead.css" media="all" />
10
+ <link rel="stylesheet" href="styleguide/css/vendor/prism.css" media="all" />
11
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
12
+ <script>window.jQuery || document.write('<script src="styleguide/js/vendor/jquery.js"><\/script>')</script>
13
+ </head>
14
+ <body id="patternlab-body">>
15
+ <!--Style Guide Header-->
16
+ <header class="sg-header" role="banner">
17
+ <a href="#sg-nav-container" class="sg-nav-toggle">Menu</a>
18
+ <div class="sg-nav-container" id="sg-nav-container">
19
+ {{> patternNav }}
20
+ {{> ishControls }}
21
+ </div>
22
+ </header>
23
+ <!--End Style Guide Header-->
24
+
25
+ <!-- Iframe -->
26
+ <div id="sg-vp-wrap">
27
+ <div id="sg-cover"></div>
28
+ <div id="sg-gen-container">
29
+ <iframe id="sg-viewport" sandbox="allow-same-origin allow-scripts"></iframe>
30
+ <div id="sg-rightpull-container">
31
+ <div id="sg-rightpull"></div>
32
+ </div>
33
+ </div>
34
+ </div>
35
+ <!--end iFrame-->
36
+
37
+ <!-- the template for the code view slider -->
38
+ <script type="text/html" id="code-template">
39
+ <div id="sg-code-close" class="sg-view-close">
40
+ <a href="#" id="sg-code-close-btn" class="sg-view-close-btn">Close</a>
41
+ </div>
42
+ <div id="sg-code-loader">
43
+ <div class="spinner"></div>
44
+ Loading pattern...
45
+ </div>
46
+ <div id="sg-code-patternstate" style="display: none;">
47
+ <p>
48
+ The state of the <span id="sg-code-patternstate-patternname" class="sg-code-patternname"></span> pattern is: <span id="sg-code-patternstate-fill"></span>
49
+ </p>
50
+ </div>
51
+ <div id="sg-code-lineage" style="display: none;">
52
+ <p>
53
+ The <span id="sg-code-lineager-patternname" class="sg-code-patternname"></span> pattern contains the following patterns: <span id="sg-code-lineage-fill"></span>
54
+ </p>
55
+ </div>
56
+ <div id="sg-code-lineager" style="display: none;">
57
+ <p>
58
+ The <span id="sg-code-lineager-patternname" class="sg-code-patternname"></span> pattern is included in the following patterns: <span id="sg-code-lineager-fill"></span>
59
+ </p>
60
+ </div>
61
+ <div id="sg-code-markup">
62
+ <ul id="sg-code-tabs">
63
+ <li id="sg-code-title-html" class="sg-code-title-active">HTML</li>
64
+ <li id="sg-code-title-mustache">Mustache</li>
65
+ <li id="sg-code-title-css" style="display: none;">CSS</li>
66
+ </ul>
67
+ <div class="clear">
68
+ <pre><code id="sg-code-fill"></code></pre>
69
+ </div>
70
+ </div>
71
+ </script>
72
+
73
+ <!-- the template for the annotations viewer slider -->
74
+ <script type="text/html" id="annotations-template">
75
+ <div id="sg-annotation-close" class="sg-view-close">
76
+ <a href="#" id="sg-annotation-close-btn" class="sg-view-close-btn">Close</a>
77
+ </div>
78
+ <div id="sg-comments-container"></div>
79
+ </script>
80
+
81
+ <script src="styleguide/js/vendor/prism.js"></script>
82
+ <script src="styleguide/js/vendor/jwerty.js"></script>
83
+ <script src="styleguide/js/vendor/typeahead.bundle.min.js"></script>
84
+ <script src="styleguide/js/data-saver.js"></script>
85
+ {{> patternPaths }}
86
+ {{> viewAllPaths }}
87
+ <script src="styleguide/js/url-handler.js"></script>
88
+ <script src="styleguide/js/styleguide.js"></script>
89
+ <script src="styleguide/js/annotations-viewer.js "></script>
90
+ <script src="styleguide/js/code-viewer.js "></script>
91
+ <script src="styleguide/js/pattern-finder.js"></script>
92
+
93
+ </body>
94
+ </html>
@@ -0,0 +1,64 @@
1
+ <!--sg-controls-->
2
+ <div class="sg-controls" id="sg-controls">
3
+ <div class="sg-control-content">
4
+ <ul class="sg-control">
5
+ <li class="sg-size">
6
+ <div class="sg-current-size">
7
+ <form id="sg-form">
8
+ Size <input type="text" class="sg-input sg-size-px" value="---">px /
9
+ <input type="text" class="sg-input sg-size-em" value="---">em
10
+ </form><!--end #sg-form-->
11
+ </div><!--end #sg-current-size-->
12
+ <ul class="sg-acc-panel sg-size-options">
13
+ {{# ishControlsVisible.s }}<li><a href="#" id="sg-size-s">S</a></li>{{/ ishControlsVisible.s }}
14
+ {{# ishControlsVisible.m }}<li><a href="#" id="sg-size-m">M</a></li>{{/ ishControlsVisible.m }}
15
+ {{# ishControlsVisible.l }}<li><a href="#" id="sg-size-l">L</a></li>{{/ ishControlsVisible.l }}
16
+ {{# ishControlsVisible.full }}<li><a href="#" id="sg-size-full">Full</a></li>{{/ ishControlsVisible.full }}
17
+ {{# ishControlsVisible.random }}<li><a href="#" id="sg-size-random">Random</a></li>{{/ ishControlsVisible.random }}
18
+ {{# ishControlsVisible.disco }}<li><a href="#" class="mode-link" id="sg-size-disco">Disco</a></li>{{/ ishControlsVisible.disco }}
19
+ {{# ishControlsVisible.hay }}<li><a href="#" class="mode-link" id="sg-size-hay">Hay!</a></li>{{/ ishControlsVisible.hay }}
20
+ </ul>
21
+ </li>
22
+ {{# ishControlsVisible.mqs }}
23
+ <li class="sg-mqs">
24
+ <a href="#" class="mode-link sg-acc-handle" id="sg-size-mq" title="Media queries in stylesheet">MQ</a>
25
+ <ul class="sg-acc-panel sg-left" id="sg-mq">
26
+ {{# mqs }}
27
+ <li><a href="#">{{ . }}</a></li>
28
+ {{/ mqs }}
29
+ </ul>
30
+ </li>
31
+ {{/ ishControlsVisible.mqs }}
32
+ {{# ishControlsVisible.find }}
33
+ <li class="sg-find">
34
+ <a href="#" class="sg-acc-handle sg-control-trigger sg-icon sg-icon-search" id="sg-f-toggle" title="Search Patterns"><span class="is-vishidden">Search Patterns</span></a>
35
+ <ul class="sg-view sg-acc-panel sg-right sg-checklist" id="sg-find" style="margin-top: 33px;">
36
+ <li><input class="typeahead" id="typeahead" type="text" placeholder="search for a pattern..."></li>
37
+ </ul>
38
+ </li>
39
+ {{/ ishControlsVisible.find }}
40
+ {{# ishControlsVisible.views-all }}
41
+ <li class="sg-view">
42
+ <a href="#" class="sg-acc-handle sg-control-trigger sg-icon sg-icon-eye" id="sg-t-toggle" title="View"><span class="is-vishidden">View</span></a>
43
+ <ul class="sg-view sg-acc-panel sg-right sg-checklist" id="sg-view">
44
+ {{# ishControlsVisible.views-annotations }}<li><a href="#" class="sg-checkbox" id="sg-t-annotations">Annotations</a></li>{{/ ishControlsVisible.views-annotations }}
45
+ {{# ishControlsVisible.views-code }}<li><a href="#" class="sg-checkbox" id="sg-t-code">Code</a></li>{{/ ishControlsVisible.views-code }}
46
+ {{# ishControlsVisible.views-new }}<li><a href="#" target="_blank" id="sg-raw" class="sg-icon-link">Open in new window</a></li>{{/ ishControlsVisible.views-new }}
47
+ </ul>
48
+ </li>
49
+ {{/ ishControlsVisible.views-all }}
50
+ {{# ishControlsVisible.tools-all }}
51
+ <li class="sg-tools">
52
+ <a href="#" class="sg-acc-handle sg-tools-toggle sg-icon sg-icon-cog" id="sg-tools-toggle" title="Tools"><span class="is-vishidden">Tools</span></a>
53
+ <ul class="sg-acc-panel sg-right sg-checklist">
54
+ {{# ishControlsVisible.tools-sync }}<li><a href="http://localhost:3001" target="_blank" id="syncButton" class="sg-checkbox sg-auto-reload" data-state="off">BrowserSync UI</a></li>{{/ ishControlsVisible.tools-sync }}
55
+ {{# ishControlsVisible.tools-shortcuts }}<li><a href="http://pattern-lab.info/docs/advanced-keyboard-shortcuts.html" class="sg-icon-keyboard" target="_blank">Keyboard Shortcuts</a>{{/ ishControlsVisible.tools-shortcuts }}
56
+ {{# ishControlsVisible.tools-docs }}<li><a href="http://pattern-lab.info/docs/" class="sg-icon-file" target="_blank">Pattern Lab Docs</a>{{/ ishControlsVisible.tools-docs }}
57
+ </ul>
58
+ </li>
59
+ {{/ ishControlsVisible.tools-all }}
60
+ </ul>
61
+
62
+ </div>
63
+ </div>
64
+ <!--End #sg-controls-->
@@ -0,0 +1,17 @@
1
+ <ol class="sg-nav">
2
+ {{# buckets }}
3
+ <li class="sg-nav-{{ bucketNameLC }}"><a class="sg-acc-handle">{{ bucketNameUC }}</a><ol class="sg-acc-panel">
4
+ {{# navItems }}
5
+ <li class="sg-nav-{{ sectionNameLC }}"><a class="sg-acc-handle">{{ sectionNameUC }}</a><ol class="sg-acc-panel">
6
+ {{# navSubItems }}
7
+ <li><a href="patterns/{{ patternPath }}" class="sg-pop {{# patternState }}sg-pattern-state {{ patternState }}{{/ patternState }}" data-patternpartial="{{ patternPartial }}">{{ patternName }}</a></li>
8
+ {{/ navSubItems }}
9
+ </ol></li>
10
+ {{/ navItems }}
11
+ {{# patternItems }}
12
+ <li><a href="patterns/{{ patternPath }}" class="sg-pop {{# patternState }}sg-pattern-state {{ patternState }}{{/ patternState }}"" data-patternpartial="{{ patternPartial }}">{{ patternName }}</a></li>
13
+ {{/ patternItems }}
14
+ </ol></li>
15
+ {{/ buckets }}
16
+ <li><a href="styleguide/html/styleguide.html" class="sg-pop" data-patternpartial="all">All</a></li>
17
+ </ol>
@@ -0,0 +1,3 @@
1
+ <script>
2
+ var patternPaths = {{{ patternPaths }}}
3
+ </script>
@@ -0,0 +1,3 @@
1
+ <script>
2
+ var viewAllPaths = {{{ viewallpaths }}}
3
+ </script>
@@ -0,0 +1 @@
1
+ This is not a real pattern. It's simply the header and footer that patterns get sandwiched between when they're processed by the builder.
@@ -0,0 +1,34 @@
1
+ <!-- End of Pattern -->
2
+
3
+ <!--
4
+ Remember that patterns are displayed from two-levels deep (e.g. patterns/patterntype-patternsubtype-patternname/patterntype-patternsubtype-patternname.html)
5
+ Therefore all calls to assets should have the ../../ in order to work in an apache-less environment
6
+ -->
7
+
8
+ <!-- DO NOT MODIFY -->
9
+ <script>
10
+ // handle injection of items from PHP
11
+ var patternPartial = "{{ patternGroup }}-{{ patternName }}";
12
+ var lineage = [{{{ lineage }}}];
13
+ var lineageR = [{{{ lineageR }}}];
14
+ var patternState = "{{patternState}}";
15
+ var baseurl = "{{{baseurl}}}";
16
+ var cssEnabled = false; //TODO
17
+ </script>
18
+
19
+ <script type="text/html" id="sg-pattern-html">
20
+ {{ patternHTML }}
21
+ </script>
22
+
23
+ <script type="text/html" id="sg-pattern-css">
24
+ {{ patternCSS }}
25
+ </script>
26
+ <script src="../../styleguide/js/vendor/jwerty.js"></script>
27
+ <script src="../../styleguide/js/postmessage.js"></script>
28
+ <script src="../../data/annotations.js"></script>
29
+ <script src="../../styleguide/js/annotations-pattern.js"></script>
30
+ <script src="../../styleguide/js/code-pattern.js"></script>
31
+ <!-- /DO NOT MODIFY -->
32
+
33
+ </body>
34
+ </html>
@@ -0,0 +1,44 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Pattern Lab Pattern</title>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width" />
7
+
8
+ <!-- never cache patterns -->
9
+ <meta http-equiv="cache-control" content="max-age=0" />
10
+ <meta http-equiv="cache-control" content="no-cache" />
11
+ <meta http-equiv="expires" content="0" />
12
+ <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
13
+ <meta http-equiv="pragma" content="no-cache" />
14
+
15
+ <!--
16
+ Styleguide CSS is included for
17
+ -->
18
+ <link rel="stylesheet" href="../../styleguide/css/styleguide.css" media="all">
19
+ <link rel="stylesheet" href="../../styleguide/css/styleguide-specific.css" media="all" />
20
+
21
+ <!--
22
+ Remember that patterns are displayed from two-levels deep (e.g. patterns/patterntype-patternsubtype-patternname/patterntype-patternsubtype-patternname.html)
23
+ Therefore all calls to assets should have the ../../ in order to work in an apache-less environment
24
+ -->
25
+ <link rel="stylesheet" href="../../css/shibori.css" media="all" />
26
+
27
+ <!-- Heroku specific JS -->
28
+ <script src="../../js/vendor/jquery-2.0.0b2.js"></script>
29
+ <script src="../../js/vendor/unslider.js"></script>
30
+ <script src="../../js/vendor/fitvids.js"></script>
31
+ <script src="../../js/vendor/readmore.js"></script>
32
+ <script src="../../js/main.js"></script>
33
+ <script src="../../js/vendor/vertical-tabs.js"></script>
34
+ <script src="../../js/vendor/bourbon-modal.js"></script>
35
+ <script src="../../js/vendor/owl.carousel.js"></script>
36
+ <style>
37
+ .has-comment, .has-comment a {
38
+ cursor: help !important;
39
+ }
40
+ </style>
41
+
42
+ </head>
43
+ <body class="sg-single-pattern">
44
+ <!-- Start of Pattern -->
@@ -0,0 +1,75 @@
1
+ <!DOCTYPE html>
2
+ <html id="patternlab-html">
3
+ <head id="patternlab-head">
4
+ <title>Pattern Lab Style Guide</title>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width" />
7
+ <link rel="stylesheet" href="../../styleguide/css/styleguide.css" media="all" />
8
+ <link rel="stylesheet" href="../../styleguide/css/styleguide-specific.css" media="all" />
9
+ <link rel="stylesheet" href="../../css/shibori.css" media="all" />
10
+
11
+ <!-- Heroku specific JS -->
12
+ <script src="../../js/vendor/jquery-2.0.0b2.js"></script>
13
+ <script src="../../js/vendor/unslider.js"></script>
14
+ <script src="../../js/vendor/fitvids.js"></script>
15
+ <script src="../../js/vendor/readmore.js"></script>
16
+ <script src="../../js/main.js"></script>
17
+ </head>
18
+ <body class="sg-pattern-list">
19
+
20
+ <!-- Style Guide Main Content -->
21
+ <div class="sg-main" role="main">
22
+
23
+ <!-- Patterns -->
24
+ <div id="sg-patterns">
25
+ {{# partials }}
26
+ <div class="sg-pattern">
27
+ <h2 class="sg-pattern-head" ><a href="../../patterns/{{ patternLink }}" class="patternLink {{# patternState }}sg-pattern-state {{ . }}{{/ patternState }}" data-patternpartial="{{ patternPartialPath }}">{{ patternName }}</a></h2>
28
+ <div class="sg-pattern-body">
29
+ {{{ patternPartial }}}
30
+ <div class="sg-code" style="display: none">
31
+ {{# patternLineageExists }}
32
+ <div class="sg-code-contains">
33
+ This pattern contains:
34
+ {{# patternLineages }}
35
+ <a href="{{ lineagePath }}"><code>{{ lineagePattern }}</code><a>
36
+ {{/ patternLineages }}
37
+ </div>
38
+ {{/ patternLineageExists }}
39
+ <h3 class="sg-code-head">HTML</h3>
40
+ <pre class="sg-code-html">
41
+ <code>
42
+ {{ patternPartial }}
43
+ </code>
44
+ </pre>
45
+ {{# patternCSSExists }}
46
+ <h3 class="sg-code-head">CSS</h3>
47
+ <pre class="sg-code-css">
48
+ <code>
49
+ {{ patternCSS }}
50
+ </code>
51
+ </pre>
52
+ {{/ patternCSSExists }}
53
+ </div>
54
+ </div>
55
+ </div>
56
+ {{/ partials }}
57
+ </div> <!--end #sg-patterns-->
58
+
59
+ </div><!--End Style Guide Main Content-->
60
+
61
+ <!-- JS to hook everything together and do annotations -->
62
+ <script>
63
+ // handle injection of items from patternlab.js
64
+ var patternPartial = "";
65
+ var lineage = "";
66
+ var baseurl = "{{{baseurl}}}";
67
+ </script>
68
+ <script src="../../styleguide/js/vendor/jwerty.js"></script>
69
+ <script src="../../styleguide/js/vendor/prism.js"></script>
70
+ <script src="../../styleguide/js/postmessage.js"></script>
71
+ <script src="../../data/annotations.js"></script>
72
+ <script src="../../styleguide/js/annotations-pattern.js"></script>
73
+ <script src="../../styleguide/js/code-pattern.js"></script>
74
+ </body>
75
+ </html>
@@ -0,0 +1,75 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head id="patternlab-head">
4
+ <title>Pattern Lab Sub-type Style Guide</title>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width" />
7
+ <link rel="stylesheet" href="../../styleguide/css/styleguide.css" media="all" />
8
+ <link rel="stylesheet" href="../../styleguide/css/styleguide-specific.css" media="all" />
9
+ <link rel="stylesheet" href="../../css/shibori.css" media="all" />
10
+
11
+ <!-- Heroku specific JS -->
12
+ <script src="../../js/vendor/jquery-2.0.0b2.js"></script>
13
+ <script src="../../js/vendor/unslider.js"></script>
14
+ <script src="../../js/vendor/fitvids.js"></script>
15
+ <script src="../../js/vendor/readmore.js"></script>
16
+ <script src="../../js/main.js"></script>
17
+ </head>
18
+ <body class="sg-pattern-list">
19
+
20
+ <!-- View All Patterns in a Pattern Sub-Type -->
21
+ <div class="sg-main" role="main">
22
+
23
+ <!-- Patterns -->
24
+ <div id="sg-patterns">
25
+ {{# partials }}
26
+ <div class="sg-pattern">
27
+ <h2 class="sg-pattern-head" ><a href="../../patterns/{{ patternLink }}" class="patternLink" data-patternpartial="{{ patternPartialPath }}">{{ patternName }}</a></h2>
28
+ <div class="sg-pattern-body">
29
+ {{{ patternPartial }}}
30
+ <div class="sg-code" style="display: none">
31
+ {{# patternLineageExists }}
32
+ <div class="sg-code-contains">
33
+ This pattern contains:
34
+ {{# patternLineages }}
35
+ <a href="{{ lineagePath }}"><code>{{ lineagePattern }}</code></a>
36
+ {{/ patternLineages }}
37
+ </div>
38
+ {{/ patternLineageExists }}
39
+ <h3 class="sg-code-head">HTML</h3>
40
+ <pre class="sg-code-html">
41
+ <code>
42
+ {{ patternPartial }}
43
+ </code>
44
+ </pre>
45
+ {{# patternCSSExists }}
46
+ <h3 class="sg-code-head">CSS</h3>
47
+ <pre class="sg-code-css">
48
+ <code>
49
+ {{ patternCSS }}
50
+ </code>
51
+ </pre>
52
+ {{/ patternCSSExists }}
53
+ </div>
54
+ </div>
55
+ </div>
56
+ {{/ partials }}
57
+ </div> <!--end #sg-patterns-->
58
+
59
+ </div><!--end .sg-main-->
60
+
61
+ <!-- JS to hook everything together and do annotations -->
62
+ <script>
63
+ // handle injection of items from patternlab.js
64
+ var patternPartial = "{{ patternPartial }}";
65
+ var lineage = "";
66
+ var baseurl = "{{{baseurl}}}";
67
+ </script>
68
+ <script src="../../styleguide/js/vendor/jwerty.js"></script>
69
+ <script src="../../styleguide/js/postmessage.js"></script>
70
+ <script src="../../data/annotations.js"></script>
71
+ <script src="../../styleguide/js/annotations-pattern.js"></script>
72
+ <script src="../../styleguide/js/code-pattern.js"></script>
73
+
74
+ </body>
75
+ </html>
@@ -0,0 +1,6 @@
1
+ <h1>Heading Level 1</h1>
2
+ <h2>Heading Level 2</h2>
3
+ <h3>Heading Level 3</h3>
4
+ <h4>Heading Level 4</h4>
5
+ <h5>Heading Level 5</h5>
6
+ <h6>Heading Level 6</h6>
@@ -0,0 +1,7 @@
1
+ <h3 class="caps">Heading Caps</h3>
2
+ <h3 class="text-dark">Heading Dark</h3>
3
+ <h3 class="text-purple">Heading Purple</h3>
4
+ <h3 class="text-light">Heading Light</h3>
5
+ <span style="display: inline-block; background: rebeccapurple;">
6
+ <h3 class="text-white">Heading White</h3>
7
+ </span>
@@ -0,0 +1,2 @@
1
+ <p>Paragraph text. 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 <a href="#">body text link</a> exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
2
+
@@ -0,0 +1,12 @@
1
+ <ul class="list-unstyled">
2
+ <li>Text is <strong>bold</strong></li>
3
+ <li>Text is <em>emphasized</em></li>
4
+ <li>Text is <u>underlined</u></li>
5
+ <li>Text is <s>strikedthrough</s></li>
6
+ <li>Text is <small>small</small></li>
7
+ <li>Text is <sub>subscripted</sub></li>
8
+ <li>Text is <sup>superscripted</sup></li>
9
+ <li>Text is <mark>highlighted</mark></li>
10
+ <li>Text is an <code>inline code sample</code></li>
11
+ <li>Text is <span class="text-caps">all caps</span></li>
12
+ </ul>
@@ -0,0 +1,3 @@
1
+ <blockquote>
2
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus dolorem nihil odit doloribus nobis earum dolorum maxime quidem fuga, iusto ipsa praesentium eos similique saepe quis non officiis eveniet? Eveniet?</p>
3
+ </blockquote>
@@ -0,0 +1,64 @@
1
+ <h4>Unordered List</h4>
2
+ <ul>
3
+ <li>First list item</li>
4
+ <li>Second list item</li>
5
+ <li>Third list item
6
+ <ul>
7
+ <li>First nested list item</li>
8
+ <li>Second nested list item</li>
9
+ <li>Third nested list item
10
+ <ul>
11
+ <li>Further nested list item</li>
12
+ </ul>
13
+ </li>
14
+ </ul>
15
+ </li>
16
+ <li>Fourth list item</li>
17
+ <li>Fifth list item</li>
18
+ </ul>
19
+
20
+ <h4>Ordered List</h4>
21
+ <ol>
22
+ <li>First list item</li>
23
+ <li>Second list item</li>
24
+ <li>Third list item
25
+ <ol>
26
+ <li>First nested list item</li>
27
+ <li>Second nested list item</li>
28
+ <li>Third nested list item
29
+ <ol>
30
+ <li>Further nested list item</li>
31
+ </ol>
32
+ </li>
33
+ </ol>
34
+ </li>
35
+ <li>Fourth list item</li>
36
+ <li>Fifth list item</li>
37
+ </ol>
38
+
39
+ <h4>Unstyled List</h4>
40
+ <ul class="list-unstyled">
41
+ <li>First list item</li>
42
+ <li>Second list item</li>
43
+ <li>Third list item
44
+ <ul>
45
+ <li>First nested list item</li>
46
+ <li>Second nested list item</li>
47
+ <li>Third nested list item
48
+ <ul>
49
+ <li>Further nested list item</li>
50
+ </ul>
51
+ </li>
52
+ </ul>
53
+ </li>
54
+ <li>Fourth list item</li>
55
+ <li>Fifth list item</li>
56
+ </ul>
57
+
58
+ <br>
59
+ <h4>Inline List</h4>
60
+ <ul class="list-inline">
61
+ <li>Inline list item one</li>
62
+ <li>Inline list item two</li>
63
+ <li>Inline list item three</li>
64
+ </ul>
@@ -0,0 +1,36 @@
1
+ <p>Monochromatic colors to be used in UI</p>
2
+
3
+ <ul class="sg-colors list-unstyled">
4
+ <li>
5
+ <span class="sg-swatch swatch-white"></span>
6
+ <span class="sg-label">$white</span>
7
+ </li>
8
+ <li>
9
+ <span class="sg-swatch swatch-off-white"></span>
10
+ <span class="sg-label">$off-white</span>
11
+ </li>
12
+ <li>
13
+ <span class="sg-swatch swatch-gray-lighter"></span>
14
+ <span class="sg-label">$gray-lighter</span>
15
+ </li>
16
+ <li>
17
+ <span class="sg-swatch swatch-gray-light"></span>
18
+ <span class="sg-label">$gray-light</span>
19
+ </li>
20
+ <li>
21
+ <span class="sg-swatch swatch-gray"></span>
22
+ <span class="sg-label">$gray</span>
23
+ </li>
24
+ <li>
25
+ <span class="sg-swatch swatch-gray-dark"></span>
26
+ <span class="sg-label">$gray-dark</span>
27
+ </li>
28
+ <li>
29
+ <span class="sg-swatch swatch-gray-darker"></span>
30
+ <span class="sg-label">$gray-darker</span>
31
+ </li>
32
+ <li>
33
+ <span class="sg-swatch swatch-black"></span>
34
+ <span class="sg-label">$black</span>
35
+ </li>
36
+ </ul>
@@ -0,0 +1,26 @@
1
+ <ul class="sg-colors list-unstyled">
2
+ <li>
3
+ <span class="sg-swatch swatch-brand-primary"></span>
4
+ <span class="sg-label">$brand-primary</span>
5
+ </li>
6
+ <li>
7
+ <span class="sg-swatch swatch-brand-primary-light"></span>
8
+ <span class="sg-label">$brand-primary-light</span>
9
+ </li>
10
+ <li>
11
+ <span class="sg-swatch swatch-brand-info"></span>
12
+ <span class="sg-label">$brand-info</span>
13
+ </li>
14
+ <li>
15
+ <span class="sg-swatch swatch-brand-success"></span>
16
+ <span class="sg-label">$brand-success</span>
17
+ </li>
18
+ <li>
19
+ <span class="sg-swatch swatch-brand-warning"></span>
20
+ <span class="sg-label">$brand-warning</span>
21
+ </li>
22
+ <li>
23
+ <span class="sg-swatch swatch-brand-danger"></span>
24
+ <span class="sg-label">$brand-danger</span>
25
+ </li>
26
+ </ul>
@@ -0,0 +1,38 @@
1
+ <ul class="sg-colors list-unstyled">
2
+ <li>
3
+ <span class="sg-swatch swatch-gradient-brand-primary"></span>
4
+ <span class="sg-label">gradient-brand-primary</span>
5
+ </li>
6
+ <li>
7
+ <span class="sg-swatch swatch-gradient-gray-light"></span>
8
+ <span class="sg-label">gradient-gray-light</span>
9
+ </li>
10
+ <li>
11
+ <span class="sg-swatch swatch-gradient-gray"></span>
12
+ <span class="sg-label">gradient-gray</span>
13
+ </li>
14
+ <li>
15
+ <span class="sg-swatch swatch-gradient-gray-dark"></span>
16
+ <span class="sg-label">gradient-gray-dark</span>
17
+ </li>
18
+ <li>
19
+ <span class="sg-swatch swatch-gradient-gray-darker"></span>
20
+ <span class="sg-label">gradient-gray-darker</span>
21
+ </li>
22
+ <li>
23
+ <span class="sg-swatch swatch-gradient-brand-info"></span>
24
+ <span class="sg-label">gradient-brand-info</span>
25
+ </li>
26
+ <li>
27
+ <span class="sg-swatch swatch-gradient-brand-success"></span>
28
+ <span class="sg-label">gradient-brand-success</span>
29
+ </li>
30
+ <li>
31
+ <span class="sg-swatch swatch-gradient-brand-warning"></span>
32
+ <span class="sg-label">gradient-brand-warning</span>
33
+ </li>
34
+ <li>
35
+ <span class="sg-swatch swatch-gradient-brand-danger"></span>
36
+ <span class="sg-label">gradient-brand-danger</span>
37
+ </li>
38
+ </ul>
@@ -0,0 +1,7 @@
1
+ <ul class="list-unstyled">
2
+ <li><button class="btn">Default Button</button></li>
3
+ <li><button class="btn btn-alt">Alternate Button</button></li>
4
+ <li><button class="btn btn-white">White Button</button></li>
5
+ <li><button class="btn btn-disabled">Disabled Button</button></li>
6
+ <li><button class="btn btn-text">Text Button</button></li>
7
+ </ul>