Banner

Osseous

A bony CSS framework without guts. v2.5.1

Download View on GitHub Report Issue

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
  • Tables
  • Buttons, Forms, Inputs
  • Tabs
  • 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 web project using npm, bower, cdn link, or download the CSS file.

npm install osseous
bower install osseous
<link rel="stylesheet" href="https://amdelamar.com/osseous/2.5.1/osseous.min.css">

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

Optionally, use with subresource integrity checks like so:

<!-- With SRI check: -->
<link rel="stylesheet" href="https://amdelamar.com/osseous/2.5.1/osseous.min.css" integrity="sha384-EbtTSlR9pHQ+478TV/Vx8zOOCSpMwDzfMiFMLbOd8axnCjCHNHvZY8IPvVrlumea" crossorigin="anonymous">
<script src="https://amdelamar.com/osseous/2.5.1/osseous.min.js" integrity="sha384-beoWumBdsMYWCW4AA8aQZ9f+QJQJW3qh/9HLDYMbUD5NGzwX7Wmm8rc2ZyWM+NEd" crossorigin="anonymous"></script>

The links are using Cloudflare CDN for delivery. But unpkg.com links are available too.


Download ZIP

v2.5.1 - 10 Jun 2018 - 12KB
[Older versions: 1.2.0]

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

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
Header Header Header Header
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
Row alternating and Centered
Header Header Header Header
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell



Row borders and Row alternating
Header Header Header Header
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
Column borders and Column alternating
Header Header Header Header
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell



First row and First column
Header Header Header Header
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
Last row and Last column
Header Header Header Header
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
<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.

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

Note: Tab content like this, can be hidden/shown through JavaScript functions or by separating content over separate pages.

<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
    or by separating content over separate pages.</code></p>
</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-primary 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-unbold for unbold 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-regular for regular 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.
And border-top border-bottom border-left border-right border-none too.

   
shadow for evenly shaded sides.
And shadow-top shadow-bottom shadow-left shadow-right shadow-none too.

   
shade for a more natural shadow from light.

Alternate Colors

Apply primary/secondary colors to text, borders, and backgrounds wherever you want to add emphasis.

text-primary for primary text.
text-secondary for secondary text.
text-tertiary for tertiary text.
text-success for success text.
text-danger for danger text.

background-primary for primary background.
background-secondary for secondary background.
background-tertiary for tertiary background.
background-success for success background.
background-danger for danger background.

border-primary
border-danger
border-success
border-secondary
border-tertiary

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 float-left  Float 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.

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

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.