Tiny Fluid Grid
Inspired by the 1kb Grid, the Tiny Fluid Grid is a super simple fluid layout generator. Its download comes with a index.html with demo code, and the grid.css containing the CSS for the grid that you have created.
Tiny Fluid Grid »
Gridinator – Fixed, Elastic and Fluid Layouts
The concept for GRIDINATOR is to allow for easy creation of custom, grid-based layouts. As well as being able to create solid fixed grid layouts, you can also choose to create a fluid or elastic layout, click the links below to view the demos:
Gridinator – Fixed, Elastic and Fluid Layouts »
Gridinator Fluid Example »
Gridinator Elastic Example »
CSS Layout Generator – Fixed and Fluid Layouts
This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.
CSS Layout Generator – Fixed and Fluid Layouts »
CSS Layout Generator – Fixed and Fluid Layouts »
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 and the system was updated last year to allow for fluid grid layouts.
Variable Grid System »
Variable Grid System Fluid Grid Example »
PageColumn.com Layout Generators – Fixed and Liquid
PageColumn.com offers a selection of different multi-column grid layout generators, you can choose which generator you need from the list below.
2 Column Fixed Liquid Layout Generator »
2 Column Liquid Fixed Layout Generator »
3 Column Fixed Liquid Fixed Layout Generator »
3 Column Liquid Fixed Fixed Layout Generator »
Fluid Grid System
The Fluid Grid System is great for rapid prototyping as well as final production layouts allowing designers to quickly design layouts and make changes to complex pages which have the ability to maintain well-planned horizontal and vertical rhythm.
Fluid Grid System »
Fluid 960 Grid System
The Fluid 960 Grid System templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the MooTools and jQuery JavaScript libraries. The idea for building these templates was inspired by Andy Clarke, who advocates a content-out approach to rapid interactive prototyping.
Fluid 960 Grid System »
Fluidgrid – A CSS Based Fluid Grid System
Fluid Grid is a new grid system that works the same way as Blueprint or 960, but with any page width, even fluid layouts. It is based only on CSS.
The sad thing is that Fluidgrid is still in development, but you can preview of what you will be able to do with it soon.
Fluidgrid – A CSS Based Fluid Grid System »
FluidGrids – A CSS Framework for Rapid Interactive Prototyping
Emastic – CSS Framework
Emastic is a very lightweight (4kb) em based CSS grid framework. Its columns (fixed or fluid) are in em from 1 to 75, they can be floated either left or right and its main width can be in either em, px or %.
Emastic – CSS Framework »
Emastic Frameworks Blank CSS Templates »
Elastic CSS Framework
Elastic is a simple CSS framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily. You can view its demos below.
Elastic CSS Framework »
Elastic Columns Demo »
Elastic Web Layouts Demo »
Elastic Layouts Demo »
Elastic Adaptive Columns Demo »
Less Framework
Less Framework is a CSS framework for building flexible multi-column website layouts. It contains a ten column grid optimized for a line-height of 24px, as well as a set of typography presets based on the golden ratio that fit into the grid’s vertical rhythm.
Less Framework »
The Perfect Fluid Width Layout from CSS Tricks
This layout accommodates 90%+ of all internet users. It Shrinks to a minimum of 780px (accomodating users with 800×600 resolution, with no horizontal scroll) and Grows to 1260px (accomodating users with 1280×768 resolution and everything in between).
The Perfect Fluid Width Layout from CSS Tricks »
View the Demo »
SuperStretch! – A Vertically Fluid Layout Using CSS
This layout stretches both horizontally and vertically to the browser viewport. It includes a vertical navigation bar where button heights also stretch. It works in FF, Safari, Chrome, Opera, and IE 6-8
SuperStretch! – A Vertically Fluid Layout Using CSS »
View the Demo »
Liquid Layout Templates by Andrew Sellick
Here you will find a collection of six liquid layout templates by Andrew Sellick, you can view and download them below:
Liquid Left – Fixed Right Template
by Andrew Sellick
Demo & Download »
by Andrew Sellick
Demo & Download »
Fixed Left – Liquid Right Template
by Andrew Sellick
Demo & Download »
by Andrew Sellick
Demo & Download »
Liquid Left – Two Fixed Right Template
by Andrew Sellick
Demo & Download »
by Andrew Sellick
Demo & Download »
Fixed Left – Liquid Middle – Fixed Right Template
by Andrew Sellick
Demo & Download »
by Andrew Sellick
Demo & Download »
Equal Height Columns Template
by Andrew Sellick
Demo & Download »
by Andrew Sellick
Demo & Download »
Liquid Left – Two Fixed Right Template
by Andrew Sellick
Demo & Download »
by Andrew Sellick
Demo & Download »
CSS Website Layouts and Templates (justdreamweaver.com)
All of the liquid layouts are coded to have a minimum page width of 760 pixels and a browser window width of 80 percent. The elastic layout widths are defined in ems, so as the text size increases, so does the width of the content containers. You can view and download the templates below:
One Column Liquid & Centered Layout
via justdreamweaver.com
Demo & Download »
via justdreamweaver.com
Demo & Download »
Two Column Liquid & Left Sidebar Layout
via justdreamweaver.com
Demo & Download »
via justdreamweaver.com
Demo & Download »
Two Column Liquid & Right Sidebar Layout
via justdreamweaver.com
Demo & Download »
via justdreamweaver.com
Demo & Download »
Three Column Liquid Layout
via justdreamweaver.com
Demo & Download »
via justdreamweaver.com
Demo & Download »
Three Column Elastic Layout
via justdreamweaver.com
Demo & Download »
via justdreamweaver.com
Demo & Download »
Two Column Elastic & Left Sidebar Layout
via justdreamweaver.com
Demo & Download »
via justdreamweaver.com
Demo & Download »
Two Column Elastic & Right Sidebar Layout
via justdreamweaver.com
Demo & Download »
via justdreamweaver.com
Demo & Download »
Dynamic Drive Liquid CSS Layouts
Dynamic Drive offers a collection of liquid CSS layouts, where the layout spans the entire page width wise, expanding and contracting as the page is resized.
You can view the templates below:
You can view the templates below:
CSS Layout (Fluid-Fluid-Fixed)
via Dynamic Drive
Demo & Download »
via Dynamic Drive
Demo & Download »
CSS Layout (Fixed-Fixed-Fluid)
via Dynamic Drive
Demo & Download »
via Dynamic Drive
Demo & Download »
CSS Layout (Fluid-Fluid-Fixed)
via Dynamic Drive
Demo & Download »
via Dynamic Drive
Demo & Download »
CSS Layout (Fluid-Fluid-Fixed)
via Dynamic Drive
Demo & Download »
via Dynamic Drive
Demo & Download »
CSS Layout (Fluid-Fixed-Fixed)
via Dynamic Drive
Demo & Download »
via Dynamic Drive
Demo & Download »
CSS Layout (Fluid-Fluid-Fluid)
via Dynamic Drive
Demo & Download »
via Dynamic Drive
Demo & Download »
CSS Layout (Fluid-Fluid-Fixed)
via Dynamic Drive
Demo & Download »
via Dynamic Drive
Demo & Download »
CSS Layout (Fixed-Fluid-Fixed)
via Dynamic Drive
Demo & Download »
via Dynamic Drive
Demo & Download »
CSS Layout (Fluid-Fixed)
via Dynamic Drive
Demo & Download »
via Dynamic Drive
Demo & Download »
CSS Layout (Fixed-Fluid)
via Dynamic Drive
Demo & Download »
via Dynamic Drive
Demo & Download »
CSS Layout (Fluid-Fluid-Fluid)
via Dynamic Drive
Demo & Download »
via Dynamic Drive
Demo & Download »
Perfect Multi-Column CSS Liquid Layouts (matthewjamestaylor.com)
This series of website layouts use percentage widths and relative positioning, and they work with all the common web browsers including Safari on the iPhone and iPod touch. They're also 'stackable' so you can use multiple column types on the one page. This makes the number of possible layouts endless!
You can view the liquid templates below:
You can view the liquid templates below:
Two Column Liquid Layout (Right Menu)
via matthewjamestaylor.com
Demo & Download »
via matthewjamestaylor.com
Demo & Download »
Two Column Liquid Layout (Double Page)
via matthewjamestaylor.com
Demo & Download »
via matthewjamestaylor.com
Demo & Download »
Full Page Liquid Layout
via matthewjamestaylor.com
Demo & Download »
via matthewjamestaylor.com
Demo & Download »
Multi-Column Stacked Liquid Layout
via matthewjamestaylor.com
Demo & Download »
via matthewjamestaylor.com
Demo & Download »
Three Column Liquid Layout
via matthewjamestaylor.com
Demo & Download »
via matthewjamestaylor.com
Demo & Download »
Three Column Liquid Layout (Blog Style)
via matthewjamestaylor.com
Demo & Download »
via matthewjamestaylor.com
Demo & Download »
Two Column Liquid Layout (Left Menu)
via matthewjamestaylor.com
Demo & Download »
via matthewjamestaylor.com
Demo & Download »
Liquid CSS Layout Templates by Design Shack
Design Shack have a collection of 12 great CSS templates to base your design on, both fixed and fluid layouts. These free CSS templates are designed by Mitch Bryson, and provided for you with his permission. You can view the liquid templates below:
One Column Fluid CSS Layout
via Design Shack
Demo & Download »
via Design Shack
Demo & Download »
Two Column Fluid CSS Layout
via Design Shack
Demo & Download »
via Design Shack
Demo & Download »
Two Column Fluid CSS Layout
via Design Shack
Demo & Download »
via Design Shack
Demo & Download »
Three Column CSS Layout
via Design Shack
Demo & Download »
via Design Shack
Demo & Download »
Three Column Fluid CSS Layout
via Design Shack
Demo & Download »
via Design Shack
Demo & Download »
Three Column CSS Layout
via Design Shack
Demo & Download »
via Design Shack
Demo & Download »
100 Percent CSS Liquids Layout (ironmeyers.com)
These CSS Layouts offer full Grade-A browser support. Each CSS Layout will look and behave the same in all internet browsers, like Internet Explores 6 (IE6), Internet Explorer 7 (IE7), Firefox, Opera, Safari and so on. You can choose from either the 100% width templates or 974, 950 or 750px fluid layouts.
100 Percent CSS Liquids Layout (ironmeyers.com) »
Layout Gala – Liquid Layouts
The CSS of the examples, which is embedded in both online and the download versions, has been kept to the minimum in order to focus on the most important thing, as is the layout. In fact, the CSS has been divided, with an empty line, between two logical parts: the first is for typography and colors, while the second and most important is for the layout itself.
Layout Gala – Liquid Layouts »
Liquid, Fluid & Elastic Basic Layout Tutorials
Create a Simple Liquid Layout (.net magazine) »
This is a fairly old (2006) tutorial, but uses modern trend relevant techniques. Its purpose is to produce a robust cross-browser liquid layout, using absolute positioning rather than the more commonly known technique of using floats.
This is a fairly old (2006) tutorial, but uses modern trend relevant techniques. Its purpose is to produce a robust cross-browser liquid layout, using absolute positioning rather than the more commonly known technique of using floats.
Liquid Layouts the Easy Way »
This article explains one method of achieving a successful liquid layout as well as providing basic definitions of liquid, fixed-width and em-driven layouts.
This article explains one method of achieving a successful liquid layout as well as providing basic definitions of liquid, fixed-width and em-driven layouts.
CSS Liquid Layout Designs Tips »
Here are few tricks that you can use when it comes to working with semi-liquid layouts.
Here are few tricks that you can use when it comes to working with semi-liquid layouts.
Create a 3 Column Fluid Layout using HTML/CSS »
This tutorial will teach you how to create a fluid 3 column layout using HTML & CSS.
This tutorial will teach you how to create a fluid 3 column layout using HTML & CSS.
How to Create a Fluid Grid with jQuery »
This tutorial is about how to use CSS and Javascript to create a fluid grid-based layout. The algorithm/procedure used in this tutorial is very simple and easy to follow.
Demo
This tutorial is about how to use CSS and Javascript to create a fluid grid-based layout. The algorithm/procedure used in this tutorial is very simple and easy to follow.
Demo
Liquid, Elastic & Fluid Further Reading
Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You? »
This article discusses the pros and cons of each type of layout. Either one can be used to make a successful website layout, as long as you keep usability in mind.
This article discusses the pros and cons of each type of layout. Either one can be used to make a successful website layout, as long as you keep usability in mind.
Adaptive CSS-Layouts: New Era In Fluid Layouts? »
In this article, it discusses effective techniques to create 100%-functional adaptive CSS-layouts, and provide details on other tutorials and practices.
In this article, it discusses effective techniques to create 100%-functional adaptive CSS-layouts, and provide details on other tutorials and practices.
A List Apart articles on Fluid, Liquid and Elastic Layouts
Fluid Grids , Elastic Design & In Search of the Holy Grail.
Fluid Grids , Elastic Design & In Search of the Holy Grail.
Comments
Post a Comment