Sorry, but I've not yet supported your browser ( IE7 or IE8 ). Please use another, advanced, browser to view this site

thank you

Supported browsers

Featured image

My custom 24 column responsive grid…thanks, for nothing, twitter bootstrap!

September 4th, 2013
Categories: Blog, CSS, Development, Hand coded, HTML, jQuery, Mobile | Tags: , , , , , , , , , , ,

I made this a little while back and have since used it in all my new website builds.

Here it is in action:


A video of my very own #responsive #framework #html #css3 #mediaqueries #DIY #grid #webdev #scriptedpixels #MobileDev by @scriptedpixels

DEMO
I’ve finally added a direct link to the Demo here

WHY?
I was working a late night on a project and decided to investigate some general frameworks and twitter bootstrap was appearing on all the blogs, plus I had heard a lot, good and bad, about it. With the majority of reviews being good; I decided to download it and give it a try.

The steps I took after were pretty much:

Downloaded -> unzipped -> pulled in to Sublime 2 -> a few minutes spent looking at all the classes in the .CSS -> confused -> not much documentation -> tried a small integration test -> deleted.

Why did such a greatly talked about framework documented so little…and full of bloat CSS?!

I was confused and annoyed. The website was pretty poor to navigate (it may have changed since I last used it) and finding basic documentation was painful…it was a late night after all!

bootstrapCss
The standard css for bootstrap. 1080 lines of CSS, most of which won’t be used!

The small integration test I did concluded my efforts with this “framework”. I was possibly just impatient with the whole process but there was one thing that I knew I would be doing if I had continued to use it: overwriting CSS.

I could’ve spent hours overwriting CSS ensuring current CSS wasn’t being overwritten by bootstrap’s and vice versa. When it comes to coding; I find it tedious having to repeat tasks like that, tasks that shouldn’t be this difficult or long winded.

If it’s something that’s being repeated over and over then there’s got to be an efficient way of doing it once.

HOW?
I started off building my own framework by going back to the basics and getting some ‘resets’ in place.

Kudos to: Eric Meyer for his CSS reset, it’s used everywhere!, Responsive.gs for the basic structure, to the TutPlus.com network for their amazing article on A basic responsive Grid and finally thanks to: www.snook.ca

You’ll notice my version is nearly the same as all three links and I can admit that at first I did copy all their code, which I then manipulated and made my own

My slightly modified reset.css file contains the following:

I added a fonts.css to setup my custom fonts and a global font size. Ensuring that I don’t need repeat CSS setting a font-family multiple times in multiple places in the project. This works the same for setting the font-size too – reducing the tedious task of ensuring all font sizes are the same throughout the projects files.

What is REM?
CSS3 introduces a few new units, including the rem unit, which stands for “root em”. If this hasn’t put you to sleep yet, then let’s look at how rem works.

The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.

I’m defining a base font-size of 62.5% to have the convenience of sizing rems in a way that is similar to using px.

But what pitiful browser support do we have to worry about?

You might be surprised to find that browser support is surprisingly decent: Safari 5, Chrome, Firefox 3.6+, and even Internet Explorer 9 have support for this. The nice part is that IE9 supports resizing text when defined using rems. (Alas, poor Opera (up to 11.10, at least) hasn’t implemented rem units yet.)

What do we do for browsers that don’t support rem units? We can specify the fall-back using px, if you don’t mind users of older versions of Internet Explorer still being unable to resize the text (well, there’s still page zoom in IE7 and IE8). To do so, we specify the font-size using px units first and then define it again using rem units.

And voila, we now have consistent and predictable sizing in all browsers, and resizable text in the current versions of all major browsers.

HOW TO MAKE IT WORK?
My main style sheet, named styles.css, contains the CSS for the main site when viewed on smaller screens – I choose, as recommended by many now on the web, to work from the smaller screen sizes up – ensuring that our mobile users aren’t downloading the whole desktop version of the site with elements hidden. This would waste our visitors time as well as resources (data-limits on network tariff’s is a biggie).

A file called “mediaqueries.css” plays the main role here for me. It controls the layout for any given screen resolution chosen. This file works from the smallest screen size up. The initial media query sets the breakpoint to optimise the layout for a screen that has a max-width of 480px. This is usually associate with mobiles in landscape. You can enhance these media-queries further by accessing the orientation as well as detecting high resolution (retina) screens to really make sure you’ve provided the best user experience. My standard code is as follows:

A file called “responsivegrid.css” holds all the magic of the grid. It’s created by Denis Leblanc and provides the classes that control the width of the columns. Unlike twitter bootstrap’s version my file is only 64 lines of code – without comments.

.row
Add this class to any element that spans the entire width of your container to clear any floating child elements. Also allows you to define spacing between rows.

.col
Add this class to child elements of a row to float left and add the default gutter width. This class must be used in conjuction with one of the span classes below.

.span_1, .span_2, .span_3, .span_4, .span_5, .span_6, .span_7, .span_8, .span_9, .span_10, .span_11, .span_12
Add one of these classes to a each col element to set it’s fluid width. On smaller screen sizes these elements will default to stack vertically.

