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?
- Alerts
- Cards
- Carousel --> See Slides.js
- Icons --> Use Icomoon.io
- Modals / Popovers --> See CSS-modal
- Tooltips
- Animations --> Try Animate.css
- Code Colors --> Use Highlight.js
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.
<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.
Column 1 | Column 2 | Column 3 | Column 4 |
---|---|---|---|
Row 1 | Row 1 | Row 1 | Row 1 |
Row 2 | Row 2 | Row 2 | Row 2 |
Row 3 | Row 3 | Row 3 | Row 3 |
Row 4 | Row 4 | Row 4 | Row 4 |
Column 1 | Column 2 | Column 3 | Column 4 |
---|---|---|---|
Row 1 | Row 1 | Row 1 | Row 1 |
Row 2 | Row 2 | Row 2 | Row 2 |
Row 3 | Row 3 | Row 3 | Row 3 |
Row 4 | Row 4 | Row 4 | Row 4 |
Column 1 | Column 2 | Column 3 | Column 4 |
---|---|---|---|
Row 1 | Row 1 | Row 1 | Row 1 |
Row 2 | Row 2 | Row 2 | Row 2 |
Row 3 | Row 3 | Row 3 | Row 3 |
Row 4 | Row 4 | Row 4 | Row 4 |
Column 1 | Column 2 | Column 3 | Column 4 |
---|---|---|---|
Row 1 | Row 1 | Row 1 | Row 1 |
Row 2 | Row 2 | Row 2 | Row 2 |
Row 3 | Row 3 | Row 3 | Row 3 |
Row 4 | Row 4 | Row 4 | Row 4 |
Column 1 | Column 2 | Column 3 | Column 4 |
---|---|---|---|
Row 1 | Row 1 | Row 1 | Row 1 |
Row 2 | Row 2 | Row 2 | Row 2 |
Row 3 | Row 3 | Row 3 | Row 3 |
Row 4 | Row 4 | Row 4 | Row 4 |
Column 1 | Column 2 | Column 3 | Column 4 |
---|---|---|---|
Row 1 | Row 1 | Row 1 | Row 1 |
Row 2 | Row 2 | Row 2 | Row 2 |
Row 3 | Row 3 | Row 3 | Row 3 |
Row 4 | Row 4 | Row 4 | Row 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>
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.
You can style the dropdown and the body any way you like. Add ▾
for a tiny arrow, or anything else you like.
Add the button
class to look like a button.
<div class="dropdown padding">Dropdown ▾
<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">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">☰
<div class="dropdown-body shadow round">
<span class="text-small text-nowrap">Shadow outline.</span>
</div>
</div>
<div class="button dropdown">Dropdown ▾
<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-blue dropdown square">
<span class="padding-right border-right">Reply</span><span class="padding-left">▼</span>
<div class="dropdown-body border round">
<button class="button button-blue square full-width">Reply</button>
<button class="button square full-width">Reply All</button>
</div>
<div class="button button-red dropdown">⃠
<div class="dropdown-body padding-none">
<button class="button button-red">Are you sure?</button>
</div>
</div>
</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.
<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
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.