Root Variables

The default fonts and colors are in the global root for easy editing. The default font is -apple-system,BlinkMacSystemFont but you can change this by overriding the root variable: --font-default. The default font for monospace elements is SFMono-Regular. And the default background color is white. but again, you can override these easily to your own liking.

:root {
  --primary:rgb(51,195,240); /*#33c3f0*/
  --danger:rgb(239,50,91); /*#ef325b*/
  --success:rgb(50,239,135); /*#32ef87*/
  --secondary:rgb(85,85,85); /*#555*/
  --tertiary:rgb(223,223,223); /*#dfdfdf*/

  --black:rgb(34,34,34); /*#222*/
  --white:rgb(255,255,255); /*#fff*/
  --light-grey:rgb(247,247,247); /*#f7f7f7*/
  --highlight:rgb(239,239,50); /*#efef32*/

  --background-color:var(--white);
  --border-color:var(--tertiary);
  --font-color:var(--black);
  --table-highlight:var(--light-grey);
  --font-default:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-monospace:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,"Courier New",monospace;
}

Override the defaults by providing new variable values.

<style>:root {
  --background-color:rgb(200,50,80); /* New Background Color */
  --font-default:"Comic Sans"; /* New font */
}</style>

<code> This is some code. System.out.println("Code!");

<pre><code>
public static void main(String args[]) {
     System.out.println("This is a code block.");
     System.exit(0);
}
</code></pre>

Add the third-party library, Highlight.js, to easily colorize the code syntax.

Columns

Use the row and columns classes together to organize content into grids. The values start from one and go up to twelve across. They also resize automatically for smaller screens at the 640px mark.

<div class="row">
    <div class="three columns">
        <h2>This is a quarter-width column.</h2>
    </div>
    <div class="six columns">
        <h2>This is column is half-width.</h2>
    </div>
    <div class="three columns">
        <h2>This is a quarter-width column.</h2>
    </div>
</div>
<div class="row">
    <div class="twelve columns">
        <h2>This is a full-width column.</h2>
    </div>
</div>

Tables

Tables are unstyled by default. Add the table class to style them.

You can further style tables with row-borders row-alternating column-borders column-alternating row-first row-last column-first column-last text-center margin padding and more! More utility classes are available and described in the utility section below.

<table class="table border row-borders row-alternating text-center">
    <!-- column-borders column-alternating -->
    <!-- first-row last-row first-column last-column -->
    <caption>Row borders and Row alternating</caption>
    <thead>
        <tr><th>Header</th><th>Header</th><th>Header</th><th>Header</th></tr>
    </thead>
    <tbody>
        <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
    </tbody>
</table>

Buttons

Use the button class for styling anchors, inputs, tabs, or regular links to look like a button. Osseous also provides five alternative buttons like primary, secondary, tertiary, success, and danger.

<div class="row padding">
  <a class="button">Anchor</a>
  <button class="button">Button</button>
  <input class="button" type="button" value="Input Button" />
</div>
<div class="row padding">
  <button class="button button-primary">Primary</button>
  <button class="button button-secondary">Secondary</button>
  <button class="button button-tertiary">Tertiary</button>
  <button class="button button-success">Success</button>
  <button class="button button-danger">Danger</button>
</div>
<div class="row padding">
  <button class="button button-primary full-width">Full Width Button</button>
</div>
<div class="row padding">
  <button class="button" disabled title="Disabled Button">Disabled</button>
  <button class="button button-small">Button-Small</button>
  <button class="button button-large">Button-Large</button>
</div>

Tabs

Tabs behave like buttons. Add the tabs parent class and tab class for an child item. Add more styling with other elements like button or padding if you like.

<div class="tabs border-left border-right border-top" style="background-color:var(--light-grey)">
  <a class="tab" href="#tabs">Tab</a>
  <a class="tab button button-primary" href="#tabs">Tab Primary</a>
  <a class="tab button button-secondary" href="#tabs">Tab Secondary</a>
</div>
<div class="border padding">
  <p>Note: Tab content like this, can be hidden/shown through JavaScript functions, hidden toggle checkbox,
    or by separating content over separate pages.</code></p>
</div>

Dropdowns

Use the dropdown class for a hiding menus or additional actions that appear when hovered or clicked. Content that should appear should be wrapped in the dropdown-body class.

<div class="dropdown padding" onclick="">Dropdown &#9662;
  <div class="dropdown-body border text-left">
    <a href="#dropdowns" class="">Link 1</a>
    <a href="#dropdowns" class="">Link 2</a>
    <a href="#dropdowns" class="">Link 3</a>
  </div>
