In this series of articles for the Arvixe blog, I’ve shown you how to get up and running with Bootstrap 3, Foundation 5 and Semantic UI 2. This how-to is a little different because the framework is intentionally much simpler and lighter. Today is all about Skeleton. I briefly covered the current era of mobile-first and responsive development in a previous post. Increasing numbers of studies have shown that mobile web browsing activity has surpassed desktop, perhaps inevitably. At the same time, there’s been a renaissance in tools that help developers make their sites whizzy and amazing. New tools are released regularly, and the web developer’s tool arsenal is bigger than ever before.
Node, Gulp, Grunt, Bower, Yeoman – these are names you may have heard before. They’re all web development tools in some way or another. You can spend hours, days, weeks or months perfecting your skills in any or all of these things. Or, you can just load a nice-looking, pre-compiled stylesheet and concentrate on content instead of the machine that makes it appear. Enter Skeleton. There’s no Sass or LESS to mess with. Just load, and go.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='//fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <!-- your content goes here --> </body> </html>
There’s a bunch of stuff going on in that code block:
- Raleway font is loaded from Google Fonts
- Normalize is loaded from cdnjs, minified
- Skeleton is loaded from cdnjs, minified
- jQuery is loaded from cdnjs, minified
Where you load the non-font components is up to you – there are many open source CDNs available for this kind of thing. Bear in mind that if you split the load across multiple networks (say, cdnjs, jsDelivr, jQuery CDN, etc) then additional DNS lookups will be required, which will incur a time cost. Loading the three non-font components from the same place involves a single DNS query, which takes less time than three queries to three domains. Depending on your location, you may find a certain CDN has better availability/speed for you and your users, so listen to feedback from your visitors if loading speed is important to you.
There are a bunch of components that can be added between the `<body>` tags to customise your website. One of the most commonly-used features of front-end frameworks is a grid system for laying out your content. Skeleton has a grid system that uses the following syntax:
<div class="container"> <div class="row"> <div class="one column">One</div> <div class="eleven columns">Eleven</div> </div> <div class="row"> <div class="two columns">Two</div> <div class="ten columns">Ten</div> </div> <div class="row"> <div class="one-third column">1/3</div> <div class="two-thirds column">2/3</div> </div> <div class="row"> <div class="one-half column">1/2</div> <div class="one-half column">1/2</div> </div> </div>
So, there’s a container, and it has rows. Each row has one or more columns, and these columns can be a numbered value from 1 to 12, or a fraction of the 12-column width. Grid systems are really helpful for many projects, saving you time and money in development.