Design Resource Box

Tuesday, November 20, 2012

34 Responsive Grid System: A GS Based On Equally Distributed Columns

34Grid is a Responsive Grid System based on “equally distributed columns” layout basis. In contrast to other great grid systems, 34Grid provides equally distributed columns for each row. (and also column complements for unequal distributions).

Use customization options to create your own bundle. You’ ve four options defined in options section below. If you’re not familiar with grid systems, before you dive in, move around page for better understanding.

After you download 34Grid bundle, you’ll have a zip file. It includes 2 folders named “css” and “demo”. “demo” folder contains a simple “layout.html” page which shows possible column setups for columns and complements. “css” folder is your project file. Move this folder (or its contents) to your project to start using 34Grid. “css” folder has 2 files, one for columns, complements and necessary styles for whole system and the other for media queries.

34 Grid System seems so ugly when you just consider “layout.html”. Don’t panic! It’s just a scheme for selecting appropriate columns for your project layout. In a real design we won’t use both 1,2,3,4,5,6,7, … columns together and ordered like “layout.html”. We often choose 1,2,3 and 4 columns and use them as layout. So, don’t panic.

There is also a width preview calculator you have in the form. (“toggle calculator” link) A percent-pixel conversion table to preview 960px, 480px, 320px widths of selected values. (click “a little help” link to see dividableBy, margin, rowMargin in action)

HTML Part


<!--main wrapper class for all content-->
<div class="container">
   <!--row of 1 (single column)-->
   <section class="row">
      <div class="col_1">col_1</div>
   </section>
   <!--row of 2's-->
   <section class="row">
      <div class="col_2">col_2</div>
      <div class="col_2">col_2</div>
   </section>
   <!--row of 3's-->
   <section class="row">
      <div class="col_3">col_3</div>
      <div class="col_3">col_3</div>
      <div class="col_3">col_3</div>
   </section>
   <!--row of 4's-->
   <section class="row">
      <div class="col_4">col_4</div>
      <div class="col_4">col_4</div>
      <div class="col_4">col_4</div>
      <div class="col_4">col_4</div>
   </section>
   <!--row of 5's-->
   ...
</div><!--eof container-->

CSS Part

.container

Main wrapper class. Use “.container” class as your holder for “.row” groups. You can control max. width of your content with container class in each @media state.

.row

Consider “.row” classes as semantic grouping blocks. You can dump more than one “100%” width content in a single row. Here is the math: “A row can contain [n*100%] columns, so you can start 2 col_2’s and then without defining a new row continue with 3 col_3’s then 4 col_4′s and so on..”

.col_1, .col_2, .col_3, .col_*

Different width options for your design. col_1 is a single cell in a row, col_2 is 2 columns in a row, col_3 is three equal columns for a row and so on..

.col_1c, .col_2c, .col_3c, .col_*c

Complement classes are unequal distributions. A complement class fullfills it’s main class and provides a 100% width. (“.col_3″ + “.col_3c”, “.col_4″ + “.col_4c, …”)

.skip-float

When you use n*100% width content in a single row, if first column of current full width group is taller than all subsequent columns then we got a floating problem. But don’t worry, solution is fairly simple. Just clear left of new 100% groups first column with .skip-float class. There, we got a new line. see tutorial image

.skip-float works autonomous. It places a brand new line to break with preceding 100% width group in same row group. But what if we need to float our columns in same 100% width group? Here the boring and problematic part comes. When it comes to same row group floating, we need to control each problematic non-floating column in it’s own @media state in queries CSS file. It’s hardly-manual but mandatory for now. see tutorial image

.video-holder

This class does some extra work. With a little CSS trick you can embed youtube, vimeo videos responsively to your web site. It’s easy to use, just wrap your embed code with “.video-holder” class.

img, object, video, figure

In 34Grid, visual elements are automaticly resizing to 100% width. If you want to change this default behaviour, simply delete CSS code related to this elements.

Further documentation and download