psique 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +14 -0
- data/Gemfile +5 -0
- data/LICENSE +22 -0
- data/README.md +2 -0
- data/Rakefile +34 -0
- data/assets/fonts/psique/roboto-bold.eot +0 -0
- data/assets/fonts/psique/roboto-bold.svg +593 -0
- data/assets/fonts/psique/roboto-bold.ttf +0 -0
- data/assets/fonts/psique/roboto-bold.woff +0 -0
- data/assets/fonts/psique/roboto-regular.eot +0 -0
- data/assets/fonts/psique/roboto-regular.svg +621 -0
- data/assets/fonts/psique/roboto-regular.ttf +0 -0
- data/assets/fonts/psique/roboto-regular.woff +0 -0
- data/assets/fonts/psique/sourcesanspro-bold.eot +0 -0
- data/assets/fonts/psique/sourcesanspro-bold.svg +954 -0
- data/assets/fonts/psique/sourcesanspro-bold.ttf +0 -0
- data/assets/fonts/psique/sourcesanspro-bold.woff +0 -0
- data/assets/fonts/psique/sourcesanspro-regular.eot +0 -0
- data/assets/fonts/psique/sourcesanspro-regular.svg +977 -0
- data/assets/fonts/psique/sourcesanspro-regular.ttf +0 -0
- data/assets/fonts/psique/sourcesanspro-regular.woff +0 -0
- data/assets/images/psique/.keep +0 -0
- data/assets/javascripts/psique.js.coffee +2 -0
- data/assets/javascripts/psique/panels.js.coffee +7 -0
- data/assets/stylesheets/psique.scss +19 -0
- data/assets/stylesheets/psique/_buttons.scss +222 -0
- data/assets/stylesheets/psique/_forms.scss +92 -0
- data/assets/stylesheets/psique/_grid.scss +20 -0
- data/assets/stylesheets/psique/_lists.scss +160 -0
- data/assets/stylesheets/psique/_mixins.scss +69 -0
- data/assets/stylesheets/psique/_panels.scss +148 -0
- data/assets/stylesheets/psique/_settings.scss +127 -0
- data/assets/stylesheets/psique/_summaries.scss +188 -0
- data/assets/stylesheets/psique/_typography.scss +70 -0
- data/doc/assets/_footer.html +7 -0
- data/doc/assets/_header.html +66 -0
- data/doc/assets/brick.png +0 -0
- data/doc/assets/css/doc.css +132 -0
- data/doc/assets/css/github.css +61 -0
- data/doc/assets/css/screen.css +16 -0
- data/doc/assets/script/components.js +89 -0
- data/doc/public/styleguide/brick.png +0 -0
- data/doc/public/styleguide/components.html +593 -0
- data/doc/public/styleguide/core.html +105 -0
- data/doc/public/styleguide/css/doc.css +132 -0
- data/doc/public/styleguide/css/github.css +61 -0
- data/doc/public/styleguide/css/screen.css +16 -0
- data/doc/public/styleguide/index.html +105 -0
- data/doc/public/styleguide/script/components.js +89 -0
- data/hologram_config.yml +28 -0
- data/lib/psique.rb +8 -0
- data/lib/psique/engine.rb +17 -0
- data/lib/psique/version.rb +3 -0
- data/psique.gemspec +33 -0
- data/test/dummy/README.rdoc +3 -0
- data/test/dummy/Rakefile +6 -0
- data/test/dummy/app/assets/images/.keep +0 -0
- data/test/dummy/app/assets/javascripts/application.js +2 -0
- data/test/dummy/app/assets/stylesheets/application.css.scss +1 -0
- data/test/dummy/app/controllers/application_controller.rb +5 -0
- data/test/dummy/app/controllers/styleguide_controller.rb +4 -0
- data/test/dummy/app/views/layouts/application.html.haml +15 -0
- data/test/dummy/app/views/styleguide/index.html.haml +17 -0
- data/test/dummy/bin/bundle +3 -0
- data/test/dummy/bin/rails +4 -0
- data/test/dummy/bin/rake +4 -0
- data/test/dummy/config.ru +4 -0
- data/test/dummy/config/application.rb +10 -0
- data/test/dummy/config/boot.rb +5 -0
- data/test/dummy/config/database.yml +25 -0
- data/test/dummy/config/environment.rb +5 -0
- data/test/dummy/config/environments/development.rb +37 -0
- data/test/dummy/config/environments/production.rb +78 -0
- data/test/dummy/config/environments/test.rb +39 -0
- data/test/dummy/config/initializers/assets.rb +8 -0
- data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
- data/test/dummy/config/initializers/cookies_serializer.rb +3 -0
- data/test/dummy/config/initializers/filter_parameter_logging.rb +4 -0
- data/test/dummy/config/initializers/inflections.rb +16 -0
- data/test/dummy/config/initializers/mime_types.rb +4 -0
- data/test/dummy/config/initializers/session_store.rb +3 -0
- data/test/dummy/config/initializers/wrap_parameters.rb +14 -0
- data/test/dummy/config/locales/en.yml +23 -0
- data/test/dummy/config/routes.rb +3 -0
- data/test/dummy/config/secrets.yml +22 -0
- data/test/psique_test.rb +7 -0
- data/test/test_helper.rb +15 -0
- metadata +1185 -0
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>My Style Guide Core</title>
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
|
+
<link rel="shortcut icon" href="./brick.png" />
|
|
7
|
+
|
|
8
|
+
<!-- Styleguide CSS -->
|
|
9
|
+
<link rel="stylesheet" href="/styleguide/css/doc.css">
|
|
10
|
+
<link rel="stylesheet" href="/styleguide/css/github.css">
|
|
11
|
+
<link rel="stylesheet" href="/styleguide/css/screen.css">
|
|
12
|
+
|
|
13
|
+
<!-- CSS to be documented -->
|
|
14
|
+
<link rel="stylesheet" href="/assets/psique.scss">
|
|
15
|
+
|
|
16
|
+
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
|
17
|
+
<!--[if lt IE 9]>
|
|
18
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
|
|
19
|
+
<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|
20
|
+
<![endif]-->
|
|
21
|
+
|
|
22
|
+
<!-- Main libraries -->
|
|
23
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
|
24
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
|
|
25
|
+
<script src="/styleguide/script/components.js"></script>
|
|
26
|
+
<script src="/assets/psique.js"></script>
|
|
27
|
+
</head>
|
|
28
|
+
|
|
29
|
+
<body class="styleguide">
|
|
30
|
+
<header class="header pbn" role="banner">
|
|
31
|
+
<div class="backgroundHighlight typeReversed1">
|
|
32
|
+
<div class="container">
|
|
33
|
+
<h1 class="h2 mvs">My Style Guide</h1>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="backgroundLowlight typeReversed1">
|
|
37
|
+
<div class="container">
|
|
38
|
+
<span>
|
|
39
|
+
<ul class="docNav listInline">
|
|
40
|
+
|
|
41
|
+
<li><a href="/styleguide/components.html">Components</a></li>
|
|
42
|
+
|
|
43
|
+
<li><a href="/styleguide/core.html">Core</a></li>
|
|
44
|
+
|
|
45
|
+
</ul>
|
|
46
|
+
</span>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
<!-- //header/container -->
|
|
50
|
+
</header>
|
|
51
|
+
|
|
52
|
+
<div class="content">
|
|
53
|
+
<section class="container">
|
|
54
|
+
<div class="line">
|
|
55
|
+
|
|
56
|
+
<div class="col cols4">
|
|
57
|
+
<div class="componentMenu box boxBasic backgroundBasic">
|
|
58
|
+
<div class="boxBody pan">
|
|
59
|
+
<ul class="componentList listBorderedHover">
|
|
60
|
+
|
|
61
|
+
<li><a href="#typography">Typography</a></li>
|
|
62
|
+
|
|
63
|
+
</ul>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<div class="main col cols20 lastCol">
|
|
69
|
+
<h1 id="typography">Typography</h1>
|
|
70
|
+
|
|
71
|
+
<p><br/></p>
|
|
72
|
+
|
|
73
|
+
<h2>Headings</h2>
|
|
74
|
+
|
|
75
|
+
<p>All HTML headings, <code><h1></code> through <code><h6></code>, are available.</p>
|
|
76
|
+
|
|
77
|
+
<h1>H1. Lorem ipsum dolor sit amet, consectetur adipisicing</h1>
|
|
78
|
+
|
|
79
|
+
<h2>H2. Lorem ipsum dolor sit amet, consectetur adipisicing</h2>
|
|
80
|
+
|
|
81
|
+
<h3>H3. Lorem ipsum dolor sit amet, consectetur adipisicing</h3>
|
|
82
|
+
|
|
83
|
+
<h4>H4. Lorem ipsum dolor sit amet, consectetur adipisicing</h4>
|
|
84
|
+
|
|
85
|
+
<h5>H5. Lorem ipsum dolor sit amet, consectetur adipisicing</h5>
|
|
86
|
+
|
|
87
|
+
<h6>H6. Lorem ipsum dolor sit amet, consectetur adipisicing</h6>
|
|
88
|
+
|
|
89
|
+
<p><br/></p>
|
|
90
|
+
|
|
91
|
+
<h2>Body copy</h2>
|
|
92
|
+
|
|
93
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
94
|
+
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
95
|
+
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
96
|
+
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
97
|
+
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
|
98
|
+
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
99
|
+
</section>
|
|
100
|
+
<footer>
|
|
101
|
+
<p>This documentation generated using <a href="http://github.com/trulia/hologram">Hologram</a>
|
|
102
|
+
</footer>
|
|
103
|
+
</div>
|
|
104
|
+
</body>
|
|
105
|
+
</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,61 @@
|
|
|
1
|
+
hll { background-color: #ffffcc }
|
|
2
|
+
.c { color: #999988; font-style: italic } /* Comment */
|
|
3
|
+
.err { color: #a61717; background-color: #e3d2d2 } /* Error */
|
|
4
|
+
.k { color: #000000; font-weight: bold } /* Keyword */
|
|
5
|
+
.o { color: #000000; font-weight: bold } /* Operator */
|
|
6
|
+
.cm { color: #999988; font-style: italic } /* Comment.Multiline */
|
|
7
|
+
.cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
|
|
8
|
+
.c1 { color: #999988; font-style: italic } /* Comment.Single */
|
|
9
|
+
.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
|
|
10
|
+
.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
|
|
11
|
+
.ge { color: #000000; font-style: italic } /* Generic.Emph */
|
|
12
|
+
.gr { color: #aa0000 } /* Generic.Error */
|
|
13
|
+
.gh { color: #999999 } /* Generic.Heading */
|
|
14
|
+
.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
|
|
15
|
+
.go { color: #888888 } /* Generic.Output */
|
|
16
|
+
.gp { color: #555555 } /* Generic.Prompt */
|
|
17
|
+
.gs { font-weight: bold } /* Generic.Strong */
|
|
18
|
+
.gu { color: #aaaaaa } /* Generic.Subheading */
|
|
19
|
+
.gt { color: #aa0000 } /* Generic.Traceback */
|
|
20
|
+
.kc { color: #000000; font-weight: bold } /* Keyword.Constant */
|
|
21
|
+
.kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
|
|
22
|
+
.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
|
|
23
|
+
.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
|
|
24
|
+
.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
|
|
25
|
+
.kt { color: #445588; font-weight: bold } /* Keyword.Type */
|
|
26
|
+
.m { color: #009999 } /* Literal.Number */
|
|
27
|
+
.s { color: #d01040 } /* Literal.String */
|
|
28
|
+
.na { color: #008080 } /* Name.Attribute */
|
|
29
|
+
.nb { color: #0086B3 } /* Name.Builtin */
|
|
30
|
+
.nc { color: #445588; font-weight: bold } /* Name.Class */
|
|
31
|
+
.no { color: #008080 } /* Name.Constant */
|
|
32
|
+
.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
|
|
33
|
+
.ni { color: #800080 } /* Name.Entity */
|
|
34
|
+
.ne { color: #990000; font-weight: bold } /* Name.Exception */
|
|
35
|
+
.nf { color: #990000; font-weight: bold } /* Name.Function */
|
|
36
|
+
.nl { color: #990000; font-weight: bold } /* Name.Label */
|
|
37
|
+
.nn { color: #555555 } /* Name.Namespace */
|
|
38
|
+
.nt { color: #000080 } /* Name.Tag */
|
|
39
|
+
.nv { color: #008080 } /* Name.Variable */
|
|
40
|
+
.ow { color: #000000; font-weight: bold } /* Operator.Word */
|
|
41
|
+
.w { color: #bbbbbb } /* Text.Whitespace */
|
|
42
|
+
.mf { color: #009999 } /* Literal.Number.Float */
|
|
43
|
+
.mh { color: #009999 } /* Literal.Number.Hex */
|
|
44
|
+
.mi { color: #009999 } /* Literal.Number.Integer */
|
|
45
|
+
.mo { color: #009999 } /* Literal.Number.Oct */
|
|
46
|
+
.sb { color: #d01040 } /* Literal.String.Backtick */
|
|
47
|
+
.sc { color: #d01040 } /* Literal.String.Char */
|
|
48
|
+
.sd { color: #d01040 } /* Literal.String.Doc */
|
|
49
|
+
.s2 { color: #d01040 } /* Literal.String.Double */
|
|
50
|
+
.se { color: #d01040 } /* Literal.String.Escape */
|
|
51
|
+
.sh { color: #d01040 } /* Literal.String.Heredoc */
|
|
52
|
+
.si { color: #d01040 } /* Literal.String.Interpol */
|
|
53
|
+
.sx { color: #d01040 } /* Literal.String.Other */
|
|
54
|
+
.sr { color: #009926 } /* Literal.String.Regex */
|
|
55
|
+
.s1 { color: #d01040 } /* Literal.String.Single */
|
|
56
|
+
.ss { color: #990073 } /* Literal.String.Symbol */
|
|
57
|
+
.bp { color: #999999 } /* Name.Builtin.Pseudo */
|
|
58
|
+
.vc { color: #008080 } /* Name.Variable.Class */
|
|
59
|
+
.vg { color: #008080 } /* Name.Variable.Global */
|
|
60
|
+
.vi { color: #008080 } /* Name.Variable.Instance */
|
|
61
|
+
.il { color: #009999 } /* Literal.Number.Integer.Long */
|
|
@@ -0,0 +1,16 @@
|
|
|
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}
|
|
2
|
+
|
|
3
|
+
.styleguide .exampleOutput .summary.medium,
|
|
4
|
+
.styleguide .exampleOutput .summary.new,
|
|
5
|
+
.styleguide .exampleOutput .summary.default {
|
|
6
|
+
width: 50%;
|
|
7
|
+
}
|
|
8
|
+
.styleguide .exampleOutput .summary.featured {
|
|
9
|
+
width: 70%;
|
|
10
|
+
}
|
|
11
|
+
.styleguide .exampleOutput .summary {
|
|
12
|
+
margin-bottom: 2em;
|
|
13
|
+
}
|
|
14
|
+
.styleguide .exampleOutput .panel {
|
|
15
|
+
width: 45%;
|
|
16
|
+
}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>My Style Guide Core</title>
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
|
+
<link rel="shortcut icon" href="./brick.png" />
|
|
7
|
+
|
|
8
|
+
<!-- Styleguide CSS -->
|
|
9
|
+
<link rel="stylesheet" href="/styleguide/css/doc.css">
|
|
10
|
+
<link rel="stylesheet" href="/styleguide/css/github.css">
|
|
11
|
+
<link rel="stylesheet" href="/styleguide/css/screen.css">
|
|
12
|
+
|
|
13
|
+
<!-- CSS to be documented -->
|
|
14
|
+
<link rel="stylesheet" href="/assets/psique.scss">
|
|
15
|
+
|
|
16
|
+
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
|
17
|
+
<!--[if lt IE 9]>
|
|
18
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
|
|
19
|
+
<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|
20
|
+
<![endif]-->
|
|
21
|
+
|
|
22
|
+
<!-- Main libraries -->
|
|
23
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
|
24
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
|
|
25
|
+
<script src="/styleguide/script/components.js"></script>
|
|
26
|
+
<script src="/assets/psique.js"></script>
|
|
27
|
+
</head>
|
|
28
|
+
|
|
29
|
+
<body class="styleguide">
|
|
30
|
+
<header class="header pbn" role="banner">
|
|
31
|
+
<div class="backgroundHighlight typeReversed1">
|
|
32
|
+
<div class="container">
|
|
33
|
+
<h1 class="h2 mvs">My Style Guide</h1>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="backgroundLowlight typeReversed1">
|
|
37
|
+
<div class="container">
|
|
38
|
+
<span>
|
|
39
|
+
<ul class="docNav listInline">
|
|
40
|
+
|
|
41
|
+
<li><a href="/styleguide/components.html">Components</a></li>
|
|
42
|
+
|
|
43
|
+
<li><a href="/styleguide/core.html">Core</a></li>
|
|
44
|
+
|
|
45
|
+
</ul>
|
|
46
|
+
</span>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
<!-- //header/container -->
|
|
50
|
+
</header>
|
|
51
|
+
|
|
52
|
+
<div class="content">
|
|
53
|
+
<section class="container">
|
|
54
|
+
<div class="line">
|
|
55
|
+
|
|
56
|
+
<div class="col cols4">
|
|
57
|
+
<div class="componentMenu box boxBasic backgroundBasic">
|
|
58
|
+
<div class="boxBody pan">
|
|
59
|
+
<ul class="componentList listBorderedHover">
|
|
60
|
+
|
|
61
|
+
<li><a href="#typography">Typography</a></li>
|
|
62
|
+
|
|
63
|
+
</ul>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<div class="main col cols20 lastCol">
|
|
69
|
+
<h1 id="typography">Typography</h1>
|
|
70
|
+
|
|
71
|
+
<p><br/></p>
|
|
72
|
+
|
|
73
|
+
<h2>Headings</h2>
|
|
74
|
+
|
|
75
|
+
<p>All HTML headings, <code><h1></code> through <code><h6></code>, are available.</p>
|
|
76
|
+
|
|
77
|
+
<h1>H1. Lorem ipsum dolor sit amet, consectetur adipisicing</h1>
|
|
78
|
+
|
|
79
|
+
<h2>H2. Lorem ipsum dolor sit amet, consectetur adipisicing</h2>
|
|
80
|
+
|
|
81
|
+
<h3>H3. Lorem ipsum dolor sit amet, consectetur adipisicing</h3>
|
|
82
|
+
|
|
83
|
+
<h4>H4. Lorem ipsum dolor sit amet, consectetur adipisicing</h4>
|
|
84
|
+
|
|
85
|
+
<h5>H5. Lorem ipsum dolor sit amet, consectetur adipisicing</h5>
|
|
86
|
+
|
|
87
|
+
<h6>H6. Lorem ipsum dolor sit amet, consectetur adipisicing</h6>
|
|
88
|
+
|
|
89
|
+
<p><br/></p>
|
|
90
|
+
|
|
91
|
+
<h2>Body copy</h2>
|
|
92
|
+
|
|
93
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
94
|
+
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
95
|
+
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
96
|
+
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
97
|
+
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
|
98
|
+
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
99
|
+
</section>
|
|
100
|
+
<footer>
|
|
101
|
+
<p>This documentation generated using <a href="http://github.com/trulia/hologram">Hologram</a>
|
|
102
|
+
</footer>
|
|
103
|
+
</div>
|
|
104
|
+
</body>
|
|
105
|
+
</html>
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
(function ($) {
|
|
2
|
+
var setArrow = function ($el) {
|
|
3
|
+
if ($el.hasClass('toggleArrow'))
|
|
4
|
+
{
|
|
5
|
+
$el.toggleClass('toggleArrowActive');
|
|
6
|
+
}
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
var methods = {
|
|
10
|
+
init: function () {
|
|
11
|
+
return this.each(function () {
|
|
12
|
+
if ($(this).data('toggleInit') !== true) {
|
|
13
|
+
//Prevent multiple initializations
|
|
14
|
+
$(this).data('toggleInit', true);
|
|
15
|
+
|
|
16
|
+
$(this).click(function (event) {
|
|
17
|
+
event.preventDefault();
|
|
18
|
+
methods.toggle.apply(this);
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
},
|
|
23
|
+
|
|
24
|
+
toggle: function (activate) {
|
|
25
|
+
return $(this).each(function () {
|
|
26
|
+
var $toggle,
|
|
27
|
+
data,
|
|
28
|
+
container,
|
|
29
|
+
toggled = false;
|
|
30
|
+
|
|
31
|
+
$toggle = $(this);
|
|
32
|
+
|
|
33
|
+
container = $($toggle.attr('href'));
|
|
34
|
+
|
|
35
|
+
if (activate || activate === false)
|
|
36
|
+
{
|
|
37
|
+
// forced state toggle
|
|
38
|
+
toggled = container.hasClass('hideVisually') === activate;
|
|
39
|
+
$toggle.toggleClass('toggleActive', activate);
|
|
40
|
+
container.toggleClass('hideVisually', !activate);
|
|
41
|
+
}
|
|
42
|
+
else
|
|
43
|
+
{
|
|
44
|
+
// toggle
|
|
45
|
+
toggled = true;
|
|
46
|
+
$toggle.toggleClass('toggleActive');
|
|
47
|
+
container.toggleClass('hideVisually');
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
if (toggled)
|
|
51
|
+
{
|
|
52
|
+
// update arrow status
|
|
53
|
+
setArrow($toggle);
|
|
54
|
+
|
|
55
|
+
// update the label
|
|
56
|
+
data = $toggle.data();
|
|
57
|
+
if (data.toggleText) {
|
|
58
|
+
var show = data.toggleText;
|
|
59
|
+
|
|
60
|
+
//store our current text
|
|
61
|
+
$toggle.data('toggleText', $toggle.text());
|
|
62
|
+
|
|
63
|
+
//switch to our toggle text
|
|
64
|
+
$toggle.text(show);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
$toggle.trigger('toggle', [(activate || $toggle.hasClass('toggleActive'))]);
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
$.fn.truliaToggle = function (method) {
|
|
75
|
+
if (typeof method === 'string' && typeof methods[method] === 'function')
|
|
76
|
+
{
|
|
77
|
+
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
|
|
78
|
+
}
|
|
79
|
+
else if (typeof method === 'object' || !method)
|
|
80
|
+
{
|
|
81
|
+
return methods.init.apply(this, arguments);
|
|
82
|
+
}
|
|
83
|
+
else
|
|
84
|
+
{
|
|
85
|
+
$.error('Method ' + method + ' does not exist on jQuery.truliaToggle');
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
}(jQuery));
|