Banner

Osseous

A bony CSS framework without guts. v1.2.0

This version is archived and no longer maintained.

Download View on GitHub

What is it?

Osseous is a small CSS framework that only includes some (bony) elements to grow a website. Its meant to be a skeleton that you can add additional guts (features) on top of, as you require them. Rather than importing a massive framework and not utilizing all of the features.

What's Included?

  • Typography
  • Columns, Rows, Grid
  • Tables
  • Buttons, Forms, Inputs
  • Dropdowns
  • Navbar
  • Sidebar
  • and extra Utility Classes

What's Missing?

Osseous is Best used for...

Small projects, portfolios, blogs, wikis, and prototypes. By itself, it wouldn't be a good fit for large projects, such as e-commerce, news, SPAs, and responsive webapps. Websites that require all the meat on the bones. However, you could easily add on to this framework to fit your specific needs. Feel free to copy and edit it. (MIT Licensed).

Download

Add Osseous to your project using these links or download the source files.

<link rel="stylesheet" href="https://austindelamar.com/osseous/1.2.0/osseous.min.css">

<!--This tiny JavaScript file is just for the sidebar (mobile menu).-->
<script type="text/javascript" src="https://austindelamar.com/osseous/1.2.0/osseous.min.js"></script>

Optionally, use with subresource integrity checks like so:

<!-- With SRI check: -->
<link rel="stylesheet" href="https://austindelamar.com/osseous/1.2.0/osseous.min.css" integrity="sha384-rhym7x7onta0FmpFTwUdHReuo5MBh61O8MPkSmVPFrWvqKSwKud3zPIkKNrSdQWz" crossorigin="anonymous">
<script src="https://austindelamar.com/osseous/1.2.0/osseous.min.js" integrity="sha384-FAtYvt8ELKf+EkEq6RyCg9jEfZp4N5lQMd8KDx8OTGKWHozg4bjCrjecmmGNR2H2" crossorigin="anonymous"></script>

The links are using Cloudflare CDN for delivery. Use the SRI Hash generator for computing integrity checks for other versions.


Download

v1.2.0 - 14 Dec 2017 - 12KB

Examples

Osseous includes formatting for all the basic elements, and some common features like columns, mobile menus, and dropdowns.

