Square Grid Drupal: Lưới thiết kế theme

Square Grid Drupal: Lưới thiết kế theme

Grids. They're powerful. They're helpful. They can make design work much easier. (And occasionally harder.) They can be used for good or ill. And they can trap the designer in a cage of vertical and horizontal bars.

The question as to the use grids is not settled among designers, especially on the web. The arguments seem to fall into these three categories:

  1. Grids are useless. Design has to be organic to come alive. Grids spell the death of design by imposing mechanical structure onto what is inherently intuitive.
  2. Grids are everything. If you stray from grids (or ignore them altogether), your design will end up being off, often in ways you don't readily see when just looking at it.
  3. Grids can be useful as design aids, just like compasses and protractors, but you have to decide on a case by case basis which grid, or whether to grid at all, is appropriate.

I tend to fall somewhere between 2 and 3. As someone working in html markup and CSS, I feel that grids offer more than simple design guides. HTML/CSS applications, on the web or off, are inherently structural in presentation. Grids can help immensely by providing a basis for translation from static concept to dynamic markup presentation.

And yet I also agree that grids can be a trap, so you really do need to decide on a case-by-case basis whether a grid will help or just get in the way — especially in static design, where you need to take into consideration the context of the design, and where other things like compositional balance, contrast dominance, use of color and so on have quite different uses than in interaction design.

Even so, I'm not all that likely to reject using a grid system altogether in an application design. In the past year at PINGV Creative, we've been working a lot with 960 and the NineSixty theme in Drupal, which I was first exposed to at the Design4Drupal conference at MIT last year. It's very useful for web app design.

But at times I've felt the limitations of 960. For one thing, giving up 20px margins on either side of the design can be frustrating, and often feels like a waste. I also miss working with the Golden Ratio, which can give a site such a gorgeous balance.

I'm not alone. Recently Nick LA wrote a critique of 960 and offered a simplified alternative, the 978 grid, which uses less markup and CSS to implement a layout very close to that of 960, but with larger gutters and without the wide side margins. I was fascinated by this new approach, despite its limitations.

It was while reading through peoples' comments that I saw mention of another grid system I had not heard of. I went to look, and found a design grid system that seemed even more innovative, and more flexible to boot:

The Square Grid

On grids in design (and announcing the Square Grid Drupal theme)

The Square Grid was created by Avraham Cornfeld

Avraham Cornfeld's Square Grid approach immediately struck me as a wildly useful idea: Use a 35-box-wide grid to create designs using 12-column, 16-column, 9-column or even Golden Ratio grids. I also loved that this grid provides by default 28-pixel gutters instead of 960's 20 pixels, providing for more whitespace on the page without having to do any rethink. The entire grid is 980 pixels, which is essentially what the 960 grid provides — but the Square Grid does not then mandate 20-pixel margins on either side. Mathematically the Square Grid is really quite elegant.

some column combinations for square grid

I confess that my main attraction to The Square Grid is due to the flexible layout potential rather than the markup and styling. The CSS implementation is at this point quite simple, which is itself a virtue, with the exception that it's not constructed for a purely semantic page structure where primary content loads before supplementary content, regardless of visual layout. Nevertheless I see that as an opportunity for improvement rather than a flaw in the framework.

Drawn by the additional whitespace and potential to have a grid handy for Golden Ratio interface layouts, I wrote Avraham to ask if he'd release The Square Grid as GPL. (He had already licensed it with Creative Commons; it seemed clear he was encouraging sharing and collaboration.) He readily agreed.

And so this last weekend I created a Drupalification of The Square Grid:

The Square Grid Theme

This is a base theme for use by Drupal themers and front-end developers to implement Square-Grid-based designs.

The initial dev release is really quite simple: a straight-across application of the squaregrid.css to Drupal theme template components. With a little more testing, I will tag a stable 1.0 release for Drupal 7.

But the real fun will be in version 2.0, which will implement logic to be able to load the page semantically, with main content before supplementary content, independent of "sidebar" placements on the screen.( I'm also planning to explore some potential Skinr module integrations to make the sizings and positionings a bit easier for the non-coder. We'll see about that.)

At any rate, I hope that The Square Grid intrigues some designers and front-end developers within and outside of the Drupal community. It's an intriguing and clever approach to grid-based design. If anyone has ideas on improvement, or wants to help in collaboration on the 2.x version, please ping me for file an issue.

I hope people find this useful.


Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Tommy Tran

Tommy Tran owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies

  • Skype ID: tthanhthuy
  • Phone/Zalo: (+84) 944 225 212
  • WhatsApp: (+84) 944 225 212
  • Line Messenger: (+84) 944 225 212
  • Email: [email protected]
  • Telegram Messenger: https:/t.me/tommytran0401

Tìm kiếm bất động sản





Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

Chức năng và cách hoạt động của ví điện tử

Chức năng và cách hoạt động của ví điện tử

Hiên nay, khi lướt net các bạn thấy cụm tù "Ví điện tử" xuất hiện nhiều trên mạng đặc biệt là các trang mua bán hàng trực tuyến, vậy "Ví điện tử" là gì ?

“Dám” tuyển kỹ sư Apple, nhân viên Google bị sa thải

“Dám” tuyển kỹ sư Apple, nhân viên Google bị sa thải

Việc này diễn ra ngay sau khi cố Tổng Giám đốc Apple, ông Steve Jobs, gửi email “cảnh báo” Giám đốc điều hành Eric Schmidt của Google.

Cách Viết Nội Dung Hấp Dẫn Cho Landing Page Để Tối Ưu Tỷ Lệ Chuyển Đổi

Cách Viết Nội Dung Hấp Dẫn Cho Landing Page Để Tối Ưu Tỷ Lệ Chuyển Đổi

Landing page là một trang web đơn giản (một trang đơn), nhằm mục đích tránh sự lan man & tăng sự tập trung của người dùng truy cập web.

Wordpress Freelancer


Wordpress Freelancer