Thursday, 30 October 2014

Toolbar position modules go here

What Is It?

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.

We have have added a few more features and packed all as a Joomla! template embryo that we can use in our developments.

JSkeleton

Developed by CloudHotelier based on:

  • Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development by Dave Gamache
  • Superfish: jQuery menu plugin by Joel Birch
  • Responsive Menu: jQuery plugin to convert menus into a select element by Matt Kersley

A Beautiful Boilerplate for Responsive, Mobile-Friendly Development

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

Buttons

Buttons are intended for action and thus should have appropriate weight. The standard button is given that weight with a little bit of depth and a strong hover.

Click Me For Action

Tabs

Some very simple tabs that have dead simple jQuery that hook them up to their corresponding content.

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

Forms

Forms can be one of the biggest pains for web developers, but just use these dead simple styles and you should be good to go.

Checkboxes
Radio Buttons

jsk demo

We have added minimum CSS porperties to add some more responsive features we needed

Bottom-A I

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu arcu bibendum nisi aliquet ultrices. Vivamus justo nisl, iaculis vitae dignissim ultricies, gravida in tellus. Nulla facilisi. Proin non erat quis metus ullamcorper dictum.

Bottom-A II

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu arcu bibendum nisi aliquet ultrices. Vivamus justo nisl, iaculis vitae dignissim ultricies, gravida in tellus. Nulla facilisi. Proin non erat quis metus ullamcorper dictum.

Bottom-A III

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu arcu bibendum nisi aliquet ultrices. Vivamus justo nisl, iaculis vitae dignissim ultricies, gravida in tellus. Nulla facilisi. Proin non erat quis metus ullamcorper dictum.

Bottom-A IV

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu arcu bibendum nisi aliquet ultrices. Vivamus justo nisl, iaculis vitae dignissim ultricies, gravida in tellus. Nulla facilisi. Proin non erat quis metus ullamcorper dictum.