Default Catalyst front-end styles

This site demonstrates Catalyst default front-end styles and modules.

PHP's safe mode is currently OFF for this website, so you can create new directories and upload images to them as well.

Typography

The typography of Skeleton is designed to create a strong hierarchy with basic styles. The primary font is the classic Helvetica Neue, but the font stack can be easily changed with just a couple adjustments. Regular paragraphs are set at a 14px base with 21px line height.

Heading <h1>

Heading <h2>

Heading <h3>

Heading <h4>

Heading <h5>
Heading <h6>

This is a blockquote style example. It stands out, but is awesome

Dave Gamache, Skeleton Creator

Paragraphs

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit. Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci. Nam nisl nulla, euismod at, vehicula nec, molestie vitae, enim. Donec euismod nulla a metus. Suspendisse venenatis metus dapibus dolor. Cras auctor semper augue. Pellentesque leo pede, tempus sed, ornare in, venenatis sed, nisl. Quisque est velit, eleifend vitae, mollis ac, adipiscing at, eros. Pellentesque arcu. Vestibulum consequat nisi a ipsum vulputate vehicula. Aliquam lacus diam, ultricies vel, interdum eget, posuere non, tellus. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In lectus nisl, porttitor eget, fermentum et, viverra a, odio. Sed semper. Praesent vulputate nibh eget nisi. Sed ligula. Aenean vehicula posuere neque. Nam nibh lectus, laoreet non, convallis sed, vulputate consectetuer, enim. Nam nisl nulla, euismod at, vehicula nec, molestie vitae, enim. Donec euismod nulla a metus. Suspendisse venenatis metus dapibus dolor. Suspendisse at velit. Quisque mollis feugiat est. Curabitur ut leo. Cras auctor semper augue. Pellentesque leo pede, tempus sed, ornare in, venenatis sed, nisl. Quisque est velit, eleifend vitae, mollis ac, adipiscing at, eros. Pellentesque arcu. Vestibulum consequat nisi a ipsum vulputate vehicula. Aliquam lacus diam, ultricies vel, interdum eget, posuere non, tellus. Donec vel ligula. Sed felis.

Lists

Unordered <ul>
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
Unstyled <ul.unstyled>
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
Ordered <ol>
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
Description dl
Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Media Grid

Buttons

Link Button  

    

Messages

×

Holy guacamole! Best check yo self, you’re not looking too good.

×

Oh snap! Change this and that and try again.

×

Well done! You successfully read this alert message.

×

Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

Tabs

  • The tabs are clean and simple unordered-list markup and basic CSS.
  • The tabs are cross-browser, but don't need a ton of hacky CSS or markup.
  • The tabs work like a charm even on mobile devices.

Tables

Default table styles

# First Name Last Name Language
1 Some One English
2 Joe Sixpack English
3 Stu Dent Code

Condensed table table.condensed

# First Name Last Name Language
1 Some One English
2 Joe Sixpack English
3 Stu Dent Code

Bordered table table.bordered

# First Name Last Name Language
1 Some One English
2 Joe Sixpack English
3 Stu Dent Code

Striped table table.striped

# First Name Last Name Language
1 Some One English
2 Joe Sixpack English
3 Stu Dent Code

Sorted table

Example of a table sorted by jQuery and the Tablesorter plugin

Last Name First Name Email Due Web Site
Smith John jsmith@gmail.com $50.00 http://www.jsmith.com
Bach Frank fbach@yahoo.com $50.00 http://www.frank.com
Doe Jason jdoe@hotmail.com $100.00 http://www.jdoe.com
Conway Tim tconway@earthlink.net $50.00 http://www.timconway.com