Skip to content

Commit 6bd898c

Browse files
dmolsendmolsen
committed
src files
1 parent b72c136 commit 6bd898c

File tree

9 files changed

+376
-4
lines changed

9 files changed

+376
-4
lines changed

‎src/css/prism-okaidia.css

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
/**
2+
* okaidia theme for JavaScript, CSS and HTML
3+
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
4+
* @author ocodia
5+
*/
6+
7+
code[class*="language-"],
8+
pre[class*="language-"] {
9+
color: #f8f8f2;
10+
text-shadow: 0 1px rgba(0,0,0,0.3);
11+
font-family: Consolas, Monaco, 'Andale Mono', monospace;
12+
direction: ltr;
13+
text-align: left;
14+
white-space: pre;
15+
word-spacing: normal;
16+
word-break: normal;
17+
18+
-moz-tab-size: 4;
19+
-o-tab-size: 4;
20+
tab-size: 4;
21+
22+
-webkit-hyphens: none;
23+
-moz-hyphens: none;
24+
-ms-hyphens: none;
25+
hyphens: none;
26+
}
27+
28+
/* Code blocks */
29+
pre[class*="language-"] {
30+
padding: 1em;
31+
margin: .5em 0;
32+
overflow: auto;
33+
border-radius: 0.3em;
34+
}
35+
36+
:not(pre) > code[class*="language-"],
37+
pre[class*="language-"] {
38+
background: #272822;
39+
}
40+
41+
/* Inline code */
42+
:not(pre) > code[class*="language-"] {
43+
padding: .1em;
44+
border-radius: .3em;
45+
}
46+
47+
.token.comment,
48+
.token.prolog,
49+
.token.doctype,
50+
.token.cdata {
51+
color: slategray;
52+
}
53+
54+
.token.punctuation {
55+
color: #f8f8f2;
56+
}
57+
58+
.namespace {
59+
opacity: .7;
60+
}
61+
62+
.token.property,
63+
.token.tag,
64+
.token.constant,
65+
.token.symbol {
66+
color: #f92672;
67+
}
68+
69+
.token.boolean,
70+
.token.number{
71+
color: #ae81ff;
72+
}
73+
74+
.token.selector,
75+
.token.attr-name,
76+
.token.string,
77+
.token.builtin {
78+
color: #a6e22e;
79+
}
80+
81+
82+
.token.operator,
83+
.token.entity,
84+
.token.url,
85+
.language-css .token.string,
86+
.style .token.string,
87+
.token.variable {
88+
color: #f8f8f2;
89+
}
90+
91+
.token.atrule,
92+
.token.attr-value
93+
{
94+
color: #e6db74;
95+
}
96+
97+
98+
.token.keyword{
99+
color: #66d9ef;
100+
}
101+
102+
.token.regex,
103+
.token.important {
104+
color: #fd971f;
105+
}
106+
107+
.token.important {
108+
font-weight: bold;
109+
}
110+
111+
.token.entity {
112+
cursor: help;
113+
}

‎src/css/typeahead.scss renamed to ‎src/css/typeahead.css

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
/* NOT ACTUALLY USING SASS HERE... YET */
2-
31
#sg-find {
42
color: #000;
53
text-transform: lowercase;

‎src/fonts/icomoon.eot

3.78 KB
Binary file not shown.

‎src/fonts/icomoon.svg

Lines changed: 22 additions & 0 deletions
Loading

‎src/fonts/icomoon.ttf

3.62 KB
Binary file not shown.

‎src/fonts/icomoon.woff

3.07 KB
Binary file not shown.

