Pinterest • The world’s catalog of ideas

Explore Site We Re, Complete Refresh, and more!

GRID-BASED ➤ Unfortunately offline for the forceable future thanks to spammers exploiting the site. we're now on a brand new server and will see a complete refresh in the near future… in the meantime here are some of our favourite sites and grid related resources from over the years.

GRID BASED DESIGN ➤ Grid based design for websites is becoming more popular, but the technique is still somewhat unknown. Design By Grid is a resource to promote websites designed with grids, and the tools and techniques used to make websites with grids.

THE GRID SYSTEM ➤ is an ever-growing resource where graphic designers can learn about grid systems, the golden ratio and baseline grids. Made popular by the International Typographic Style movement and pioneered by legends like Josef Müller-Brockmann and Wim Crouwel, the grid is the foundation of any solid design.

CSSSVALT ➤ user-submitted sites, where you can look at some sample sites designers have submitted.

Zen Grids ➤➤ A responsive grid system for SASS that eliminates the need for pre-defined grid class attributes.

from Smashing Magazine

The Semantic Grid System: Page Layout For Tomorrow

No modern grid system would be complete unless we had the ability to adapt the layout of the page to the size of the user’s screen or device. With, manipulating the grid using media queries couldn’t be any easier

FLUID BASELINE GRID ➤is an HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease. The FBG system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework. It is packed with CSS normalization, beautiful typographic standards, corrected bugs, common browser inconsistencies and improved usability.

SIMPLE GRID ➤Exactly as it says, Simple Grid is a straightforward, simple grid that allows you to quickly construct layouts. The grid doesn’t require extra classes for the end of columns and includes a LESS version for development.

COLUMNAL CSS GS ➤ is a “remix” of a couple others with some custom code thrown in. The elastic grid system is borrowed from, while some code inspiration (and the idea for subcolumns) are taken from WHY USE IT? ➤ Columnal makes responsive web design a little easier. It is 1140px wide, but since it is fluid, will respond to the width of most browsers. If the browser gets thin enough, the site will change to a mobile-friendly layout.