Skip to main content

Home/ CSS Evangelist/ Group items tagged layout-grid

Rss Feed Group items tagged

Gary Edwards

Grid design basics: Grids for Web page layouts - Opera Developer Community - 2 views

  •  
    Since tables were co-opted for layout purposes, columns have become key to many Web design layouts, and this thinking continued when CSS took over from tables (at least in the minds of savvy designers) for Web-page presentation. However, other fields of layout design don't think in arbitrary columns, they work with grids, and these form the basis for the structure of page designs. This article will provide the lowdown on grid design for Web pages. Thinking modular Grids are a template, a framework within which creativity can flourish. Too many designers spend time looking at a blank canvas, trying to figure out where elements should be positioned, but, if you have a flexible underlying grid, many such problems are already solved for you. It becomes obvious where and how elements should and can be positioned, thereby leaving you, the designer, with more time to work on graphic design and other page components.
Gary Edwards

Typogridphy - A Typographical and Grid Layout CSS Framework From Harry Roberts of CSS W... - 2 views

  • Grids & Typography Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts. Based on the popular 960 Grid System, Typogridphy allows you to create grid layouts which are versatile and great looking. Typogridphy is made of fully validate, semantic and strict xHTML, and validate CSS.
  •  
    Very nice. Great looking lists! Found this link at CSS-Tricks
yc c

YUI 2: Grids CSS - 0 views

  •  
    YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.
Gary Edwards

emastic - CSS Framework Project at Google Code - 0 views

  •  
    Emastic is a CSS Framework, it's continuing mission: to explore a strange new world, to seek out new life and new web spaces, to boldly go where no CSS Framework has gone before. * Lightweight (compressed weight less then 4kb) * Personalized width of the page in (em,px,%) * Use of fixed and fluid columns in the grid. * Elastic Layout with "em"s
  •  
    Interesting use of a CSS Framework for "Flow" Web documents and pages: Emastic is a CSS Framework, it's continuing mission: to explore a strange new world, to seek out new life and new web spaces, to boldly go where no CSS Framework has gone before. Why should you use emastic? .... Lightweight (compressed weight less then 4kb) ..... Personalized width of the page in (em,px,%) ....... Use of fixed and fluid columns in the grid. .......... Elastic Layout with "em"s
Hussain M Elius

jQuery Masonry - 7 views

  •  
    Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
Scott Hendrickson

A List Apart: Articles: Frameworks for Designers - 0 views

  • How should a CSS framework be built? There are several possible ways to go about building a framework, but the most common and arguably the most useful is to abstract your common CSS into individual stylesheets that each cover a particular part of the whole. For example, you may have a stylesheet that sets up the typography and another that handles the mass reset. The beauty of the approach is the ability to selectively include only the styles that you need. You may end up with six or seven different stylesheets in your framework, but if a particular project doesn’t need one or two of them, they don’t have to be included. The framework we created in our office has five stylesheets: reset.css—handles the mass reset. type.css—handles the typography. grid.css—handles the layout grid. widgets.css—handles widgets like tabs, drop-down menus, and “read more” buttons. base.css—includes all the other stylesheets, so that we only need to call base.css from our (X)HTML documents to use the entire framework.
  • A word of caution This method works quite well, but there is a valid concern to be raised: it adds to the number of HTTP connections needed to render each page. On large, high-traffic sites, adding five more HTTP connections to every page view may result in angry system administrators. Two possible solutions to this are: Include everything in a single file, rather than breaking it into modules. The problem here is that you lose the ability to include only certain parts of the framework, and you also make maintenance more difficult. Have a server-side process that dynamically flattens the individual files into a single response. I’ve not seen this done, but it could be very efficient if done well. Using my example framework above, this dynamic process could occur when base.css is requested, but not when type.css, grids.css, etc. are. This way, the individual components are still available, but the entire framework is available in a flattened version, as well.
yc c

960 Grid System - 2 views

shared by yc c on 03 Feb 10 - Cached
1 - 16 of 16
Showing 20 items per page