</div>
<div class="dropdown padding" onclick="">Dropdown-Tooltip
  <div class="dropdown-body border round">
    <span class="text-small text-nowrap">This is kinda like a tooltip!</span>
  </div>
</div>
<div class="dropdown padding text-medium" onclick="">&#9776;
  <div class="dropdown-body shadow round">
    <span class="text-small text-nowrap">Shadow outline instead of a border.</span>
  </div>
</div>

<div class="button dropdown" onclick="">Dropdown &#9662;
  <div class="dropdown-body border">
    <a href="#dropdowns" class="">Action 1</a>
    <a href="#dropdowns" class="">Action 2</a>
    <a href="#dropdowns" class="">Action 3</a>
  </div>
</div>
<div class="button button-primary dropdown square" onclick="">
  <span class="padding-right border-right">Reply</span><span class="padding-left">&#9660;</span>
  <div class="dropdown-body border round">
    <button class="button button-primary full-width text-nowrap">Reply</button>
    <button class="button full-width text-nowrap">Reply All</button>
  </div>
  <div class="button button-danger dropdown" onclick="">&#8416;
    <div class="dropdown-body padding-none">
      <button class="button button-danger text-nowrap">Are you sure?</button>
    </div>
  </div>
</div>

Note: The dropdown does not require JavaScript to work.

Forms

Forms are essential to any website. Osseous gives you enough styling for each input type, and using columns. Wrap your input fields with a parent form or div with class="form" to stylize as Osseous form inputs.

Forms can be structured with row and columns to easily group fields together. Don't forget the form class though.

<div class="form row">
  <div class="three columns">
    <label for="in1" class="">Text Input</label>
    <input type="text" id="in1" value="12345" />
  </div>
  <div class="three columns">
    <label for="in2" class="">Password Input</label>
    <input type="password" id="in2" value="12345" />
  </div>
  <div class="three columns">
    <label for="in3" class="">Email Input</label>
    <input type="email" id="in3" placeholder="[email protected]" />
  </div>
  <div class="three columns">
    <label for="ind1" class="">Disabled Input</label>
    <input type="text" id="ind1" value="disabled" disabled />
  </div>
</div>
<div class="form row padding-top">
  <div class="three columns">
    <label for="in4" class="">Date Input</label>
    <input type="date" id="in4" value="12/01/2017" />
  </div>
  <div class="three columns">
    <label for="in5" class="">Time Input</label>
    <input type="time" id="in5" value="12:30 AM" />
  </div>
  <div class="three columns">
    <label for="in6" class="">Telephone Input</label>
    <input type="tel" id="in6" placeholder="xxx-xxx-xxxx" />
  </div>
  <div class="three columns">
    <label for="ind2" class="">Readonly Input</label>
    <input type="text" id="ind2" value="readonly" readonly />
  </div>
</div>
<div class="form row padding-top">
  <label for="in8" class="">Text Input with Full Width</label>
  <input type="text" id="in8" class="full-width" value="1234567890" />
</div>
<div class="form row padding-top">
  <label for="t1" class="">Textarea with Full Width</label>
  <textarea id="t1" class="full-width" placeholder="Hello..."></textarea>
</div>
<div class="form row padding-top">
  <div class="four columns">
    <input type="checkbox" id="c1" value="1" checked="checked" />
    <label for="c1">Checkbox</label>

    <input type="checkbox" id="c2" value="2" checked="checked" />
    <label for="c2">Checkbox</label>

    <input type="checkbox" id="c3" value="3" />
    <label for="c3">Checkbox</label>

    <input type="checkbox" id="c4" value="4" disabled />
    <label for="c4">Checkbox Disabled</label>

    <input type="checkbox" id="c5" value="5" checked readonly />
    <label for="c5">Checkbox Readonly</label>
  </div>
  <div class="four columns">
    <input type="radio" id="r1" name="radiogroup" value="1" />
    <label for="r1">Radio</label>

    <input type="radio" id="r2" name="radiogroup" value="2" />
    <label for="r2">Radio</label>

    <input type="radio" id="r3" name="radiogroup" value="3" />
    <label for="r3">Radio</label>

    <input type="radio" id="r4" name="radiogroup" value="4" disabled />
    <label for="r4">Radio Disabled</label>

    <input type="radio" id="r5" name="radiogroup2" value="5" checked readonly />
    <label for="r5">Radio Readonly</label>
  </div>
  <div class="four columns">
    <label for="s1">Select Box</label>
    <select class="full-width" id="s1">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
      <option value="6">Option 6</option>
    </select>
    <br/><br/>
    <label for="s2">Select Disabled</label>
    <select class="full-width" id="s2" disabled>
      <option value="1">Option 1</option>
    </select>
  </div>
