Build Responsive Light-weight HTML5 Learning with Skeleton CSS

It’s pretty standard to web design to make your HTML responsive and I think that should cross over to the learning products that we create as well. Mobile and desktop devices come in all shapes and sizes so having a website or digital learning product adapt to the different screen sizes is a must.

If you have done any research on JavaScript libraries that help you with responsive design you have probably come across BootStrap. BootStap is great and is very robust but it could come with a lot of extra code that you don’t need if you are doing something simple and want to keep your project a small file size.

Luckily there is a light-weight but very customizable solution called Skeleton. Skeleton is only 400 lines of code so it doesn’t add much to the overall size of your project but gives you some of the same responsive features provided in BootStrap.

It uses a 12 column fluid grid which makes organizing and arranging your content easy and then adapts to smaller sizes. So that means anything on the right hand side will shift to be below the column on the left on a smaller screen size.

grid

The key to using this grid system is the way you mark up your HTML. Let’s walk through a simple 1 row layout. First you start out with the container that contains all your rows and columns. It is pretty simple to do. If you have downloaded the starting point from http://getskeleton.com you can just open up the HTML there and see they have already created a container for you or you can just attach the CSS files to any other project and start creating the container yourself.

The container is just a simple DIV tag:

<div class="container">

</div>

Now inside of that container you start adding rows and columns. First you need rows and then within those rows you can start adding columns. Rows will get stacked on top of each other one after the other and within each row they could have several columns. Let’s now add a row to our code above.

<div class="container">
   <div class="row">
   
   </div>
</div>

Like I mentioned I could have several rows if I wanted to like this.

<div class="container">
   <div class="row">
   
   </div>
   <div class="row">
   
   </div>
</div>

But for now let’s just stick with one row and start creating our column. Now with the columns all we need to do is create div tags within the row for the amount of columns we want. Whatever number of columns we create we just have to split up and assign values that total will equal 12. For example if I want three columns to all be even space then I take 12 and divide by 3 and that means I assign each column the number 4. I know you getting angry with me I am making you do math 😉 but luckily it is simple math.

So let’s say we want two columns but want one to be larger size than the other so the first one we want to be 1/3 of the width and the rest to take up 2/3 of the width. Well take 12 and divide by 3 and you get 4 so that means your first column will be 4 columns and your second one will be 8 since you will only have two columns. So what does that look like in the code? I will show you.

<div class="container">
   <div class="row">
      <div class="four columns">
         <!-- HTML will go here -->
      </div>
      <div class="eight columns">
         <!-- HTML will go here -->
      </div>
   </div>
</div>

Notice how the first div tag has a class of four and the second has a class of eight. Here is the end result if I placed some HTML within each column.

 columns

Notice how the left hand side is is smaller than the right. The nice thing is if you preview this on a smaller screen size the right column will just shift below the right and the right will take up more room. Now if you want something very specific they have media queries already set up for you so you can customize to your hearts content. They also have pre-styled buttons and forms for you if you just add the right class. You can check out more at their website but this is at least how you get started using their grid system.

Comments 1

  1. Pingback: Building a Simple jQuery Mobile Custom eLearning Course Player | Learning Dojo

Leave a Reply

Your email address will not be published. Required fields are marked *