forked from mattxwang/liteweight
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
164 lines (160 loc) · 8.93 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Liteweight - Components</title>
<link rel="stylesheet" type="text/css" href="css/liteweight.css">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1 class="title title-1">Liteweight</h1>
<p class="text"><a href="https://matthewwang.me/">Matthew Wang</a> and <a href="http://obrien.tech">Nick O'Brien</a></p>
<div class="card card-full">
<h1 class="title title-1">Typography</h1>
<h1 class="title title-1">Heading 1 (<code>class="title title-1"</code>)</h1>
<h2 class="title title-2">Heading 2 (<code>class="title title-2"</code>)</h2>
<h3 class="title title-3">Heading 3 (<code>class="title title-3"</code>)</h3>
<h4 class="title title-4">Heading 4 (<code>class="title title-4"</code>)</h4>
<h5 class="title title-5">Heading 5 (<code>class="title title-5"</code>)</h5>
<h6 class="title title-6">Heading 6 (<code>class="title title-6"</code>)</h6>
<p class="text">
The text class is a foundation for more modifier classes. You can change the colour with <code><span class="vc">text-*</span></code> (<code>*</code> referring to all the available colours in <code><span class="sc">$colours</span></code>)
</p>
<p class="text">
<code>
<span class="sc"> p class=</span><span class="vc">"text"</span>
</code>
</p>
<p class="text">
<a href="index.html">Link</a>
<code><span class="sc">a href=</span><span class="vc">"#"</span> </code>
</p>
</div>
<pre class="pre-primary">
<span class="sc">p class=<span class="vc">"text"</span></span> → class "text" needed for proper text styling
<span class="sc">a href=<span class="vc">"index.html"</span></span> → no class needed for hyperlinks
</pre>
<h2 class="title title-2">Cards</h2>
<p class="text">
Cards are a nice class that wraps anything that's inside them. They can contain anything and everything.
</p>
<div class="card">Card</div>
<pre class="pre-primary">
<span class="sc">div class=</span><span class="vc">"card"</span>
</pre>
<div class="card card-full">Card Full</div>
<pre class="pre-primary">
<span class="sc">div class=</span><span class="vc">"card card-full"</span> → card-full adds a light-grey background. You can customize this is liteweight/variables.scss with <span class="sc">$background-light</span>
</pre>
<div class="card card-bg-primary">Card background (primary)</div>
<pre class="pre-primary">
<span class="sc">div class=</span><span class="vc">"card card-bg-*"</span> → <span class="sc">*</span> referring to the colours in <span class="sc">$colours</span>
</pre>
<div class="card card-bordered-primary">Card Bordered (primary)</div>
<pre class="pre-primary">
<span class="sc">div class=</span><span class="vc">"card card-bordered-*"</span> → <span class="sc">*</span> referring to the colours in <span class="sc">$colours</span>
</pre>
<div class="card card-bordered-primary">
<h2 class="title title-2">Text</h2>
<h3 class="title title-3">Lists</h3>
<ul class="list-unstyled">
<li>This</li>
<li>list</li>
<li>is</li>
<li>unstyled</li>
<li><code><span class="sc">ul class=</span><span class="vc">"list-unstyled"</span></code></li>
</ul>
</div>
<h2 class="title title-2">Left, Right, and Center Text</h2>
The following classes can be used with <code><span class="sc">div</span></code> to modify their position.
<div class="text-left"><pre class="pre-primary">text-left</pre></div>
<div class="text-center"><pre class="pre-primary">text-center</pre></div>
<div class="text-right"><pre class="pre-primary">text-right</pre></div>
<h2 class="title title-2">Navbar</h2>
<p class="text">
Just in case you need to add navigation, here is a simple navbar. (As of now there are no breakpoints, Will be updated soon)
</p>
<nav class="nav">
<ul class="nav-list">
<li class="nav-item active"><a>Item</a></li>
<li class="nav-item"><a>Item</a></li>
<li class="nav-item"><a>Item</a></li>
<li class="nav-item"><a>Item</a></li>
</ul>
</nav>
<pre class="pre-primary">
<<span class="sc">nav class=</span><span class="vc">"nav"</span>>
<<span class="sc">ul class=</span><span class="vc">"nav-list"</span>>
<<span class="sc">li class=</span><span class="vc">"nav-item active"</span>><<span class="sc">a</span>>Item</<span class="sc">a</span>></<span class="sc">li</span>>
<<span class="sc">li class=</span><span class="vc">"nav-item</span>><<span class="sc">a</span>>Item</<span class="sc">a</span>></<span class="sc">li</span>>
<<span class="sc">li class=</span><span class="vc">"nav-item</span>><<span class="sc">a</span>>Item</<span class="sc">a</span>></<span class="sc">li</span>>
<<span class="sc">li class=</span><span class="vc">"nav-item</span>><<span class="sc">a</span>>Item</<span class="sc">a</span>></<span class="sc">li</span>>
</<span class="sc">ul</span>>
</<span class="sc">nav</span>>
</pre>
<ul class="v-nav">
<li class="v-nav-item"><a>Vertical navbar item</a></li>
<li class="v-nav-item"><a>Vertical navbar item</a></li>
<li class="v-nav-item"><a>Vertical navbar item</a></li>
<li class="v-nav-item"><a>Vertical navbar item</a></li>
</ul>
<pre class="pre-primary">
<<span class="sc">ul class=</span><span class="vc">"v-nav"</span>>
<<span class="sc">li class=</span><span class="vc">"v-nav-item"</span>><<span class="sc">a</span>>Vertical navbar item</<span class="sc">a</span>></<span class="sc">li</span>>
<<span class="sc">li class=</span><span class="vc">"v-nav-item"</span>><<span class="sc">a</span>>Vertical navbar item</<span class="sc">a</span>></<span class="sc">li</span>>
<<span class="sc">li class=</span><span class="vc">"v-nav-item"</span>><<span class="sc">a</span>>Vertical navbar item</<span class="sc">a</span>></<span class="sc">li</span>>
<<span class="sc">li class=</span><span class="vc">"v-nav-item"</span>><<span class="sc">a</span>>Vertical navbar item</<span class="sc">a</span>></<span class="sc">li</span>>
</<span class="sc">ul</span>>
</pre>
<div class="card card-full">
<h2 class="title title-2">Image</h2>
<p class="text">Just a handy-dandy responsive image class</p>
<img class="block-responsive" src="https://malsf21.github.io/liteweight/img/dmcs.png" alt="Really Cool Logo" />
<pre class="pre-primary">
<<span class="sc">img class=</span><span class="vc">"block-responsive"</span> <span class="sc">src=</span><span class="vc">"#"</span>>
</pre>
</div>
<div class="card card-full">
<h1 class="title title-1">Dropdowns and buttons</h1>
<h2 class="title title-2">Dropdowns</h2>
<p class="text">Available in all colours and works with most classes</p>
<div class="dropdown">
<a class="button button-liteweight-primary">Mouse over me</a>
<div class="dropdown-content">
<ul class="list-unstyled">
<li><a>Dropdown link</a></li>
<li><a>Dropdown link</a></li>
<li><a>Dropdown link</a></li>
<li><a>Dropdown link</a></li>
</ul>
</div>
</div>
<pre class="pre-primary">
<<span class="sc">div class=</span><span class="vc">"dropdown"</span>>
<<span class="sc">a class=</span><span class="vc">"button button-liteweight-primary"</span>>Mouse over me</<span class="sc">a</span>>
<<span class="sc">div class=</span><span class="vc">"dropdown-content"</span>>
<<span class="sc">ul class=</span><span class="vc">"list-unstyled"</span>>
<<span class="sc">li</span>><<span class="sc">a</span>>Dropdown link</<span class="sc">a</span>></<span class="sc">li</span>>
<<span class="sc">li</span>><<span class="sc">a</span>>Dropdown link</<span class="sc">a</span>></<span class="sc">li</span>>
<<span class="sc">li</span>><<span class="sc">a</span>>Dropdown link</<span class="sc">a</span>></<span class="sc">li</span>>
<<span class="sc">li</span>><<span class="sc">a</span>>Dropdown link</<span class="sc">a</span>></<span class="sc">li</span>>
</<span class="sc">ul</span>>
</<span class="sc">div</span>>
</<span class="sc">div</span>>
</pre>
<h2 class="title title-2">Buttons</h2>
<p>Also available in all colours</p>
<pre class="pre-primary">
<<span class="sc">a class=</span><span class="vc">"button button-liteweight-primary"</span>>Button</<span class="sc">a</span>>
</pre>
<a class="button button-liteweight-primary">Button</a>
<a class="button button-liteweight-secondary">Button</a>
<a class="button button-liteweight-success">Button</a>
<a class="button button-liteweight-danger">Button</a>
<a class="button button-liteweight-caution">Button</a>
<a class="button button-liteweight-info">Button</a>
</div>
</body>
</html>