All posts tagged “Grid”

Bootstrap 3: The Grid System and Media Queries

Day after day lots of people for the first time in their life start using Bootstrap. Today we’d like to offer the Bootstrap 3 grid system guide.
MonsterPost

Build a Responsive Grid System in LESS with Recursive Mixins

You’re reading Build a Responsive Grid System in LESS with Recursive Mixins, originally posted on Designmodo. If you’ve enjoyed this post, be sure to follow on Twitter, Facebook, Google+!

Responsive Grid System in LESS with Recursive Mixins

Ever wanted to build your own responsive grid system? It’s easier than you think. LESS has a feature known as recursive mixins, which can generate code that we’d otherwise have to type by hand. A recursive mixin acts as a loop, executing a snippet of CSS until a stopping point is reached. In this video […]


Advertise here with BSA


Designmodo

Primer on Web-Based Grid Systems

You’re reading Primer on Web-Based Grid Systems, originally posted on Designmodo. If you’ve enjoyed this post, be sure to follow on Twitter, Facebook, Google+!

Primer on Web-Based Grid Systems

What’s in a grid? A grid-style framework is the backbone to almost any web design project, providing the structure for your site as well as a way to organize content, elements and images. There are a variety of grid systems out there that you can buy or download free. You can also create your own […]


Advertise here with BSA


Designmodo

Assembly Design’s 00 Clock: Juxtaposing measurement and abstraction, a grid wall-clock with reversible hands

Assembly Design's 00 Clock


Balancing a calculated academic approach with a very tactile studio process, the New York City-based duo Assembly Design (responsible for the imaginative furniture collaboration that debuted at this year’s ICFF) is now exploring familiar…

Continue Reading…


Cool Hunting

‘Off Grid’ makes data your most powerful weapon

In 2011, Rich Metson was a metal worker who was just starting to dabble in the world of coding and open source software. This newfound interest led him to a conference put on by the Internet Society, and in between dry discussions of internet protocols and domain names, he stumbled on a talk by Columbia University professor Eben Moglen. That moment was the first time Metson truly understood the implications of net neutrality and data privacy. He describes the talk as “a rallying cry.” And coupled with ongoing events like the Arab Spring uprising, it had a profound influence on him.

While some people might react by spreading the word through a blog or stiffening up their own personal privacy measures, Metson’s mind went in a completely…

Continue reading…

The Verge – All Posts

The designer’s guide to grid theory

Read more about The designer’s guide to grid theory at CreativeBloq.com


Grids are like the invisible glue that holds a design together, so whether you work in print or on the web you need to understand grid theory.




Creative Bloq

Flexible Grid Tools For Responsive Websites

With the introduction of new technologies and usage of new innovative ways, web industry has totally changed the criteria of web development. Today, responsive website layouts are more popular as compared to traditional website layouts. This is because of the reason that responsive website layouts are more interactive and they engage the visitors for relatively longer period of time. This is the reason why developers are now creating responsive website layouts to a greater extent.

With responsive website layouts, today’s websites are no more nifty looking websites rather they have been evolved and improved. Responsive website layouts are more reviving and refreshing and they also give life to your website design. Here is the complete collection for you of some amazingly flexible grid tools to help you create visually appealing and fully functional responsive websites. Let us have a look at this collection and enjoy! Feel free to share your opinions with us via comment section below.

Gridpak

A Responsive Web Design tool for creating grids by Erskine Design.

Responsive Calculator

Just a simple calculator to help turn your PSD pixel perfection into the start of your responsive website.

Responsive Grid System

The Responsive Grid System isn’t a framework. It’s not a boilerplate either. It’s a quick, easy & flexible way to create a responsive web site.

Semantic Grid System

Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.

Simple Grid

SG is prepared for 4 distinct ranges of screen size: screens 720px, screens > than 985px, and screens > than 1235px. So people visiting your site will receive a layout that’s tuned to the size of their browser window. Say goodbye to horizontal scrollbars.

Golden Grid System

A grid system for responsive web design. Includes folding columns, elastic gutters, a zoomable baseline grid, and a delightful grid overlay script.

Gridset

Designing grids with Gridset is as easy as dragging guides in Photoshop or Fireworks. Gridset provides whatever you need: PNGs, a comprehensive cheat sheet and CSS.

Columnal CSS Grid System

A responsive CSS grid system for rapid prototyping.

Foldy960

A responsive 960 grid from Paravel.

SUSY

Susy: Semantic grids with a responsive touch.

320 and Up

320 and Up is a lightweight, easy to use and content first responsive web design boilerplate.

jQuerin Grid Builder

The jQuerin Grid Builder is a responsive code generator which outputs clean and semantic html & css code.


Free and Useful Online Resources for Designers and Developers

44 Flexible Grid Tools For Responsive Websites

