Skeletonic

Introducing Skeletonic

Skeletonic is a lightweight, intuitive and ultra-responsive CSS framework to speed up your Digital and Mobile Web development needs.

Simply designed to fit your cascading web life.

Version: 1.0.97

Download View on GitHub

Dead on

All you have to do is drop Skeletonic CSS modules into your project, and everything will be styled automatically. There is a minimal amount of classes to learn.

Lightweight

Skeletonic comes packed with features, including styling for most elements, all in just 8kb and ~2kb (gzipped).

Responsive

Crafted with both desktops and mobile in mind, the styles that come with Skeletonic are clean and modern, dropping it into your project will give you a headstart in design.


The Grid

Skeletonic has a simple, fluid, Flexbox-based, responsive grid that collapses at small viewport. It is based on a 12-columns fluid grid and a maximum width of 2880px based on the flex display property.

flex-1

flex-11

flex-2

flex-10

flex-3

flex-9

flex-4

flex-8

flex-5

flex-7

flex-6

flex-6

flex-7

flex-5

flex-8

flex-4

flex-9

flex-3

flex-10

flex-2

flex-11

flex-1

flex-12

<section class="grid-flex"> <row class="bg-color-red-100 flex-1"><p>flex-1</p></row> <row class="bg-color-red-100 flex-11"><p>flex-11</p></row> </section> <section class="grid-flex"> <row class="bg-color-pink-100 flex-2"><p>flex-2</p></row> <row class="bg-color-pink-100 flex-10"><p>flex-10</p></row> </section> <section class="grid-flex"> <row class="bg-color-purple-100 flex-3"><p>flex-3</p></row> <row class="bg-color-purple-100 flex-9"><p>flex-9</p></row> </section> <section class="grid-flex"> <row class="bg-color-deep-purple-100 flex-4"><p>flex-4</p></row> <row class="bg-color-deep-purple-100 flex-8"><p>flex-8</p></row> </section> <section class="grid-flex"> <row class="bg-color-indigo-100 flex-5"><p>flex-5</p></row> <row class="bg-color-indigo-100 flex-7"><p>flex-7</p></row> </section> <section class="grid-flex"> <row class="bg-color-blue-100 flex-6"><p>flex-6</p></row> <row class="bg-color-blue-100 flex-6"><p>flex-6</p></row> </section> <section class="grid-flex"> <row class="bg-color-light-blue-100 flex-7"><p>flex-7</p></row> <row class="bg-color-light-blue-100 flex-5"><p>flex-5</p></row> </section> <section class="grid-flex"> <row class="bg-color-cyan-100 flex-8"><p>flex-8</p></row> <row class="bg-color-cyan-100 flex-4"><p>flex-4</p></row> </section> <section class="grid-flex"> <row class="bg-color-teal-100 flex-9"><p>flex-9</p></row> <row class="bg-color-teal-100 flex-3"><p>flex-3</p></row> </section> <section class="grid-flex"> <row class="bg-color-green-100 flex-10"><p>flex-10</p></row> <row class="bg-color-green-100 flex-2"><p>flex-2</p></row> </section> <section class="grid-flex"> <row class="bg-color-light-green-100 flex-11"><p>flex-11</p></row> <row class="bg-color-light-green-100 flex-1"><p>flex-1</p></row> </section> <section class="grid-flex"> <row class="bg-color-lime-100 flex-12"><p>flex-12</p></row> </section>

Fonts

You will need to import skeletonic-fonts.css to display the fonts. You might want to add your own font files into the CSS or simply use the default web font provided (Open Sans). Open Sans is a clean and modern sans-serif typeface designed by Steve Matteson and commissioned by Google.

Open Sans Light Open Sans Light Italic
Open Sans Regular Open Sans Regular Italic
Open Sans Semi-Bold Open Sans Semi-Bold Italic
Open Sans Bold Open Sans Bold Italic
Open Sans Extra-Bold Open Sans Extra-Bold Italic

HTML Links

https://skeletonic.io

Link Hover Effects

Underline Left to Right Underline Right to Left Underline Grow from Center
Underline Shrink to Center Top/Bottom Left to Right Top/Bottom Right to Left
Top/Bottom Grow from Center Top/Bottom Opposite Start Underline going Up
Underline going Down Expanding Brackets Shrinking Brackets