‎src/html/index.html

Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
1+
<!DOCTYPE html>
2+
<html id="patternlab-html">
3+
<head id="patternlab-head">
4+
5+
<title id="title">Pattern Lab</title>
6+
<meta charset="UTF-8">
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+
<!-- handle the viewport -->
16+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
17+
18+
<!-- load the pattern lab css -->
19+
<link rel="stylesheet" href="styleguide/css/styleguide.css" media="all" />
20+
<link rel="stylesheet" href="styleguide/css/styleguide-specific.css" media="all" />
21+
22+
<!-- load the external library css -->
23+
<link rel="stylesheet" href="styleguide/css/typeahead.css" media="all" />
24+
<link rel="stylesheet" href="styleguide/bower_components/prism/themes/prism-okaidia.css" media="all" />
25+
26+
<!-- not sure why jquery is loaded here... -->
27+
<script src="styleguide/bower_components/jquery/dist/jquery.min.js"></script>
28+
29+
</head>
30+
<body id="patternlab-body">
31+
32+
<!--Style Guide Header-->
33+
<header class="sg-header" role="banner">
34+
<a href="#sg-nav-container" class="sg-nav-toggle"><span class="icon-menu"></span>Menu</a>
35+
<div class="sg-nav-container" id="sg-nav-container">
36+
<ol class="sg-nav" id="pl-pattern-nav-target"><!-- pattern lab nav is going to be inserted here --></ol>
37+
<div class="sg-controls" id="sg-controls"><!-- ish Controls are going to be inserted here --></div>
38+
</div>
39+
</header>
40+
<!--End Style Guide Header-->
41+
42+
<!-- iFrame -->
43+
<div id="sg-vp-wrap">
44+
<div id="sg-cover"></div>
45+
<div id="sg-gen-container">
46+
<iframe id="sg-viewport" name="sg-viewport" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
47+
<div id="sg-rightpull-container">
48+
<div id="sg-rightpull"></div>
49+
</div>
50+
</div>
51+
</div>
52+
<!--end iFrame-->
53+
54+
<!-- mustache templates -->
55+
<script type="text/mustache" id="pl-pattern-nav-template">
56+
{{# patternTypes }}
57+
<li class="sg-nav-{{ patternTypeLC }}"><a class="sg-acc-handle">{{ patternTypeUC }}</a><ol class="sg-acc-panel">
58+
{{# patternTypeItems }}
59+
<li class="sg-nav-{{ patternSubtypeLC }}"><a class="sg-acc-handle">{{ patternSubtypeUC }}</a><ol class="sg-acc-panel sg-sub-nav">
60+
{{# patternSubtypeItems }}
61+
<li><a href="patterns/{{ patternPath }}" class="sg-pop {{# patternState }}sg-pattern-state {{ . }}{{/ patternState }}" data-patternpartial="{{ patternPartial }}">{{ patternName }}</a></li>
62+
{{/ patternSubtypeItems }}
63+
</ol></li>
64+
{{/ patternTypeItems }}
65+
{{# patternItems }}
66+
<li><a href="patterns/{{ patternPath }}" class="sg-pop {{# patternState }}sg-pattern-state {{ . }}{{/ patternState }}" data-patternpartial="{{ patternPartial }}">{{ patternName }}</a></li>
67+
{{/ patternItems }}
68+
</ol></li>
69+
{{/ patternTypes }}
70+
<li><a href="styleguide/html/styleguide.html" class="sg-pop" data-patternpartial="all">All</a></li>
71+
</script>
72+
73+
<script type="text/mustache" id="pl-ish-controls-template">
74+
<div class="sg-control-content">
75+
<ul class="sg-control">
76+
<li class="sg-size">
77+
<div class="sg-current-size">
78+
<form id="sg-form">
79+
Size <input type="text" class="sg-input sg-size-px" value="---">px /
80+
<input type="text" class="sg-input sg-size-em" value="---">em
81+
</form><!--end #sg-form-->
82+
</div><!--end #sg-current-size-->
83+
<ul class="sg-acc-panel sg-size-options">
84+
{{^ ishControlsHide.s }}<li><a href="#" id="sg-size-s">S</a></li>{{/ ishControlsHide.s }}
85+
{{^ ishControlsHide.m }}<li><a href="#" id="sg-size-m">M</a></li>{{/ ishControlsHide.m }}
86+
{{^ ishControlsHide.l }}<li><a href="#" id="sg-size-l">L</a></li>{{/ ishControlsHide.l }}
87+
{{^ ishControlsHide.full }}<li><a href="#" id="sg-size-full">Full</a></li>{{/ ishControlsHide.full }}
88+
{{^ ishControlsHide.random }}<li><a href="#" id="sg-size-random">Random</a></li>{{/ ishControlsHide.random }}
89+
{{^ ishControlsHide.disco }}<li><a href="#" class="mode-link" id="sg-size-disco">Disco</a></li>{{/ ishControlsHide.disco }}
90+
{{^ ishControlsHide.hay }}<li><a href="#" class="mode-link" id="sg-size-hay">Hay!</a></li>{{/ ishControlsHide.hay }}
91+
</ul>
92+
</li>
93+
{{^ ishControlsHide.mqs }}
94+
<li class="sg-mqs">
95+
<a href="#" class="mode-link sg-acc-handle" id="sg-size-mq" title="Media queries in stylesheet">MQ</a>
96+
<ul class="sg-acc-panel sg-left" id="sg-mq">
97+
{{# mqs }}
98+
<li><a href="#">{{ . }}</a></li>
99+
{{/ mqs }}
100+
</ul>
101+
</li>
102+
{{/ ishControlsHide.mqs }}
103+
{{^ ishControlsHide.find }}
104+
<li class="sg-find">
105+
<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>
106+
<ul class="sg-view sg-acc-panel sg-right sg-checklist" id="sg-find" style="margin-top: 33px;">
107+
<li><input class="typeahead" id="typeahead" type="text" placeholder="search for a pattern..."></li>
108+
</ul>
109+
</li>
110+
{{/ ishControlsHide.find }}
111+
{{^ ishControlsHide.views-all }}
112+
<li class="sg-view">
113+
<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>
114+
<ul class="sg-view sg-acc-panel sg-right sg-checklist" id="sg-view">
115+
{{^ ishControlsHide.views-annotations }}<li><a href="#" class="sg-checkbox" id="sg-t-annotations">Annotations</a></li>{{/ ishControlsHide.views-annotations }}
116+
{{^ ishControlsHide.views-code }}<li><a href="#" class="sg-checkbox" id="sg-t-code">Code</a></li>{{/ ishControlsHide.views-code }}
117+
{{^ ishControlsHide.views-new }}<li><a href="#" target="_blank" id="sg-raw" class="sg-icon-link">Open in new window</a></li>{{/ ishControlsHide.views-new }}
118+
</ul>
119+
</li>
120+
{{/ ishControlsHide.views-all }}
121+
{{^ ishControlsHide.tools-all }}
122+
<li class="sg-tools">
123+
<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>
124+
<ul class="sg-acc-panel sg-right sg-checklist">
125+
{{^ ishControlsHide.tools-follow }}<li><a href="#" id="navSyncButton" class="sg-checkbox sg-page-follow" data-state="off">Page Follow</a></li>{{/ ishControlsHide.tools-follow }}
126+
{{^ ishControlsHide.tools-reload }}<li><a href="#" id="contentSyncButton" class="sg-checkbox sg-auto-reload" data-state="off">Auto-reload</a></li>{{/ ishControlsHide.tools-reload }}
127+
{{^ ishControlsHide.tools-snapshot }}<li><a href="snapshots/" class="sg-icon-fil sg-acc-handlee" data-patternpartial="snapshots" target="sg-viewport">Snapshots</a></li>{{/ ishControlsHide.tools-snapshot }}
128+
{{^ ishControlsHide.tools-shortcuts }}<li><a href="http://pattern-lab.info/docs/advanced-keyboard-shortcuts.html" class="sg-icon-keyboard" target="_blank">Keyboard Shortcuts</a>{{/ ishControlsHide.tools-shortcuts }}
129+
{{^ ishControlsHide.tools-docs }}<li><a href="http://pattern-lab.info/docs/" class="sg-icon-file" target="_blank">Pattern Lab Docs</a>{{/ ishControlsHide.tools-docs }}
130+
</ul>
131+
</li>
132+
{{/ ishControlsHide.tools-all }}
133+
</ul>
134+
</div>
135+
</script>
136+
137+
<!-- the template for the code view slider -->
138+
<script type="text/mustache" id="pl-code-template">
139+
<div id="sg-code-close" class="sg-view-close">
140+
<a href="#" id="sg-code-close-btn" class="sg-view-close-btn">Close</a>
141+
</div>
142+
<div id="sg-code-loader">
143+
<div class="spinner"></div>
144+
Loading pattern...
145+
</div>
146+
{{# patternStateExists }}
147+
<div id="sg-code-patternstate">
148+
<p>
149+
The state of the <span class="sg-code-patternname">{{ patternName }}</span> pattern is: <span id="sg-code-patternstate-fill"></span>
150+
</p>
151+
</div>
152+
{{/ patternStateExists }}
153+
{{# lineageExists }}
154+
<div id="sg-code-lineage">
155+
<p>
156+
The <span class="sg-code-patternname">{{ patternName }}</span> pattern contains the following patterns:
157+
<span id="sg-code-lineage-fill">
158+
{{# lineage }}
159+
<a href='{{ lineagePath }}' class='{{# lineageState }}sg-pattern-state {{ . }}{{/ lineageState }}' data-patternPartial='{{ lineagePattern }}'>{{ lineagePattern }}</a>
160+
{{/ lineage }}
161+
</span>
162+
</p>
163+
</div>
164+
{{/ lineageExists }}
165+
{{# lineageRExists }}
166+
<div id="sg-code-lineager">
167+
<p>
168+
The <span class="sg-code-patternname">{{ patternName }}</span> pattern is included in the following patterns:
169+
<span id="sg-code-lineager-fill">
170+
{{# lineageR }}
171+
<a href='{{ lineagePath }}' class='{{# lineageState }}sg-pattern-state {{ . }}{{/ lineageState }}' data-patternPartial='{{ lineagePattern }}'>{{ lineagePattern }}</a>
172+
{{/ lineageR }}
173+
</span>
174+
</p>
175+
</div>
176+
{{/ lineageRExists }}
177+
{{# patternDescAdditions }}
178+
{{{ . }}}
179+
{{/ patternDescAdditions }}
180+
<div id="sg-code-markup">
181+
<ul id="sg-code-tabs">
182+
<li id="sg-code-title-html" class="sg-code-title-active">HTML</li>
183+
<li id="sg-code-title-mustache">{{ patternExtension }}</li>
184+
</ul>
185+
<div class="clear">
186+
<pre><code id="sg-code-fill"></code></pre>
187+
</div>
188+
</div>
189+
</script>
190+
191+
<!-- the template for the annotations viewer slider -->
192+
<script type="text/mustache" id="pl-annotations-template">
193+
<div id="sg-annotation-close" class="sg-view-close">
194+
195+
<a href="#" id="sg-annotation-close-btn" class="sg-view-close-btn">Close</a>
196+
197+
<div id="sg-comments-container">
198+
{{# comments }}
199+
<div id="annotation-{{ number }}" class="sg-comment-container">
200+
<h2>{{ number }}. {{ title }} <span id="annotation-state-{{ number }}" style="font-size: 0.8em; color: #666;">{{^ state }}hidden{{/ state }}</span></h2>
201+
<div>{{{ comment }}}</div>
202+
</div>
203+
{{/ comments}}
204+
205+
{{^ comments }}
206+
<div class="sg-comment-container">
207+
<h2>No Annotations</h2>
208+
<div>There are no annotations for this pattern.</div>
209+
</div>
210+
{{/ comments }}
211+
</div>
212+
</div>
213+
</script>
214+
215+
<!-- handle the inclusion of data generated by Pattern Lab-->
216+
<script src="styleguide/data/config.js"></script>
217+
<script src="styleguide/data/nav-items.js"></script>
218+
<script src="styleguide/data/ish-controls.js"></script>
219+
<script src="styleguide/data/pattern-paths.js"></script>
220+
<script src="styleguide/data/viewall-paths.js"></script>
221+
222+
<!-- load the external library js -->
223+
<script src="styleguide/bower_components/hogan/web/builds/3.0.2/hogan-3.0.2.min.js"></script>
224+
<script src="styleguide/bower_components/prism/prism.js"></script>
225+
<script src="styleguide/bower_components/jwerty/jwerty.js"></script>
226+
<script src="styleguide/bower_components/classlist/classList.min.js"></script>
227+
<script src="styleguide/bower_components/typeahead.js/dist/typeahead.bundle.min.js"></script>
228+
229+
<!-- load the pattern lab js -->
230+
<script src="styleguide/js/layout.js"></script>
231+
<script src="styleguide/js/data-saver.js"></script>
232+
<script src="styleguide/js/url-handler.js"></script>
233+
<script src="styleguide/js/styleguide.js"></script>
234+
<script src="styleguide/js/pattern-finder.js"></script>
235+
<script src="styleguide/js/annotations-viewer.js"></script>
236+
<script src="styleguide/js/code-viewer.js"></script>
237+
238+
</body>
239+
</html>

‎src/css/styleguide-specific.scss renamed to ‎src/sass/styleguide-specific.scss

File renamed without changes.

0 commit comments

Comments
 (0)