The web is changing at a great speed and is getting more and more responsive day by day and so its designs. Today, designers are now focusing on creating more responsive websites. Innovations and new technologies have given the web development a new and better dimension. Today’s websites are interactive, visually attractive as well as responsive.

Creating responsive website is a pleasant and refreshing shift but it requires loads of hard work and efforts. Such websites need to have two important components; one of them is a flexible fluid grid and the other one is responsive images.

Here, we are presenting 44 flexible grid tools that will help you in creating responsive websites. Here is the full collection after the jump. Enjoy!

Gridpak

Responsive Web Design tool for creating grids by Erskine Design.

The Grid

It’s a 12-column flexible grid that can scale out to an arbitrary size (defined by the max-width of the row) that’s also easily nested, so you can build out complicated layouts without creating a lot of custom elements.

Golden Grid System

A grid system for responsive web design. Includes folding columns, elastic gutters, a zoomable baseline grid, and a delightful grid overlay script.

Susy

The web is a responsive place, from your lithe & lively development process to your end-user’s super-tablet-multi-magic-lap-phone. You need grids that are powerful yet custom, reliable yet responsive.

Columnal CSS Grid System

The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. Columnal is an elastic grid, while some code inspiration (and the idea for subcolumns) are taken from 960.gs

Semantic Grid System

Set column and gutter widths, choose the number of columns, and switch between pixels and percentages. All without any .grid_x classes in your markup. Oh, and did we mention it’s responsive?

Responsive Calculator

Just a simple calculator to help turn your PSD pixel perfection into the start of your responsive website.

Adapt

Adapt.js is a lightweight (842 bytes minified) JavaScript file that determines which CSS file to load before the browser renders a page. If the browser tilts or resizes, Adapt.js simply checks its width, and serves only the CSS that is needed, when it is needed.

Gridless

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

Simple Grid

Responsive. Infinite nesting. One class per element. Simple.

Base Framework

A super simple, responsive framework designed to work for mobile devices, tablets, netbooks and desktop computers.

Bourbon Neat

A lightweight semantic grid framework for Sass and Bourbon.

Kube CSS Framework

Minimalistic and sufficient for everything, adaptive and responsive. Revolutionary flexible grid and beautiful typography. Absolute freedom with no imposed styling.

One% CSS Grid

One% CSS Grid is a 12 column fluid CSS grid system. It’s been designed as a base for building responsive web layouts easily, quickly and with minimum effort. You don’t have to take care of resizing and rearanging your layout for each platform separatelly. One% CSS Grid will do all this for you.

RWD Grid

rwdgrid is just another Grid system based on popular 960grid , which is responsive and ranges from mobile, tablet, laptops and wide screen displays. Naming convention of this grid system is similar to 960 grid system, where underscore is replaced by hyphen (increases readabilty).rwdgrid is having different Grid system made for 1200px+ Displays, 960px+ Displays, 720px+ Displays and Mobile screens.

Responsify

Responsify is a browser based tool, which allows you to create your own responsive template. Think of it as a foundation for you to build upon. You can customise the grid to suit your content, rather than trying to make the content fit the grid.

Simple Grid

Simple Grid was created for developers who need a barebones grid. Simple Grid works well with 1140px layouts but easily adapts to any size of layout. With fluid columns, Simple Grid is responsive down to mobile.

Toast CSS Framework

Toast is a CSS framework made as simple as it can be, but no simpler. A plain-English responsive grid makes simple layouts a breeze, and with box-sizing you can add padding and borders to the grid, without breaking a single thing.

Ivory

IVORY can easily adapt to any size screen from phones to TVs. It offers 4 different width layouts 1200px, 1140px, 1024px & 960px. You can define your own width also.

Responsive Aeo

Convention over configuration, just twelve columns,less code to learn means less bugs to solve.

Gumby

Gumby 2 is built with the power of Sass. Sass is a powerful CSS preprocessor which allows us to develop Gumby itself with much more speed — and gives you new tools to quickly customize and build on top of the Gumby Framework.

Skeleton

Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

1080 GS

The 1080 Grid System expands upon Nathan Smith’s 960 Grid System by simply adding an additional 120 pixels while utilizing the same margins. Thus, anyone who has ever used the 960 Grid System to design can easily do so with the 1080 Grid System.

960 GS

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

The Grid System

The ultimate resource in grid systems.

978 GS

978 is a grid layout system that uses 12 columns at 54px, with 30px gutters. This comes out to a total of 978px, which uses up most of the space on a 1024×768 monitor.

Grid System Generator

The grid system generator will create custom grid systems in valid css / xhtml for rapid prototyping, development and production environments.

Responsive Grid System

The Responsive Grid System isn’t a framework. It’s not a boilerplate either. It’s a quick, easy & flexible way to create a responsive web site.

Mueller Grid System