Typography

Carefully considered, readable typography that sets at 1rem over a 1.6 line height (24px).

Heading 1 (4.6rem)

Heading 2 (3.6rem)

Heading 3 (2.8rem)

Heading 4 (2.2rem)

Heading 5 (1.8rem)
Heading 6 (1.6rem)

<h1>Heading 1</h1> <span class="h1">Heading 1</span>


Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor libero, tempor sed ornare vitae, suscipit sed sapien. Curabitur mollis lectus quis gravida pellentesque. Etiam gravida sollicitudin magna, non ultrices tellus vehicula et. Aliquam euismod ante maximus ligula maximus, tristique placerat mi tincidunt. Cras sit amet diam metus. Integer efficitur venenatis condimentum. Aliquam erat volutpat. Praesent eu massa ut augue hendrerit consequat. Aliquam risus justo, sodales sit amet sem eget, tempor malesuada massa. Nullam et nisi pellentesque, blandit arcu non, rhoncus lacus. Duis metus ligula, lacinia lacinia lacus eu, placerat tincidunt nibh. Donec quis urna nec tortor finibus dictum at et ipsum.

Nulla tincidunt vitae massa eu gravida. Pellentesque vulputate quam elementum lorem elementum, in auctor dolor cursus. Fusce hendrerit orci et massa viverra, eget finibus enim facilisis. Sed et molestie ex, vitae dignissim sem. Aenean sit amet imperdiet neque. Vivamus at tristique mi. Fusce quis ligula malesuada, feugiat eros nec, egestas risus. Morbi fringilla, sapien non mollis sodales, nunc felis luctus neque, sit amet ullamcorper quam nibh vitae massa. Vivamus gravida orci in diam tincidunt mollis. Duis at pharetra tellus. Aliquam a vestibulum ex.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>


Semantic text elements

Semantic text elements are designed to display special types of text.

  • <b> - Bold text
  • <i> - Italic text
  • <em> - Emphasised text
  • <mark> - Marked text
  • <small> - Small text
  • <del> - Deleted text
  • <strike> - Strike-out text
  • <s> - Strike-out text
  • <ins> - Inserted text
  • <sub> - Subscript text
  • <sup> - Superscript text

  • bold
  • italic
  • emphasised
  • marked or highlighted
  • small
  • deleted (removed)
  • stroke
  • stroke
  • inserted (added)
  • superscripted
  • subscripted


Cards

Cards are a convenient means of displaying content composed of different types of objects.

Photo by Patrick Tomasso on Unsplash

Image 01

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor libero, tempor sed ornare vitae, suscipit sed sapien. Curabitur mollis lectus quis gravida pellentesque.

Photo by Marion Michele on Unsplash

Image 02

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor libero, tempor sed ornare vitae, suscipit sed sapien. Curabitur mollis lectus quis gravida pellentesque.

Photo by Fernando Reyes on Unsplash

Image 03

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor libero, tempor sed ornare vitae, suscipit sed sapien. Curabitur mollis lectus quis gravida pellentesque.


Tachyons Colour Palette

You will need to import skeletonic-colours.css to display the colours. The background colours are based on the Tachyons - CSS Colour palette.

A Palette of Particles.

black
#000

near-black
#111

dark-gray
#333

mid-gray
#555

gray
#777

silver
#999

light-silver
#aaa

moon-gray
#ccc

light-gray
#eee

near-white
#f4f4f4

white
#fff

black-90
rgba(0,0,0,.9)

black-80

black-70

black-60

black-50

black-40

black-30
rgba(0,0,0,.3)

black-20

black-10

black-05

black-025

black-0125

white-90

white-80

white-70

white-60

white-50

white-40

white-30

white-20

white-10

white-05

white-025

white-0125

dark-red
#e7040f

red
#ff4136

light-red
#ff725c

orange
#ff6300

gold
#ffb700

yellow
#ffd700

light-yellow
#fbf1a9

purple
#5e2ca5

light-purple
#a463f2

dark-pink
#d5008f

hot-pink
#ff41b4

pink
#ff80cc

light-pink
#ffa3d7

dark-green
#137752

green
#19a974

light-green
#9eebcf

navy
#001b44

dark-blue
#00449e

blue
#357edd

light-blue
#96ccff

lightest-blue
#cdecff

