Online education portals like Udacity and Coursera are really changing the world of remote learning in significant ways. By making free and high quality education accessible to a global audience, these platforms are opening up undreamt of possibilities for communities around the world to improve, grow, and prosper in the digital economy of the 21st century. Education at top tier colleges and universities has traditionally been a social and economic privilege, but now anyone can join in the learning revolution by sitting in virtual classrooms with the world’s best and brightest educators. Whether this involves learning how to code and build smart phone apps, or starting up a new business, or learning about public health literacy, the sky is the limit of what’s now possible.

Everything about Web and Network Monitoring

Introducing Blueprint CSS (Part 2)

monitorus - Copy

Live Demo | Source Code


In Part 1 of this mini-series, we introduced you to Blueprint CSS, a highly popular CSS framework with a minimal footprint. Today, we are going to take things a step further and show you the true power of Blueprint CSS by creating a fully functional home template.


Here’s what we are going to build today, but there are a few requirements:


  • 30 minutes of your time
  • Have read the previous tutorial on Blueprint CSS (Part 1)
  • Working knowledge of HTML and CSS



As you can see in the image above, there are multiple components to this home page template. We are going to break down each of the components for ease of explanation:


  1. Header
  2. Sidebar
  3. Main Content
  4. Sub Content
  5. Footer


Note: Every code shown below is wrapped under the “container” class.




Creating a header with Blueprint CSS is very simple. You have to assign a class .span-24 to a div element, which creates a large column spanning the 24 grids available to you within the framework. The code that creates the header is shown below:


<!-- Header -->
<div class="span-24">
<h1> » Blueprint CSS </h1>





The sidebar is an effective way to show ads, navigation elements or any extra content that you have. Creating a sidebar using Blueprint CSS is a very easy process. Depending on the size of the sidebar, you need to assign a class .span-x to the div element – don’t forget to add the class .last. This is required for any column that stands last in the markup.


<div class="span-5 last">
 <p> Information Goes Here </p>


Main Content


Main content is where you will have a good-sized chunk of your web content. Earlier, we created a sidebar taking up 5 of the 24 available grid columns. So to create the main content area, we are left with 19 columns. By leaving 1 column extra for the .border class to occupy, we are left with 18 columns for the main content. To implement the main content area, we have to create a class .span-18 border, assigning it to the div element.


<!-- Content -->
<div class="span-18 border">
<p> Information Goes Here</p>


Sub Content


Once we have the main content area coded, we can play around and create complex to very complex layouts by nesting grids inside grids. To create a sub content area inside the main content, we do a bit of nesting.


First, we place an image to showcase the area for a future slider.


<!-- Slider Main -->
<img class="img_size" src="img.jpg"/>


Now, to create 3 mini boxes within the main content, we use the code below.


The types of layouts you can create with Blueprint CSS are limited only by your imagination and creativity.


<div class="span-6 highlight"><p> Information Goes Here </p></div>
<div class="span-6 highlight"><p> Information Goes Here </p></div>
<div class="span-6 highlight"><p> Information Goes Here </p></div>


Since our main content area is a maximum of 18 columns (as seen by .span-18), we have created three mini boxes inside, with each of them occupying 6 columns. This makes the boxes proportionate and visually appealing.




The process of creating a footer is no different from creating a header. The code below is identical to the one used for creating a header.


<!-- Footer -->
<div class="span-24">
<p> <hr></hr>
Information goes here



Custom Stylesheet


You can also add a custom stylesheet to spice up your design. You will anyway.


<link rel="stylesheet" href="custom.css" type="text/css" media="screen, projection">



Wrap Up


Blueprint CSS is a great framework for front-end developers and web designers trying to reduce their development time. As you know, Blueprint CSS is a pure CSS framework, perhaps not having the gimmicks of Bootstrap’s UI toolkit, but it does the trick for you, giving you greater flexibility to do almost any layout you wish.


Post Tagged with

About Ali Gajani

I’m a science geek, aspiring blogger, thinker, entrepreneur and freelancer. I live in Sheffield, UK, have three amazing pets named iPad, iPhone and iMac and I love life. You can find me on to know more about myself!
  • Mats Svensson

    But isn’t this exactly what you shouldn’t do when you design with css?

    What if, for example you have a site full of elements marked up with class=”span-6 highlight”, and you want those parts to be not highlighted anymore and to span 7 columns?