</div>

You can make nice box forms with additional layout classes, such as offset-by columns, borders, and padding. More utility classes are explained in the Utility section.

<form method="post" action="#" class="form">
  <div class="row">
  <div class="four columns offset-by-four padding-large border round">
    <h4>Login</h4>
    <div class="row">
      <input class="full-width" placeholder="Username" id="input3" type="text" />
      <input class="full-width margin-top" placeholder="Password" id="input4" type="password" />
    </div>
    <div class="row padding-top padding-bottom border-bottom text-center">
      <a href="javascript:void(0);" class="text-small">Forgot Username</a> <a href="javascript:void(0);" class="text-small">/ Password?</a>
    </div>
    <div class="row padding-top margin-top">
      <input type="button" class="button button-primary full-width" type="submit" value="Login" />
    </div>
  </div>
  </div>
</form>

Also, you can use fieldset and legend tags, to group content together.

<div class="form row">
  <div class="six columns">
  <fieldset>
    <legend>Helpdesk Contact Information</legend>
    <label for="field1">Email Address</label>
    <input class="full-width" id="field1" type="email" value="[email protected]" />

    <label for="field2" class="">Emergency Telephone</label>
    <input class="full-width" id="field2" type="text" value="517-123-1000" />
  </fieldset>
  </div>
  <div class="six columns">
  <fieldset>
    <legend>HR Contact Information</legend>
    <label for="field3">Email Address</label>
    <input class="full-width" id="field3" type="email" value="[email protected]" />

    <label for="field4" class="">Daytime Telephone</label>
    <input class="full-width" id="field4" type="text" value="517-123-1489" />
  </fieldset>
  </div>
</div>

Navbar

Use the navbar for a fixed navigation bar on the top of the page.

Take a look at this page's navbar for the example.

<nav id="navbar" class="border-bottom">
    <div id="navbar-body" class="container">
        <div class="nav-item-logo">
            <a href="#"><span class="text-medium text-thin text-uppercase text-wide">Website</span></a>
        </div>

        <div class="nav-small-menu">
            <a class="nav-item" title="Open Menu">
                <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M0 7h16v2H0V7zm0-6h16v2H0V1zm0 12h16v2H0v-2z" fill-rule="evenodd"></path></svg>
            </a>
        </div>

        <div class="nav-group nav-large-menu">
            <a class="nav-item" href="#download">Download</a>
            <a class="nav-item" href="#docs">Docs</a>
            <a class="nav-item" href="#about">About</a>
        </div>

    </div>
</nav>

The nav-large-menu will hide on small screens. While the nav-small-menu will show up in its place. You can even add dropdown items to add sub-menus.

In this example, the small menu just contains one element; A menu icon that opens the Sidebar.

Sidebar

Use the #sidebar for mobile navigation bar on the left side. But be sure to provide the "sidebar" id for it, so that it can use the hidden checkbox toggle to work.

<input type="checkbox" id="toggleSidebar" style="display: none;">
<nav id="sidebar" class="border-right shadow-right">
    <div class="nav-item-close">
      <label class="clickable" for="toggleSidebar">
        <span class="float-right" title="Close Menu" aria-label="Close">
            <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M2.757 14.657L8 9.414l5.243 5.243 1.414-1.414L9.414 8l5.243-5.243-1.414-1.414L8 6.586 2.757 1.343 1.343 2.757 6.586 8l-5.243 5.243z" fill-rule="evenodd"></path></svg>
        </span>
      </label>
    </div>
    <div class="nav-list text-center">
        <a class="nav-item" href="#download">Download</a>
        <a class="nav-item" href="#docs">Docs</a>
        <a class="nav-item" href="#about">About</a>
    </div>
</nav>

Note: The sidebar does not require JavaScript to work.

Utility Classes

Osseous comes with some useful classes you can use to help do formatting or simple text changes. These can be margin/padding/borders, or text bolding/size/alignment. You'll find the naming convention is quite simple.

<article class="container">

    <div class="section">
        <h2>What is it?</h2>
        <p>Osseous is a small CSS framework...</p>
    </div>

</article>

You can always add more of your own utilities, and other features, on top of Osseous too!