Use the examples below as a reference and demonstration of this bony framework.

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 {
    --red:rgb(239,50,91); /*#ef325b*/
    --light-red:rgb(240,98,128); /*#ef6280*/
    --green:rgb(50,239,135); /*#32ef87*/
    --light-green:rgb(98,240,161); /*#62f0a1*/
    --blue:rgb(51,195,240); /*#33c3f0*/
    --light-blue:rgb(98,206,240); /*#62cef0*/
    --yellow:rgb(239,239,50); /*#efef32*/
    --light-yellow:rgb(239,239,98); /*#efef62*/
    --black:rgb(34,34,34); /*#222*/
    --light-black:rgb(85,85,85); /*#555*/
    --white:rgb(255,255,255); /*#fff*/
    --grey:rgb(223,223,223); /*#dfdfdf*/
    --light-grey:rgb(247,247,247); /*#f7f7f7*/

    --background-color:var(--white); /* Default background color */
    --border-color:var(--grey); /* Default borders color */
    --font-color:var(--black); /* Default font color */
    --table-highlight:var(--light-grey); /* Table alternating color */

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

If you decide to set a background color on the body directly, just know that other elements might not appear correctly, such as Dropdowns.

Typography

<p>This is a paragraph.
<a>This is an anchor.
<b>This is bolded.
<i>This is italic.
<u>This is underlined.
<s>This is striked.
<small>This is a small.
<sup>This is a supersript10 and <sub> subscript10.

This is a <blockquote>
<mark>This is highlighted.
<abbr>This is an abbr.



Heading 1

<h1>

Heading 2

<h2>

Heading 3

<h3>

Heading 4

<h4>
Heading 5
<h5>
Heading 6
<h6>

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

TWELVE
ONE
ELEVEN
TWO
TEN
THREE
NINE
FOUR
EIGHT
FIVE
SEVEN
SIX
SIX
SEVEN
FIVE
EIGHT
FOUR
NINE
THREE
TEN
TWO
ELEVEN
ONE
TWELVE
<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.

Plain Table
Column 1 Column 2 Column 3 Column 4
Row 1Row 1Row 1Row 1
Row 2Row 2Row 2Row 2
Row 3Row 3Row 3Row 3
Row 4Row 4Row 4Row 4
Row alternating and Centered
Column 1 Column 2 Column 3 Column 4
Row 1Row 1Row 1Row 1
Row 2Row 2Row 2Row 2
Row 3Row 3Row 3Row 3
Row 4Row 4Row 4Row 4



Row borders and Row alternating
Column 1 Column 2 Column 3 Column 4
Row 1Row 1Row 1Row 1
Row 2Row 2Row 2Row 2
Row 3Row 3Row 3Row 3
Row 4Row 4Row 4Row 4
Column borders and Column alternating
Column 1 Column 2 Column 3 Column 4
Row 1Row 1Row 1Row 1
Row 2Row 2Row 2Row 2
Row 3Row 3Row 3Row 3
Row 4Row 4Row 4Row 4



First row and First column
Column 1 Column 2 Column 3 Column 4
Row 1Row 1Row 1Row 1
Row 2Row 2Row 2Row 2
Row 3Row 3Row 3Row 3
Row 4Row 4Row 4Row 4
Last row and Last column
Column 1 Column 2 Column 3 Column 4
Row 1Row 1Row 1Row 1
Row 2Row 2Row 2Row 2
Row 3Row 3Row 3Row 3
Row 4Row 4Row 4Row 4
<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>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th></tr>
    </thead>
    <tbody>
        <tr><td>Row 1</td><td>Row 1</td><td>Row 1</td><td>Row 1</td></tr>
        <tr><td>Row 2</td><td>Row 2</td><td>Row 2</td><td>Row 2</td></tr>
        <tr><td>Row 3</td><td>Row 3</td><td>Row 3</td><td>Row 3</td></tr>
        <tr><td>Row 4</td><td>Row 4</td><td>Row 4</td><td>Row 4</td></tr>
    </tbody>
</table>

Buttons

Use the button class for styling anchors, inputs, buttons, to look like a button. And instead of confusing sub-button names like primary, info, warning, or danger... Osseous provides 3 simple colored buttons; red, green, and blue. Which you can also edit the default colors in the :root variables, to match your theme. The button-blue class could mark important actions and button-red could mark dangerous actions. But we're not going to tell you how you should design your site.

Anchor






<div class="row">
    <a class="button">Anchor</a>
    <button class="button">Button</button>
    <input class="button" type="button" value="Input Button" />
    <input class="button" type="submit" value="Input Submit" />
    <input class="button" type="reset" value="Input Reset" />
</div>
<div class="row">
    <button class="button button-blue">Button Blue</button>
    <button class="button button-green">Button Green</button>
    <button class="button button-red">Button Red</button>
    <button class="button" disabled title="Disabled Button">Disabled</button>
</div>
<div class="row">
    <button class="button button-blue full-width">Full Width Button</button>
</div>
<div class="row">
    <button class="button text-largest text-thinner">Largest</button>
    <button class="button text-large text-thinner">Large</button>
    <button class="button text-medium text-thinner">Medium</button>
    <button class="button">Regular</button>
    <button class="button text-small">Small</button>
    <button class="button text-tiny">Tiny</button>
</div>

Forms

Forms are essential to any website. Osseous gives you enough styling for each input type, and using columns.



Forms can be structured with row and columns to easily group fields together.

<div class="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="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="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="row padding-top">
  <label for="t1" class="">Textarea with Full Width</label>
  <textarea id="t1" class="full-width" placeholder="Hello..."></textarea>
</div>
<div class="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="">
  <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 class="button button-blue full-width" type="submit" value="Login" />
    </div>
  </div>
  </div>
</form>

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

Helpdesk Contact
HR Contact
<div class="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>

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.

Text Utilities

text-center
text-left
text-right

text-bold for bold text.
text-bolder for bolder text.
text-thin for thin text.
text-wide for wide text.
text-uppercase for all uppercase text.
text-lowercase for all lowercase text.
text-tiny for tiny text.
text-small for small text.
text-medium for medium text.
text-large for large text.
text-largest for largest text.

Shapes / Edges

   
round for round corners.
   
square for square corners.
   
circle for a circle shape.
   
border for bordered sides.
   
border-none for no borders.
And border-top border-bottom border-left border-right too.

   
shadow for shadow sides.
And shadow-top shadow-bottom shadow-left shadow-right too.

Layout Helpers

The simple padding and margin classes can give you some additional spacing. But there is also the directional suffixes; left, right, top, bottom, as well as their large versions for when you need even more spacing.

padding and padding-large
padding-top and padding-top-large
padding-bottom and padding-bottom-large
padding-left and padding-left-large
padding-right and padding-right-large

margin and margin-large
margin-top and margin-top-large
margin-bottom and margin-bottom-large
margin-left and margin-left-large
margin-right and margin-right-large

Float left  Float right

Note: Floating is different than aligning text-left, text-right. Use floats when you are pushing content to one side of an element. And use text alignment when you are just adjusting text.

The container class simply reduces max-width a little on large screens.

The section class helps separate large containers from each other with padding on top and bottom.

<!-- Container -->
<article class="container">

    <!-- Section -->
    <div class="row 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!

About

A project by Austin Delamar based off of Skeleton and other popular libraries.

This really started as a stylesheet for my porfolio site. But as I've kept adding pieces to it as I created additional sites. So now, I wanted an easy way to centralize and share it. Maybe you'll find it useful for your next project!

If you'd like to contribute, feel free to fork and make changes, then open a pull request to master branch on GitHub.

License

MIT licensed and free forever.