.row, .col, .clr, .group
Add either of these classes to an element to clear it’s floating children. Uses the ‘clearfix’ method.

Things to remember
.col:first-child
The last col element gets the right margin removed with the col:first-child pseudo selector in order to fit within it’s parent element along with it’s siblings. The browser support for this goes as far back as IE7 so if you’re one of those innocent bastards still having to support IE6 then you’ll need to add an additional last class to your markup and CSS to remove the right margins.

To ensure the columns only apply their widths when needed I wrap the width’s for each span in a media query

This current example, and one that I hardly change, “activates” the column layout when the screen width is at a minimum width of 768 pixels. Originally, this was the set transitional width for when viewports would transition from landscape to tablet.

There’s now better ways to check for what device your visitors are using but you’re currently just looking to use this media query to enable a column layout and only when your content needs it.

By using media-queries/breakpoints and the “responsivegrid.css” rules I can create multiple layouts, as per any grid/framework.

Some small notes about this custom grid:

  1. Set the widths of images to be max-width:100%; so they don’t scale larger than their original dimensions
  2. Set the width of the outer most wrapper, normally a DIV or section called “wrapper or container” to 100% so it’s always filling the whole width of the page.
  3. Removed any margins from the 1st column to ensure all columns fit in, something that is sometimes overlooked

WRAP IT UP!
I feel that this could go on for a while, I think I’ve covered everything I needed…and more. I hope this is of some use to someone out there. I’m updating the grid as I continue to work with it, so I decided to add it to GitHub for people to keep track of changes and updates.

I’m currently working on a WordPress version too so trying to include some extra basic elements in to the current version.

Please, ask questions, highlight issues, complain or provide some constructive feedback below – everything is welcome!

  • jamjee

    Thank you, it’s perfect!
    Github page doesn’t work. I found old one in your repositories (5 month old). Can i use it or need any change?

  • Kam Banwait

    Ah, sorry I some how messed up my local Git App and it’s sync to the site. I’ll check the versions differences but I’m confident that version on Git is good to use and if there’s any issues just send me a message on here 🙂 Really happy you like it. How did you come across the post?

  • Kam Banwait

    Hey, I’ve just committed some changes to the repo. I’ve added some small changes for now but currently looking at my other site files for important changes/additions.

  • jamjee

    Thank you for update! I’ve been playing with it yesterday, seems no problem! I found your article via Google, i was searching a way to make “24 column responsive Twitter Bootstrap” for version 3. Your article solved my problem 🙂

  • John Errington

    Tried the GitHub link – 404! I’d love to try your framework out, can I get a copy please?!

  • Kam Banwait

    Thanks for letting me know! I had recreated the repo, I think, so the URL changed. I’ve updated the link now. Hope you find it useful 🙂

    I’m currently making a WordPress version for this and a basic implementation will be up by the end of this week 🙂

  • John Errington

    Thanks Ken, downloaded and waiting to try it. BTW the readme is readme.md – but seems ok as a .txt

  • Kam Banwait

    Yea the .md is for Github specifically but it should open fine in any text editor 🙂

  • cdjallwood

    Its a good start Kam, the only thing I would say is that its lacking tablet and mobile classes and so your grid simply collapses at tablet downwards, which assumes thats all the designer wants to happen.

    How I am currently doing is defining 3 different sets of grid classes which work at mobile, tablet and desktop levels. This means that you can define a 4 column grid for small screens, an 8 column grid for tablets and 12 at desktop, or whatever your choosing.

  • Kam Banwait

    Cheers Chris! That’s a very good idea and I currently use CSS to create the widths for mobile/tablet but I like that idea of adding that in to the Grid as a class so it can be “turned off/on” as the dev needs.

    Currently looking at making a SASS and wordpress versions so will start looking at adding it in 🙂

  • Jerry Miller

    FYI: “Quater” should be “Quarter” in your demo. Thought you might want to know.

  • Kam Banwait

    Aprove

    K.S.Banwait
    Creative Developer
    scriptedpixels.co.uk

  • Jerry Miller

    Awesome work BTW! I am going to incorporate your grid into my next project!

  • Kam Banwait

    Thanks for the kind words 🙂 It’ll be good to see the project once it’s completed.

  • This is my first time visit at here and i am truly pleassant
    to read everthing at alone place.

    My page: Appliance Repair Fort Lauderdale

  • We’re a bunch of volunteers and starting a new scheme
    in our community. Your site offered us with useful info to work on. You’ve done an impressive process and
    our entire group might be thankful to you.

    my site Appliance Repair Fort Lauderdale

latest work

  1. Responsive design, Responsive grid integration, Media queries, HTML5, jQuery, JavaScript, CSS3 animations

  2. Responsive carousel, design, grid and media queries, HTML5, custom jQuery & JavaScript, HTML5 & CSS3 animations, custom nomination form.

  3. Responsive design, grid and media queries, HTML5, custom jQuery & JavaScript, mobile optimised design and development

  4. Custom Wordpress posts, one page design and development, Custom JavaScript for mobile and desktop carousel switching, mobile optimised design and development

Back to top

designed & developed by Scripted Pixels Ltd