Lightweight Responsive CSS Grid System - skel.js

skel.js is a smart and lightweight front-end framework for creating responsive websites or mobile apps.

Features:

• CSS Grid System - A sophisticated 12 column CSS grid system with tons of cool features and a concise, uncluttered syntax.
• Breakpoint Handler - A streamlined replacement for CSS media queries that's intelligent and extremely easy to work with.
• CSS Shortcuts - Handy shortcuts to deal with common CSS tasks, like browser resets and global box model changes.
• Plugin Support - Opens the door to doing even more with skel.js, both now (with the upcoming UI plugin) and into the future.

Basic Usage:

1. Load, configure, and initialize skel.js in one shot

<script src="skel.min.js">
{
prefix: "style", // 
resetCSS: true,
boxModel: "border",
grid: { gutters: 2 },
breakpoints: {
wide: { range: "1200-", containers: 1140, grid: { gutters: 4 } },
narrow: { range: "481-1199", containers: 960 },
Another breakpoint. Kicks in between 481px and 1199px and uses 960px containers.
mobile: { range: "-480", containers: "fluid", lockViewport: true, grid: { collapse: true } }
}
}
</script>

2. Include required CSS file on the page

<link href="style.css" rel="stylesheet" type="text/css">

3. Include a Breakpoint Stylesheet on the page

<link href="style-wide.css" rel="stylesheet" type="text/css">

4. Markup html structure

<div class="container"> 
<!-- Header -->
<div id="header" class="row">
<div class="4u">
<h1>Example</h1>
</div>
<nav id="nav" class="8u"> <a href="#">Home</a> <a href="#">About Me</a> <a href="#">Blog</a> <a href="#">Contact</a> </nav>
</div>
<!-- Hero -->
<section id="hero">
<h2>Hello world.</h2>
<p>Lorem ipsum dolor sit amet sed magna etiam adipiscing.</p>
<a href="#" class="button">Get Started</a> </section>
<!-- Features -->
<div class="row">
<section class="4u">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet sed magna etiam adipiscing elit.
            adipiscing elit nec fringilla urna tempor in. Cras et sodales
            consectetur viverra lorem ipsum.</p>
</section>
<section class="4u">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet sed magna etiam adipiscing elit.
            adipiscing elit nec fringilla urna tempor in. Cras et sodales
            consectetur viverra lorem ipsum.</p>
</section>
<section class="4u">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet sed magna etiam adipiscing elit.
            adipiscing elit nec fringilla urna tempor in. Cras et sodales
            consectetur viverra lorem ipsum.</p>
</section>
</div>
<!-- Main -->
<div class="row"> 
<!-- Content -->
<section class="8u">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet sed magna etiam adipiscing elit.
              adipiscing elit nec fringilla urna tempor in. Cras et sodales
              consectetur viverra lorem ipsum. Lorem ipsum dolor sit amet
              sed magna etiam adipiscing elit adipiscing elit nec fringilla
              urna tempor in. Cras et sodales consectetur viverra.</p>
</section>
<!-- Sidebar -->
<section class="4u">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet sed magna etiam adipiscing elit.
              adipiscing elit nec fringilla urna tempor in. Cras et sodales
              consectetur viverra lorem ipsum.</p>
</section>
</div>
<!-- Footer -->
<div id="footer"> © Example. All rights reserved. </div>
</div>

 

---

This awesome jQuery plugin is developed by skeljs. For more Advanced Usages, please check the demo page or visit the official website.