What is a CSS Grid Framework?
Layout grids have been used in print publishing long before the Web. They’re an invisible foundation used to achieve visual cohesion in magazine and newspaper page design and layout. They essentially amount to a lattice that divides horizontal and vertical space in consistent units where text, headlines, images, and advertising can be placed.
The same concept has been adapted for web page design for much the same reason, using CSS (Cascading StyleSheets) code to position HTML elements. In fact, many editorial sites run by large print media publishers do apply grids to achieve a look on their websites that’s similar to their print content. Note that the vertical axis is not as well supported in CSS Grid systems, since a web page’s height is not as much of an issue as for a printed page. (Still, that’s a minor issue in web page design, unless you expect the same features as with Desktop Publishing – aka DTP – systems, which is difficult to support without a PostScript-like language for browsers to implement and support.)
Read full article
The first part of this Five Simple Steps series is taking some of the points discussed in the preface and putting it to practice.
Ratios are at the core of any well designed grid system. Sometimes those ratios are rational, such as 1:2 or 2:3, others are irrational such as the 1:1.414 (the proportion of A4). This first part is about how to combine those ratios to create simple, balanced grids which in turn will help you create harmonious compositions.
Read full article
The main idea behind grid-based designs is a solid visual and structural balance of web-sites you can create with them. Sophisticated layout structures offer more flexibility and enhance the visual experience of visitors. In fact, users can easier follow the consistency of the page, while developers can update the layout in a well thought-out, consistent way. However, it’s quite hard to find your way through all the theory behind grid systems: it isn’t easy at all. Some important notions and related key-facts can help to learn basics and keep essential techniques in mind.
And this is what this article is all about. Inspired by Khoi Vinn’s and Mark Boulton’s presentation Grids are Good, we’ve decided to take a deep look in the articles about grid-based designs. We’ve read through over 50 articles and selected some of the most important and interesting facts web-developers should know about the grid-based approach. Besides, we’ve listed the most useful references, tutorials and tools we found – with precise descriptions of what the articles are about
Read full article
Every design you make should have a clear grid system whether its print or for the web because they help to organize information into a clear easy to follow layout. Here we roundup the best articles and resources on the subject.
For some time now I’m devoted completely to Web Grid Design. First I built Emastic then Malo and now The Golden Grid.
Emastic is a very complete CSS Framework integrating various CSS construction techniques like floats, absolute positioning, complete freedom of your default width, extra usability with em based grid system plus possibility of fluid columns and extra % based grid system and many more features. Then the question is why build another grid system.
I was searching for the prefect web grid, playing with golden proportions, rule of thirds, symmetry, asymmetry, usability, monitor proportions, typography and the result came spontaneous – The Golden Grid. Why not share it with you 
.
Read full article
The Golden Grid is a CSS based grid system.
There are two CSS systems called golden-base(golden.css) and golden-extend(reset.css, golden.css , typography.css)
Golden Base = min css reset + grid system
Golden Extend = complete css reset + grid system + typography
Read full article
CSS is beauty. Yes that is because it adds beauty to your roughly built html pages and texts. It is not harder to beautify a web page by using graphics, but sometimes graphics are expensive when we are talking about overall page load time.
There is always been a big war between CSS and tables. In simple words war between tables based html web pages and tables html web pages. Both of their own pros/cons but CSS make the things simple and better.
When we talk about building multiple column web pages by using table based code or CSS then float theory and floating the elements (columns) in their proper place is always a headache.
960 Grid systems will make these things simpler and cleaner. 960 Grid system is a CSS framework, very easy to use and flexible for making as many as 12 up to 16 column design.
960 basically have predefined Div sections and containers. You don’t need to worry about any floating problems. All you have to do is to use either 12 column container or 16 column container depending on your needs. Then make your own columns by using their grid classes.
Read full article
Blueprint is a CSS framework that can save you time and headaches when working on any project that involves HTML and CSS, whether it be with Rails, PHP, or just laying out an HTML page. In this tutorial you will get a look at the inner workings of Blueprint and we’ll take a look at demo application that uses Blueprint to get a better idea of how to use actually use the framework.
Read full article
Ever wondered how all those slick “magazine” themes for WordPress and other platforms were created? Many, if not all, were designed using a CSS Grid Framework – at least in essence if not in actual fact. That is, you can use an existing CSS framework or build your own from scratch. While it’s possible to design complex web page layouts without a framework, it’s arguably an act in masochism. In this article you’ll get an overview of the current batch of Frameworks and which you should choose to use.
Read full article
WP_Query is a powerful tool to control what comes out of your loop. Today I’m going to teach you all how to use it to make a 3 columned newspaper theme that has all your main blog posts in the main column, and off to the side a set of posts with a certain category. We’ll be using the 960 CSS framework for the basic layout and reset of our theme, it will chop a lot of work off what’s needed!
Read full article
