Weekly freebies in your inbox.

Freebies By Design Shock

Flat GUI: Spectacular set with more than 500 elements, 30 different colors and 100 vectors icons, totally editable files.

Divisors Mega Pack: 150 editable and repeteable vector divisors with sources in PSD

Form Templates: 250 login, register, newsletter, contact and social login templates with sources in PSD

Facebook Covers: 150 professional facebook covers with sources in Photoshop

Wooden texture pack: 300 + tileable wooden textures, several wood styles included.

Hades PSD Gui: Menus, tabs, sliders, buttons, icons, scrollbars, players, widgets, text elements.

Mega Ribbons Pack: 100 different ribbon styles, 30 color variation, with sources in PSD

Shock Handwritten Font: A beautiful, and exclusive free font you can download now

Pricing tables and business icons: 50 designs, 20 colors,112 icons, with PSD sources

More than 50 Full Folder and Brochure Templates with sources files in PSD

Invoice Templates and business templates, 15 free with sources in PSD, Ai and InDesign

MEGA Business Characters: More than 1000 characters, with sources files in AI

3D text effect for Photoshop, 50 3D styles and actions pack for photoshop.

Full iPad Gui pack (Retina display) 5 styles, 150 elements per style, sources files in PSD.

Monster mascots with source files, more than 1 million combinations

The most impressive Button Pack Ever: 2000 buttons, 100 design styles, 5 color variations

Ares GUI set: A full 3D GUI pack, more than a thousand 3D styled interface elements

Huge business pack: 50 business card designs, including PSD sources

Badges Galore: more than 100 badges, 5 different styles, 30 different colors.

FancyTables: Several styles and colors, including PSD, CSS and Bootstrap versions.

‹ ›

Friends

Weekly freebies in your inbox

Percentage grid system in HTML5

May 5th/2011

Comments and suggestions in here

When diagramming for the web, one of the most useful ways of doing it is through grid systems to help the designer layout faster. Today we found a nice percentage based grid system that is nested in the Easy framework’s CSS.

This grid system features a percentage-based width in all its columns to make them adjust to the container element, which means that by using this system you will not have to set the width value for every column manually, just put it inside any container and both the column widths and gutters will be adjust perfectly.

The system can take up to 6 equal width columns, giving you the opportunity to choose from 2 to 6 columns in the set. You can have double, triple and up to quintuple columns per each column set, so given the case you have different column sets in one single container you will have equal gutters.

percentagehtml501

The article explains how to properly name the columns and containers, edit the column padding and also features the following demos:

Visit the Original link

WebDesignShock Editorial

Author: Juan Pablo Sarmiento Founder and curator of:
iconshock
themeshock
boxofbundles
wpthemegenerator
webdesignshock

8 Responses to “Percentage grid system in HTML5”

magento themes
May 9th

Try magento for better and easy way….

Reply
- WebDesignShock
  May 9th
  
  Thanks mate, we’ll keep that in mind…
- magento themes
  May 10th
  
  U r welcome dear….
- Anonymous
  May 9th
  
  Magento? can u point us to it to do a review !
- magento themes
  May 10th
  
  Check out http://www.magento-themes.jextn.com/ for details…

cynthia nelson
December 20th

There are some many post on CSS3 Development. I use this process.

Reply
- WebDesignShock
  December 20th
  
  Always glad to see that our pieces are of great use to visitors’ projects. Best regards
- WebDesignShock
  December 20th
  
  You’re welcome, always glad to see that our pieces are of great use to visitors’ projects. Best regards…….