washed-blue
#f6fffe

washed-green
#e8fdf5

washed-yellow
#fffceb

washed-red
#ffdfdf


Material Design colours

You will need to import skeletonic-colours.css to display the colours. The background colours are based on Google's Material Design Colour palette.

.bg-color-red-a700

.bg-color-pink-a700

.bg-color-purple-a700

.bg-color-deep-purple-a700

.bg-color-indigo-a700

.bg-color-blue-a700

.bg-color-light-blue-a700

.bg-color-cyan-a700

.bg-color-teal-a700

.bg-color-green-a700

.bg-color-light-green-a700

.bg-color-lime-a700

.bg-color-yellow-a700

.bg-color-amber-a700

.bg-color-orange-a700

.bg-color-deep-orange-a700

.bg-color-brown-900

.bg-color-blue-grey-900


Text colours

You will need to import skeletonic-colours.css to display the colours. The colours are based on Google's Material Design Colour palette.

Red

  • .color-red-50
  • .color-red-100
  • .color-red-200
  • .color-red-300
  • .color-red-400
  • .color-red-500
  • .color-red-600
  • .color-red-700
  • .color-red-800
  • .color-red-900
  • .color-red-a100
  • .color-red-a200
  • .color-red-a400
  • .color-red-a700

Pink

  • .color-pink-50
  • .color-pink-100
  • .color-pink-200
  • .color-pink-300
  • .color-pink-400
  • .color-pink-500
  • .color-pink-600
  • .color-pink-700
  • .color-pink-800
  • .color-pink-900
  • .color-pink-a100
  • .color-pink-a200
  • .color-pink-a400
  • .color-pink-a700

purple

  • .color-purple-50
  • .color-purple-100
  • .color-purple-200
  • .color-purple-300
  • .color-purple-400
  • .color-purple-500
  • .color-purple-600
  • .color-purple-700
  • .color-purple-800
  • .color-purple-900
  • .color-purple-a100
  • .color-purple-a200
  • .color-purple-a400
  • .color-purple-a700

Other colours available

  • Deep Purple
  • Indigo
  • Blue
  • Light Blue
  • Cyan
  • Teal
  • Green
  • Light Green
  • Lime
  • Yellow
  • Amber
  • Orange
  • Deep Orange
  • Brown
  • Grey
  • Blue Grey

Buttons

Default buttons style.

Download skeletonic.css

Button's states

Multiple buttons states.

<button type="button" class="primary">Primary</button> <button type="button" class="secondary">Secondary</button> <button type="button" class="active">Active</button> <button type="button" disabled="">Disabled</button> <button type="button" class="success">Success</button> <button type="button" class="info">Info</button> <button type="button" class="error">Error</button> <button type="button" class="warning">Warning</button> <button type="button" class="link">Link button</button>

Button Groups

Group multiple buttons together on a single line.

<p class="button-group"> <button class="active">Button 0</button> <button>Button 1</button> <button>Button 2</button> </p>

Forms

Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.

<label>Input</label> <input type="text" placeholder="Text..." /> <label>Textarea</label> <textarea></textarea> <label>Select</label> <select> <option value="">Choose an item...</option> <optgroup label="Original CSS"> <option value="">skeletonic.css</option> <option value="">skeletonic-pattern.css</option> </optgroup> <optgroup label="Minified CSS"> <option value="">skeletonic.min.css</option> <option value="">skeletonic-pattern.min.css</option> </optgroup> </select>

Divider



Animations

You will need to import skeletonic-animations.css to display the colours. The CSS animations are based/inspired on Animate.css (Another thing from Daniel Eden).

Fade In animation

Fade Out Animation

Flash animation

Pop In animation

Zoom In animation

Shake animation

Wobble animation

Bounce animation

Colours text animation

Colours background animation


Table

# Type Source Version
1 Original CSS skeletonic.css 1.0.97
2 Minified CSS skeletonic.min.css 1.0.97
<table> <thead> <tr> <th>#</th> <th>Type</th> <th>Source</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Original CSS</td> <td>skeletonic.css</td> </tr> <tr> <td>2</td> <td>Minified CSS</td> <td>skeletonic.min.css</td> </tr> </tbody> </table>

Code

print("Hello Skeletonic")

import "skeletonic"

void main() {
    print("Hello Skeletonic")
}