Categories: Development

Taking a look at Skeleton CSS framework

Skeleton is a self acclaimed simple boilerplate that suits those who don’t need the vast range of elements that larger frameworks possess.

Browsing through the Skeleton docs you will notice that yes there isn’t a whole lot of styling, elements and customizing that you may have got used to with Bootstrap 4.

It appears that Skeleton is correct in its simpleness but also the clean approach to typography, which would make Skeleton a great match for a blog.

The skeleton.min.css is only 2.03KB in size, compared to Bootstrap 4.13 being 20.87KB in size.

Grid system

Like other frameworks the grid in skeleton consists of 12 columns which are automatically responsive. I believe the system is a lot easier than Bootstrap as defining a column is simple done by its size

<div class="row">
  <div class="two columns">Two</div>
  <div class="ten columns">Ten</div>
</div>

Instead of the different view points like lg, md and sm in Skeleton you just define how many columns you actually want.

<div class="row">
  <div class="one-half column">1/2</div>
  <div class="one-half column">1/2</div>
</div>

The rest

There is only one colored button .button-primary and table styling consists of nothing however the form contains a row and column system.

Making it possible to compress forms and have less white space

<div class="row">
  <div class="six columns">
    <label for="exampleEmailInput">Your email</label>
    <input class="u-full-width" type="email" placeholder="test@mailbox.com" id="exampleEmailInput">
  </div>
  <div class="six columns">
    <label for="name">Your name</label>
    <input class="u-full-width" type="text" placeholder="" id="name">
  </div>
</div>

There is no nav bar, jumbotrons, cards, progress bars, badges or pills but that is ok because Skeleton isn’t a direct competitor or alternative to Bootstrap. Skeleton is in its own league as a simple and clean boilerplate.

Non flashy but rather classy. Skeleton is a good starting point if you want the basic typography, responsiveness and design without needing to go through a large docs page or tinker with many classes.

Share

Recent Posts

Kennington reservoir drained drone images

A drained and empty Kennington reservoir images from a drone in early July 2024. The…

1 year ago

Merrimu Reservoir drone images

Merrimu Reservoir from drone. Click images to view larger.

1 year ago

FTP getting array of file details such as size using PHP

Using FTP and PHP to get an array of file details such as size and…

2 years ago

Creating Laravel form requests

Creating and using Laravel form requests to create cleaner code, separation and reusability for your…

2 years ago

Improving the default Laravel login and register views

Improving the default Laravel login and register views in such a simple manner but making…

2 years ago

Laravel validation for checking if value exists in the database

Laravel validation for checking if a field value exists in the database. The validation rule…

2 years ago