forked from basscss/basscss
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
204 lines (184 loc) · 8.43 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
195
196
197
198
199
200
201
202
203
204
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BASSCSS</title>
<meta name="author" content="Jxnblk">
<meta name="description" content="Minimal CSS/SASS reset, boilerplate, and framework">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="site/style.min.css" />
</head>
<body class="theme">
<header class="responsive reverse">
<div class="relative letterbox measure mxa outline center">
<div class="absolute absolute-center py1 full-width center object-scale transition-all">
<div class="inline-block mb1 border-thick rounded pulsate">
<div class="h0 bold square">B</div>
</div>
<h1 class="h2 blue">BASSCSS</h1>
</div>
</div>
</header>
<main class="px2 py4 measure mxa">
<section class="responsive mb2">
<h2 class="h2 bold mb2">Part reset<br>Part boilerplate<br>Part framework<br>All minimal*</h2>
<p class="p">BASSCSS is a small reset and collection of simple type and layout classes that can be used as the basis for any web project. Use it out of the box or as a base for a larger SASS project.</p>
</section>
<section class="responsive mb4">
<h2 class="p mb1">Get started:</h2>
<div>
<a href="//github.com/jxnblk/basscss" class="btn btn-blue">View on Github</a>
</div>
</section>
<section class="mb2 type-margins">
<h2 class="p responsive">Examples</h2>
<ul class="list-inline">
<li><a href="#responsive-type">Responsive Type</a></li>
<li><a href="#type-margins">Type Margins</a></li>
<li><a href="#type-utilities">Type Utilities</a></li>
<li><a href="#margins">Margins</a></li>
<li><a href="#padding">Padding</a></li>
<li><a href="#floats">Float Utilities</a></li>
<li><a href="#display">Display Utilities</a></li>
<li><a href="#media-object">Media Object</a></li>
</ul>
<article id="responsive-type" class="mb4">
<h1 class="h2 responsive">Mobile-First Responsive Type</h1>
<p class="p responsive">Any <code>.h1</code>, <code>.h2</code>, <code>.p</code>, or <code>.small</code> class with the <code>.responsive</code> class applied to its parent will resize at certain breakpoints.</p>
<div class="responsive mid-gray">
<h1 class="h1">Heading 1</h1>
<h2 class="h2">Heading 2</h2>
<p class="p">Paragraph</p>
<p><small class="small">Small Type</small></p>
</div>
<pre class="p1 mb4 bg-light-gray rounded">
<div class="responsive">
<h1 class="h1">Heading 1</h1>
<h2 class="h2">Heading 2</h2>
<p class="p">Paragraph</p>
<p><small class="small">Small Type</small></p>
</div></pre>
<h2 class="h2 responsive">Selectively Responsive Type</h2>
<p class="p responsive">Selectively applying the <code>.responsive</code> class will only affect that element.</p>
<div class="mid-gray">
<h1 class="h1 responsive">Responsive</h1>
<h2 class="h2">Unresponsive</h2>
<p class="p">Unresponsive paragraph</p>
</div>
<pre class="p1 bg-light-gray rounded">
<div>
<h1 class="h1 responsive">Responsive Heading 1</h1>
<h2 class="h2">Unresponsive Heading 2</h2>
<p class="p">Unresponsive paragraph</p>
</div></pre>
</article>
<article id="type-margins" class="responsive mb4">
<h1 class="h2">Type Margins</h1>
<p class="p">By default all type element's margins are reset to 0. For blocks of copy apply the <code>.type-margins</code> class to automatically add margins to child text elements.</p>
</article>
<article id="type-utilities" class="responsive mb4">
<h1 class="h2">Type Utilities</h1>
<p class="p">Use the type utilities to quickly change the default styling of type elements.</p>
<dl class="p1 bg-light-gray rounded">
<dt><code>.bold</code></dt>
<dd><code>font-weight: bold;</code></dd>
<dt><code>.regular</code></dt>
<dd><code>font-weight: normal;</code></dd>
<dt><code>.caps</code></dt>
<dd><code>text-transform: uppercase; letter-spacing: .2em;</code></dd>
<dt><code>.center</code></dt>
<dd><code>text-align: center;</code></dd>
<dt><code>.right-align</code></dt>
<dd><code>text-align: right;</code></dd>
</dl>
</article>
<article id="margins" class="responsive mb4">
<h1 class="h2">Margin Utilities</h1>
<p class="p">BASSCSS includes a suite of margin utilities to control whitespace. The base unit of spacing can be customized with the <code>$space</code> variable.</p>
<dl class="p1 bg-light-gray rounded">
<dt><code>.m1</code></dt>
<dd><code>margin: 1x</code></dd>
<dt><code>.mt1</code></dt>
<dd><code>margin-top: 1x</code></dd>
<dt><code>.mr1</code></dt>
<dd><code>margin-right: 1x</code></dd>
<dt><code>.mb1</code></dt>
<dd><code>margin-bottom: 1x</code></dd>
<dt><code>.ml1</code></dt>
<dd><code>margin-left: 1x</code></dd>
<dt><code>.m2</code></dt>
<dd><code>margin: 2x</code></dd>
<dt></dt><dd>…</dd>
<dt><code>.ml4</code></dt>
<dd><code>.margin-left: 4x</code></dd>
</dl>
</article>
<article id="padding" class="responsive mb4">
<h1 class="h2">Padding Utilities</h1>
<p class="p">The padding utilities are similar to margin utilities, but only include symmetrical directions.</p>
<dl class="p1 bg-light-gray rounded">
<dt><code>.p1</code></dt>
<dd><code>padding: 1x;</code></dd>
<dt><code>.px1</code></dt>
<dd><code>padding-right: 1x; padding-left: 1x;</code></dd>
<dt><code>.py1</code></dt>
<dd><code>padding-top: 1x; padding-bottom: 1x;</code></dd>
</dl>
</article>
<article id="floats" class="responsive mb4">
<h1 class="h2">Float Utilities</h1>
<p class="p">The set of float utilities are great for common layout cases.</p>
<dl class="p1 bg-light-gray rounded">
<dt><code>.left</code></dt>
<dd><code>float: left;</code></dd>
<dt><code>.right</code></dt>
<dd><code>float: right;</code></dd>
<dt><code>.clearfix</code></dt>
<dd>Used to clear floats</dd>
</dl>
</article>
<article id="display" class="responsive mb4">
<h1 class="h2">Display Utilities</h1>
<p class="p">Useful for changing display properties of elements</p>
<dl class="p1 bg-light-gray rounded">
<dt><code>.inline</code></dt>
<dd><code>display: inline;</code></dd>
<dt><code>.block</code></dt>
<dd><code>display: block;</code></dd>
<dt><code>.inline-block;</code></dt>
<dd><code>display: inline-block;</code></dd>
</dl>
</article>
<article id="media-object" class="responsive mb4">
<h1 class="h2">Media Object</h1>
<p class="p">Using <code>.clearfix</code>, <code>.left</code>, and <code>.mr1</code>, you can create the media object without writing any new CSS.</p>
<div class="clearfix mb2 mid-gray">
<img src="//placehold.it/128" alt="Placeholder Image" class="left mr1" />
<div class="clearfix">
<h2 class="p">Media Object</h2>
<p class="p">With no new CSS written</p>
</div>
</div>
<pre class="p1 bg-light-gray rounded">
<div class="clearfix">
<img src="//placehold.it/128" class="left mr1" />
<div class="clearfix">
<h2 class="p">Media Object</h2>
<p class="p">With no new CSS written</p>
</div>
</div></pre>
</article>
</section>
<section class="type-margins">
<p class="h2">Ready to dive in?</p>
<div>
<a href="//github.com/jxnblk/basscss" class="btn btn-blue">View on Github</a>
</div>
</section>
</main>
<footer class="p2 measure mxa">
<p class="small">Made with love by <a href="//jxnblk.com">Jxnblk</a></p>
<p class="small light-gray">*That's a Robocop reference.</p>
</footer>
</body>
</html>