Beat Fly Blog | tutorial photoshop jquery css

Nell’articolo “GridFox. Firefox Extension for Grid Layout” riportavo una comoda extention per Firefox con la quale avere in modalità Overlay le griglie del sito che stiamo navigando. Oggi vorrei in modo quasi esaustivo riportare le risorse presenti in rete che si occupano di CSS e Grid Layout, al fine di suggerirvi una lista definitiva dalla quale attingere per ogni tipologia di progetto. Il testo esplicativo di ogni risorsa verrà riportato in lingua ingles, al fine di non omettere alcun termine e specifica propria degli sviluppatori.

Blueprint CSS Grid Framework. Robust despite only being in V0.7 (as of this writing), with lots of support from designers, and numerous tools for generating CSS code (beyond the standard 24-column, 950 px default framework). Supports the use of Blueprint “plugins”. You can very quickly produce the CSS code for a custom framework using tools like Kematzy’s Blueprint Grid CSS Generator.

Yahoo! YUI Grids CSS, Grids Builder. This framework, which predates Blueprint, comes with six preset templates and four preset widths, and the layouts accomodate IAB ad unit guidelines. YUI Grids CSS is integrated with the rest of the Yahoo! UI (User Interface) Library.

YAML, YAML Builder. YAML (Yet Another Multicolumn Layout) has a fair bit of maturity, is built on web standards, and is supposedly easy to use. Though it doesn’t seem to have all that much use in the WordPress community. In fact, in the many hundreds of WP themes I’ve looked at for the last three years, I don’t recalling seeing it used once. That might be because you need a license to use it with some CMSes (Content Management Systems).

Grid Designer. This is a web tool for generating custom CSS grids. It uses its own CSS classes, so it could be said to be a framework, though it’s not as well support in the design community as some of the others.

960 CSS Grid System. This system is based on a page width of 960 pixels, which is a number that’s divisible by many other numbers, making it “a highly flexible base number to work with.” However, 960 Grid only works with 12 or 16 columns.

CSS Boilerplate. Produced as a stripped down framework by one of the original Blueprint authors.

Sparkl. The documentations says you can create 1-, 2-, or 3-column pages, but the samples suggest you have more flexibility.

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.

A questo punto vi lascio con una considerazione personale; l’utilizzo di un Framework può essere utile come punto di partenza e magari può elargire una serie di competenze in modo gratuito. Ma la mia eperienza mi porta a suggerirvi di dare un’occhiata ai vari pacchetti, alle loro documentazioni ed esempi correlati per poi creare, prima su carta e poi in codice il vostro CSS Framework.

Ogni Freelance o agenzia ha il proprio Target di riferimento e le proprie esigenze di sviluppo; noi della Beat Fly abbiamo spaziato in questi 10 anni di attività quasi in ogni campo, ma alla fine abbiamo raggiunto la consapevolezza di quello che vogliamo proporre ai nostri Clienti e dunque abbiamo ricavato dall’esperienza sul campo le informazioni essenziali per sviluppare un codice di base sempre valido e riutilizzabile.

Concludo lasciandovi una serie di ulteriori risorse sempre legate al mondo Grid e CSS.

Risorse e strumenti online:

Blueprint CSS AIR Grid Tool

Blueprint CSS Quick Reference

CSS Grid Calculator

Diagnostic CSS

Reset CSS

Articoli online:

456 Berea Street – Grids, Tables, CSS

A List Apart – Thinking Outside the Grid, Setting Type on the Web to a Baseline Grid

CSS Demos – Hands on With Blueprint, a CSS Framework

Cameron Moll – Gridding the 960

Smashing Magazine – Design With Grid-Based Approach, Six Creative Column Techniques

Stone Mind – First Impressions of the Blueprint CSS Framework

Subtraction – Oh Yeeaahh

W3 – CSS and Grid Layout

Web Designer Wall – Grid and Column Designs