Adaptive layout: CSS & JS framework Skeleton

In the continuation of a recent article about adaptive layout, I want to more fully cover the topic. In reality, most often, for adaptive layout using CSS-frameworks. I would like to tell about one of them, or rather, to translate the manual for its use. It is called Skeleton.

What is Skeleton?

Skeleton is a framework based on CSS and JavaScript. It allows you to impose sites in such a way that they look equally comfortable and beautiful both on a 17-inch monitor and on a display of smartphones and tablets.

In Skeleton there are several basic principles:
')

Adaptive Mesh

The grid of this framework is based on the familiar 960-pixel grid, but it easily adapts to the size of the browser and display.

Ease of use

Skeleton is semantically correct. All elements are called clear language and you will not be difficult to understand the framework. In addition, essentials such as buttons, forms, tabs, etc. are immediately included in Skeleton.

Separation from design

Skeleton is not a UI framework. It does not make you adapt to your design; on the contrary, it can be easily adapted to any design and user interface.

Framework Grid

Skeleton is based on a 960-pixel grid, but the syntax is simple and the blocks easily adjust to the size of the browser. The grid has 12 block system.

Thus, you need to understand that the system itself assumes that you must have at least 12 small blocks in one line, or consist of blocks of different widths, but the final “sum” must be at least 12.

The following is the markup syntax:

<!-- The container is a centered 960px --> <div class="container"> <!-- Give column value in word form (one, two..., twelve) --> <div class="twelve columns"> <h1>Full Width Column</h1> </div> <!-- Sweet nested columns cleared with a clearfix class --> <div class="six columns clearfix"> <!-- In nested columns give the first column a class of alpha and the second a class of omega --> <div class="three columns alpha">...</div> <div class="three columns omega">...</div> </div> <!-- Sweet nested columns cleared by wrapping a .row --> <div class="five columns"> <div class="row"> <div class="three columns alpha">...</div> <div class="two columns omega">...</div> </div> </div> <!-- Sweet nested columns cleared by <br class="clear"> --> <div class="five columns"> <div class="three columns alpha">...</div> <div class="two columns omega">...</div> <br class="clear" /> </div> <!-- Can push over by columns --> <div class="five columns offset-by-one"></div> </div> 

Typography

Typography in Skeleton is based on a strict hierarchy. The main font is Helvetica Neue, but of course it’s easy to change. Paragraphs "p" are given 14-pixel font and line spacing of 21 pixels.

Also in the Skeleton embedded "tool" quote. It is set by the tag "blockquote".

Buttons

The buttons also have their own style and animation. Moreover, in addition to the “button” tag, buttons can be defined using styles.

 <!-- Just add .button to an anchor --> <a href="#" class="button">Click Me</a> <!-- Also works on plain button elements --> <button>Click Me</button> <!-- To take up full-width of a container? --> <a href="#" class="full-width button">Click Me</a> 

Tabs (tabs)

Tabs are also enabled by default in Skeleton. They are implemented using jQuery. They can be easily set using the usual “ul” list, designating it with the “tabs” class, and their contents with the “tabs-content” class.

 <!-- Standard <ul> with class of "tabs" --> <ul class="tabs"> <!-- Give href an ID value of corresponding "tabs-content" <li>'s --> <li><a class="active" href="#simple">Simple</a></li> <li><a href="#lightweight">Lightweight</a></li> <li><a href="#mobileFriendly">Mobile</a></li> </ul> <!-- Standard <ul> with class of "tabs-content" --> <ul class="tabs-content"> <!-- Give ID that matches HREF of above anchors --> <li class="active" id="simple">The tabs are clean and simple unordered-list markup and basic CSS.</li> <li id="lightweight">The tabs are cross-browser, but don't need a ton of hacky CSS or markup.</li> <li id="mobileFriendly">The tabs work like a charm even on mobile devices.</li> </ul> 

Forms

Forms in Skeleton are not particularly distinguished by anything, they are simply aligned on the grid.

Hard frame

Skeleton is focused on universal designs, however, a creative thought may go further, and you may want to change the background, or other elements, depending on the position of the tablet, phone, or their resolution. And then mini-hacks will come to your aid:

• Less than 960 pixels: Less than standard grid.
• If the tablet is rotated into portrait position: Between 768px and 959px.
• Display elements designed for mobile versions: If the resolution is below 767px.
• Only for tablets in a horizontal position: From 480px to 767px.
• For mobile devices upright only: Less than 479px.

 /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) {} /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) {} /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) {} /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) {} /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) {} 

Cross-browser compatibility

Skeleton supports the following browsers:

• Google Chrome (Mac / PC)
• Firefox 4.0, 3.6, 3.5, 3.0 (Mac / PC)
• Safari
• IE9, IE8, IE7
• iPhone (Retina)
• Droid (Charge / Original)
• iPad

Download and review the original can be on the official website .