-
Notifications
You must be signed in to change notification settings - Fork 0
/
craytesting.html
149 lines (147 loc) · 5.28 KB
/
craytesting.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
<link rel="stylesheet"href="cray.css">
<script src="jquery-slim.min.js"></script>
<html>
<head>
<title>CrayCSS Documentation</title>
</head>
<body>
<h1>Typography</h1>
All text is changed to the Roboto font!
<br>
<br>
Use the class <a class="big">big</a> to get big text!
<br>
<br>
Use the class <a class="medium">medium</a> to get medium sized text!
<br>
<br>
Use the class <a class="small">small</a> to get smaller text!
<br>
<br>
Use the class <a class="extra-small">extra-small</a> to get even smaller text!
<br>
<br>
Use the code tag to get a code differentiator.
<br>
<code>see me? You can tell this apart from regular text right?</code>
<br>
<br>
All headers have the Roboto font similar to all other text.
<br>
<br>
<h1 style="display:inline !important">Roboto</h1>
<h2 style="display:inline !important">Robot</h2>
<h3 style="display:inline !important">Robo</h3>
<h4 style="display:inline !important">Rob</h4>
<h5 style="display:inline !important">Ro</h5>
<h6 style="display:inline !important">R</h6>
<small class="text-muted">Use a text-muted class with a small tag to get this effect</small>
<br>
<strong>Don't forget sub-headings or bold text with the strong tag</strong>
<br>
<br>
<br>
Displays from Bootstrap. We implemented displays so that switching over from Bootstrap to Cray is easy.
<br>
<a class="display-1">display-1 </a>
<a class="display-2">display-2 </a>
<a class="display-3">display-3 </a>
<a class="display-4">display-4 </a>
<a class="display-5">display-5 </a>
<a class="display-6">display-6 </a>
<br>
<br>
Use a blockquote tag for a styled blockquote.
<br>
<blockquote>
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
<h1>Buttons</h1>
Use the class "btn" on a button tag to get a button.
<br>
<button class="btn" onclick="this.blur();">btn</button>
<br>
Use the class "btn" on an input with <code>type="button"</code> to get a button.
<br>
<input type="button" class="btn" value="btn"></input>
<br>
<br>
There are different colored buttons such as "btn, btn-bad, btn-okay, btn-good, btn-dark, and btn-light"
<br>
<button class="btn">btn</button> <button class="btn btn-bad">btn-bad</button></button> <button class="btn btn-okay">btn-okay</button><button class="btn btn-good">btn-good</button><button class="btn btn-dark">btn-dark</button><button class="btn btn-light">btn-light</button>
<br>
<br>
Outline only buttons are a thing too! Use the classes inside of the buttons!
<br>
<button class="btn btn-outline">btn btn-outline</button> <button class="btn btn-bad-outline">btn-bad btn-bad-outline</button></button> <button class="btn btn-okay-outline">btn-okay btn-okay-outline</button><button class="btn btn-good-outline">btn-good btn-good-outline</button>
<h1>Boxes</h1>
Put stuff into boxes as containers.
<div class="box">
This is a div with the class="box"
</div>
<br>
<br>
Put stuff in boxes and take up the whole screen.
<div class="box-whole">
This is a div with the class="box-whole"
</div>
<br>
<br>
<h1>Inputs</h1>
<br>
For a styled input box, use <code>class="imp"</code>
<br>
<br>
<input placeholder="class='imp'" class="inp" />
<br>
<br>
For a styled checkbox, use <code>class="cbox"</code>
<br>
<br>
<input type="checkbox" class="cbox">
<br>
<br>
<h1>Badges</h1>
Use the <code>class "badge"</code> in a span to get a badge.
<br>
<br>
<span class="badge">class="badge"</span>
<br>
<br>
Use these classes to change the color:
<br>
<br>
<span class="badge badge-default">badge badge-default</span>
<span class="badge badge-bad">badge badge-bad</span>
<span class="badge badge-okay">badge badge-okay</span>
<span class="badge badge-good">badge badge-good</span>
<span class="badge badge-light">badge badge-light</span>
<br>
<br>
<h1>Alerts</h1>
Use the <code>class="alert"</code> in a div to get an alert.
<br>
<div class="alert">class="alert"></div>
<br>
Use these classes to change the color of the alert:
<br>
<br>
<div class="alert alert-default">class="alert alert-default"</div>
<div class="alert alert-bad">class="alert alert-bad"</div>
<div class="alert alert-okay">class="alert alert-okay"</div>
<div class="alert alert-good">class="alert alert-good"</div>
<div class="alert alert-light">class="alert alert-light"</div>
<br><br>
Use the <code>avatar</code> class to turn a regular image into an avatar:
<img src=testimages/test_avatar.jpg class='avatar avatar-xl'>
<img src=testimages/test_avatar.jpg class='avatar avatar-lg'>
<img src=testimages/test_avatar.jpg class='avatar avatar-m'>
<img src=testimages/test_avatar.jpg class='avatar avatar-sm'><br>
Use the classes <code>avatar-xl</code>, <code>avatar-lg</code>, <code>avatar-m</code>, <code>avatar-sm</code> to change the sizes of the avatars respectively. <strong>Using the <code>avatar</code> class only will not change the size of the avatar, it will keep the image the same size! Using only an avatar size class will not turn it into an avatar, it will only change the size of the image, not round it out like an avatar. <br>
Use the <code>sq-avatar</code> class instead of the <code>avatar</code> class to make the avatar more squared than rounded.
<img src=testimages/test_avatar.jpg class='sq-avatar avatar-xl'>
<img src=testimages/test_avatar.jpg class='sq-avatar avatar-lg'>
<img src=testimages/test_avatar.jpg class='sq-avatar avatar-m'>
<img src=testimages/test_avatar.jpg class='sq-avatar avatar-sm'>
</body>
</html>