-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
194 lines (169 loc) · 8.53 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html>
<head>
<title>Sample Page | protoType</title>
<link rel="stylesheet" type="text/css" href="public/simple-bundle.css">
</head>
<body>
<div class="container">
<div class="column">
<h1>ProtoType CSS Starter kit</h1>
<p class="lede">A breakdown of the components included</p>
<h2>Type Styles</h2>
<p>These common text elements have some default sizing and have the margin and width of the main text block. Also, there's no default h4, because I rarely find that you need one, but feel free to add it in. </p>
<h1>h1: Headline 1</h1>
<h2>h2: Headline 2</h2>
<h3>h3: Headline 3</h3>
<br>
<ul>
<li>Bulleted list</li>
<li>
List styles are setup
<ul>
<li>to be</li>
<li>nestable.</li>
</ul>
</li>
</ul>
<br>
<ol>
<li>Ordered</li>
<li>List</li>
</ol>
<p>There's also a default <a href="http://www.google.com">link style</a> using a border instead of underline. You may have strong feelings about this though...</p>
<p class="center-text">A utility class to center-align text.</p>
<p>And a paragraph style for drop-caps:</p>
<p class="drop">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<hr class="txt-column">
<h2>Images</h2>
<p>Going to show off the image styles with this pretty lion photo from unsplash.</p>
<h3>Size to text column</h3>
<img class="txt-column" src="img/test-2.jpg">
<h3>Float Right</h3>
<img class="img-right" src="img/test-2.jpg" style="max-width: 350px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>Float Left</h3>
<img class="img-left" src="img/test-2.jpg" style="max-width: 350px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3 class="center-text">Centered but not constrained to the main text column</h3>
<img class="img-center" src="img/test-2.jpg">
<h2>A simple grid system for tiling images.</h2>
<p>No media queries to break-down the grid, so add as necessary.</p>
<div class="grid-container">
<div class="grid">
<div class="threecol">
<img src="img/test-2.jpg">
</div>
<div class="threecol">
<img src="img/test-2.jpg">
</div>
<div class="threecol">
<img src="img/test-2.jpg">
</div>
</div>
</div>
<p>The 'tight' class can be added to reduce the space between grid element.</p>
<div class="grid-container">
<div class="grid tight">
<div class="fourcol">
<img src="img/test-2.jpg">
</div>
<div class="fourcol">
<img src="img/test-2.jpg">
</div>
<div class="fourcol">
<img src="img/test-2.jpg">
</div>
<div class="fourcol">
<img src="img/test-2.jpg">
</div>
</div>
</div>
<p>Or the 'nopad' class to remove all space.</p>
<div class="grid-container">
<div class="grid nopad">
<div class="sixcol">
<img src="img/test-2.jpg">
</div>
<div class="sixcol">
<img src="img/test-2.jpg">
</div>
</div>
<div class="grid nopad">
<div class="threecol">
<img src="img/test-2.jpg">
</div>
<div class="threecol">
<img src="img/test-2.jpg">
</div>
<div class="threecol">
<img src="img/test-2.jpg">
</div>
</div>
</div>
</div>
</div>
<p class="center-text" style="padding:0 20px;">A full-bleed image outside of the containing divs</p>
<img src="img/test-2.jpg" class="img-full-bleed">
<div class="container background-image center-text" style="padding-top: 12rem; padding-bottom: 12rem; background-image: url('img/test-2.jpg')">
<div class="column" >
<h2>A container with a background image</h2>
<p>Inline styles are used for padding and setting the image, but these can be written into the stylesheets as well if used consistently</p>
</div>
</div>
<div class="container">
<div class="column">
<hr class="txt-column">
<h2>Blockquotes</h2>
<p>A variety of options for quote styles. These are mostly with pull-quotes in mind more so than academic blockquote style. </p>
<p>The default style bolds text. Size to text column.</p>
<blockquote class="txt-column">
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor”
</blockquote>
<p>Don't fit to text column. Center text. Add a background.</p>
<blockquote class="center-text background">
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor”
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<h3>Float Right</h3>
<blockquote class="right background ">
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor”
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>Float Left</h3>
<blockquote class="left background ">
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor”
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>Border Style</h3>
<blockquote class=" border txt-column">
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor”
</blockquote>
<hr class="txt-column">
<h2>A simple code style</h2>
<pre class="txt-column" ><code>code {
font-size: 90%;
line-height: 1.2em;
font-family: Monaco, Consolas, "Andale Mono";
display: inline;
color: #555555;
padding: 1em 1em;
background: #f4f4f4;
}
</code></pre>
<hr class="txt-column">
<h2>Some hr Styles</h2>
<p>These are all center-aligned by default, but that can be changed.</p>
<p>Full width</p>
<hr>
<p>Text-block size</p>
<hr class="txt-column">
<p>The following use an :after selector. Internet Explorer does not allow this on an hr element, so a div can be used instead.</p>
<p>Small</p>
<div class="small"></div>
<p>Ellipses</p>
<div class="ellipses"></div>
</div>
</div>
</body>
</html>