craytesting.html

<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>