-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
165 lines (143 loc) · 6.04 KB
/
index.html
File metadata and controls
165 lines (143 loc) · 6.04 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="bootstrap-spacing.css">
</head>
<body>
<div class="container spacer spacer-xl">
<h1 class="title padding padding-left-right">
Bootstrap Whitespace Manager <br /><span class="text-thin">Bootsrap Spacing</span>
</h1>
<p class="padding padding-off-left padding-md">A truck load of classes to help give control spacing and whitespace with a Boostrap site, continually overiding or hacking at Bootstrap.<br /> It's goal is to help deveopers stop using .row and .col-xs-12 for the spacing they desire. </p>
<div class="header margin margin-lg-top margin-lg-bottom padding padding-lg-bottom hairline hairline-bottom">
<h2 class="margin margin-off-bottom padding padding-off-bottom">Padding</h2>
</div>
<div class="row">
<div class="col-sm-3 ">
<div style=""
class="padding-sm bg-faded-5">
padding-sm
</div>
</div>
<div class="col-sm-3 ">
<div style=""
class="padding-md bg-faded-5">
padding-md
</div>
</div>
<div class="col-sm-3 ">
<div
class="padding-lg bg-faded-5">
padding-lg
</div>
</div>
<div class="col-sm-3 ">
<div
class="padding-xl bg-faded-5">
padding-xl
</div>
</div>
</div>
<div class="header margin margin-lg-top margin-lg-bottom padding padding-lg-bottom hairline hairline-bottom">
<h2 class="margin margin-off-bottom padding padding-off-bottom">Margin</h2>
</div>
<div class="row">
<div class="col-sm-3 ">
<div style=""
class="margin-sm-top bg-faded-5 padding-md">
margin-sm-top
</div>
</div>
<div class="col-sm-3 ">
<div style=""
class="margin-md-top bg-faded-5 padding-md">
margin-md-top
</div>
</div>
<div class="col-sm-3 ">
<div
class="margin-lg-top bg-faded-5 padding-md">
margin-lg-top
</div>
</div>
<div class="col-sm-3 ">
<div
class="margin-xl-top bg-faded-5 padding-md">
margin-xl-top
</div>
</div>
</div>
</div>
<hr class="spacer spacer-xl">
<div class="container padding-xl-bottom">
<h1 class="text-xl text-thin text-center margin-off-bottom"><span class="text-faded-40">UNIQUE</span> TEXT</h1>
<h2 class="margin-off-top text-lg margin-lg-bottom text-bold text-faded-20 text-center">WITHOUT ANY <span class="text-primary">CSS</span></h2>
<p class="text-center margin-lg-left margin-lg-right margin-xl-bottom hairline-bottom padding-lg-bottom">Now you can have a wide range of text sizes and styles just with classes! <br />Sure HTML purists will hate this, but once you embrace Bootstraps verbose class names. It's kind of fun. </p>
<p>
Let's have some <span class="text-lg text-strong">FUN</span> with <span class="text-xl text-thin">FONTS!</span>
</p>
<h3>Text Sizes</h3>
<dl class="bg-info padding-md padding-lg-left">
<dt class="text-xxs">.text-xxs</dt>
<dt class="text-xs">.text-xs</dt>
<dt class="text-sm">.text-sm</dt>
<dt class="text-md">.text-md</dt>
<dt class="text-lg">.text-lg</dt>
<dt class="text-xl">.text-xl</dt>
<dt class="text-xxl">.text-xxl</dt>
</dl>
<p><span class="text-sm">.text-sm to make it small</span> or <span class="text-lg">.text-lg to make it Bigger</span>.
We also have a <span class="text-lg"><span class="text-bold">.text-bold</span> and a <span class="text-thin">.text-thin</span></sapn><br /><br />
<div class="text-uppercase text-sm text-faded hairline-top hairline-bottom padding-sm text-center bg-faded-10">This is a test of a long line that's supposed to look all professional and the like</div>
<h2 class="padding-md-bottom margin-md-bottom margin-xl-top hairline-bottom">Smooth Fades Dude!</h2>
<div class="row">
<div class="col-sm-4">
<dl class="bg-info padding-md padding-lg-left">
<dt class="text-bold">Available Fades</dt>
<dt class="text-faded-90">.text-faded-90</dt>
<dt class="text-faded-80">.text-faded-80</dt>
<dt class="text-faded-70">.text-faded-70</dt>
<dt class="text-faded-60">.text-faded-60</dt>
<dt class="text-faded-50">.text-faded-50</dt>
<dt class="text-faded-40">.text-faded-40</dt>
<dt class="text-faded-30">.text-faded-30</dt>
<dt class="text-faded-20">.text-faded-20</dt>
<dt class="text-faded-10">.text-faded-10</dt>
</dl>
</div>
<div class="col-sm-4">
<dl class="bg-primary padding-md padding-lg-left">
<dt class="text-bold">Inverse Fades</dt>
<dt class="text-faded-inverse-90">.text-faded-inverse-90</dt>
<dt class="text-faded-inverse-80">.text-faded-inverse-80</dt>
<dt class="text-faded-inverse-70">.text-faded-inverse-70</dt>
<dt class="text-faded-inverse-60">.text-faded-inverse-60</dt>
<dt class="text-faded-inverse-50">.text-faded-inverse-50</dt>
<dt class="text-faded-inverse-40">.text-faded-inverse-40</dt>
<dt class="text-faded-inverse-30">.text-faded-inverse-30</dt>
<dt class="text-faded-inverse-20">.text-faded-inverse-20</dt>
<dt class="text-faded-inverse-10">.text-faded-inverse-10</dt>
</dl>
</div>
<div class="col-sm-4">
<dl class="padding-md padding-lg-left" style="background-color:#06ab6f">
<dt class="text-bold">Inverse Fades</dt>
<dt class="text-faded-inverse-90">.text-faded-inverse-90</dt>
<dt class="text-faded-inverse-80">.text-faded-inverse-80</dt>
<dt class="text-faded-inverse-70">.text-faded-inverse-70</dt>
<dt class="text-faded-inverse-60">.text-faded-inverse-60</dt>
<dt class="text-faded-inverse-50">.text-faded-inverse-50</dt>
<dt class="text-faded-inverse-40">.text-faded-inverse-40</dt>
<dt class="text-faded-inverse-30">.text-faded-inverse-30</dt>
<dt class="text-faded-inverse-20">.text-faded-inverse-20</dt>
<dt class="text-faded-inverse-10">.text-faded-inverse-10</dt>
</dl>
</div>
</div>
</div>
</body>
</html>