MUELLER is a modular grid system for responsive/adaptive and non–responsive layouts, based on Compass. You have full control over column width, gutter width, baseline grid and media–queries.

Variable Grid System

The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.

34 Responsive Grid System

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

ZEN GRIDS

A responsive grid system built with the power of Sass.

LessFramework 4

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

Fluid Grids

A CSS Framework for Rapid Interactive Prototyping.

Flurid

A cross-browser CSS grid framework that doesn’t hide pixels in margins!

Gridset

Designing grids with Gridset is as easy as dragging guides in Photoshop or Fireworks. Gridset provides whatever you need: PNGs, a comprehensive cheat sheet and CSS.

Tiny Fluid Grid

The happy & awesome way to build fluid grid based websites.

Style Tiles

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.

Responsivepx

Responsivepx – find that tricky breakpoint.

Multi-Device Layout Patterns

Through fluid grids and media query adjustments, responsive design enables Web page layouts to adapt to a variety of screen sizes.

Responsive Web Design Sketch Sheets

Responsive Design Test Bookmarklet

Screenqueri

Proportional Grids


Free and Useful Online Resources for Designers and Developers

Easily Create Dynamic Grid Layout With FreeWall

If you are familiar with Windows 8 or Pinterest, you know of the dynamic grid layout. A dynamic grid is a layout where you can rearrange and reposition child elements as required or when you have your browser resized. A popular jQuery plugin used to create this layout is jQuery Masonry but if you want more options and even animation, check out FreeWall.

FreeWall is a free jQuery plugin from Minh Nguyen which you can use to create many grid layout types: flexible layout, metro style layout, nested grids, image layout and fluid grid. It also has support for responsive design so you can display your site in desktop, mobile or tablet.

On top of that it also has very nice CSS animations and callback events like onGapFound, onComplete, onResize and onSetBlock.

Getting started

To get started with FreeWall you need to include the jQuery or Zepto framework. In this basic guide, we’re going to use jQuery as an example to make a normal grid layout demo.

Now let’s first include the jQuery framework as well as the FreeWall plugin with the following code.

 <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="js/freewall.js"></script> 

We will display some brick pieces for the container of the layout.

 <h2>Normal grid</h2> <div class="free-wall"> <div class="brick size320"></div> <div class="brick size320"></div> <div class="brick size320"></div> <div class="brick size320"></div> <div class="brick size320"></div> <div class="brick size320"></div> </div> 

And define our brick sizes with the width and height values of 320px using the style rule below:

 .size320 { width: 320px; height: 320px; } 

Now, to add some javascript code.

Make It Work

To give random colors to the bricks, we’ll define some color arrays and apply them to the bricks using the Math.random() method like so.

 var colour = [ "rgb(142, 68, 173)", "rgb(243, 156, 18)", "rgb(211, 84, 0)", "rgb(0, 106, 63)", "rgb(41, 128, 185)", "rgb(192, 57, 43)", "rgb(135, 0, 0)", "rgb(39, 174, 96)" ]; $  (".free-wall .size320").each(function() { var backgroundColor = colour[colour.length * Math.random() << 0]; var bricks = $  (this).find(".brick"); !bricks.length && (bricks = $  (this)); bricks.css({ backgroundColor: backgroundColor }); }); 

Lastly, we’re going to add functions to make the layout display well. Here is what makes FreeWall great. It has some options and methods to control the behaviour of the grid. The options offered by FreeWall are:

 animate : true, // True to make block move with animation. block.flex : true, // True to made block can resize a bit to fit. cell.width : number, cell.height : number, fillGap : true, // True will made layout without gap. gutter : mixed, // The spacing between the blocks. selector : string, // Get all blocks to made layout. 

Let’s call the plugin using the following code.

 $  (function() { $  (".free-wall").each(function() { var wall = new freewall(this); wall.reset({ selector: '.size320', cellW: function(container) { var cellWidth = 320; if (container.hasClass('size320')) { cellWidth = container.width()/2; } return cellWidth; }, cellH: function(container) { var cellHeight = 320; if (container.hasClass('size320')) { cellHeight = container.height()/2; } return cellHeight; }, fixSize: 0, gutterY: 20, gutterX: 20, onResize: function() { wall.fitWidth(); } }) wall.fitWidth(); }); $  (window).trigger("resize"); }); 

As you can see in the above function code, we use some of the FreeWall option, method and event. Like fixSize, gutterY, gutterX, onResize and fitWidth. If you want to use another option, method or event you can find the documentation in the FreeWall official homepage.

Now you can see the dynamic grid layout in action in the demo page. If you resize your browser, the bricks will automatically be rearranged and resized.

References


    




hongkiat.com

Photoshop Grid Templates: Designing Through the Line

If you’re just starting your design career you need something that will make your layouts perfectly looking and that is a grid. In this blog post you will find number of resources where you can download Free Photoshop Grid Templates.
Template Monster Blog