1. make easyer the way to design web templates for regular desktop screens, iphone and ipad, tablets, smartphone ecc.
2. using 960grid system I need a simple way to redefine the gutter between columns
3. sometimes I would need fluid templates still using a grid system
4. I love SCSS and want to have all my css with this system.

There are several tools, libraries and techniques and I wanted to try my own one to go deeper in the the understanding. So, in these days is born the Spleen Scss Library, a simple way to have an scss with some usefull mixin, a dynamic grid system, a reset css and a basic html5 template.

It is an alpha version, just to begin something!

Features

• Sass/Scss Grid System inspired to 960grid
• Design just one html markup
• Choose if you want fixed or fluid template, it mantains the same proportions on large screens
• If fixed you can choose your favourite size (not only 960px)
• If fixed you can choose the margins between columns
• Adapt content on tablets (ex iPad ecc), landscape or portrait
• Adapat contento on smartphones (ex iPhone, Android ecc)
• Some mixin as shortcuts for shadows, round corners, webfonts ecc.
• Some tricks for compatibility with old browsers
• Some usefull and modern js library I do use in my projects as Jquery, Jquery-ui ecc

Download

This little projects is available on Git Hub and it would be really appreciated if you fork it to make it better.

Anyway it’s really interesting to better understand how the grid and mobile worlds works! :)

This is not a “one time post”… it’s going to be updated in the next days. Any contribution is defenetly welcome!

CSS

Define the media screen size to override classes when the page is shown on ipad, iphone, android or desktop

• ipad landscape: @media screen and (max-width: 1024px)

• ipad portrait: @media screen and (max-width: 880px)

• smartphone: @media screen and (max-width : 620px)

HTML

Interesting notes on apple site

Meta Keywords to set the viewport for smartphone

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="format-detection" content="telephone=no" />

Tell IE to use chrome to render

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

JS

<script src="js/libs/modernizr-1.7.min.js"></script>

For Png problem in IE

<!--[if lt IE 7 ]>
<script src="js/libs/dd_belatedpng.js"></script>
<script> DD_belatedPNG.fix('img, .png_bg');</script>
<![endif]-->

Il progetto nel mio portfolio: http://www.behance.net/gallery/Cantiere-Creativo-Web-Agency/1330777

La realizzazione del logo è stata completata grazie alla collaborazione con Luca Bonfiglio, uno dei proprietari. Il sito invece è stato realizzato grazie al framework RAILSGUN che è stato sviluppato da me e @silviorelli proprio all’interno della stessa azienda. Inoltre ho usato anche la libreria scss (spleen_scss disponibile su github) che ho creato proprio in occasione di questo progetto.

Il sito: http://www.cantierecreativo.net

Il sito è realizzato in html5 e css3 ed è compatibile fino alla versione 8 di IE.

Ho scelto un linguaggio diretto per i claim del sito. Per essere aggiornati coi tempi, il sito non è completo al 100% ma viene rilasciato step by step. I testi interno sono quindi provvisori ma questo non è una mia competenza! Mi sono invece occupato della relaizzazione del menù principale e dei claim interni.

Il sito è pubblicato sui server di Heroku e per il progetto abbiamo utilizzato Git.

Tencologie utilizzate:

• Ruby on Rails
• Railsgun
• Github
• Scss
• Html5 / css3
• Heroku
• Git

Per realizzare la base css di questo sito ho utilizzato la libreria SPLEEN_SCSS, (fork it on github!) ed è stato il primo grosso lavoro in cui ho applicato el nuove linee guida HTML5.

Certo riuscire a rendere la compatibiltà sulle versioni 8 e 7 di Internet Explorer non è stato uno scherzo; notti insonni e preoccupazioni crescenti ma alla fine, tra  colpi di javascript e mille tricks recuperati in rete, il sito è diventato compatibile (anche se sempre si possono trovare piccoli bug che via via verranno risolti!)

Sono stati usati vari plugin JQuery e non è potuto mancare il mio fido JQuery tools che ormai mi accompagna nei progetti web!

Ho usato per la prima volta Mercurial; essendo un amante di GIT devo dire che ho trovato i due progetti veramente simili, quasi indentici, ma rimango dell’idea che GIT sia più intuitivo o semplicemente, lo preferisco!

Devo dire che django è effettivamente un gran bel pezzo di software e che l’applicazione per l’ecommerce Satchmo è impressionante. Mi è risultato un po’ ostico riuscire ad entrare nel filesystem per effettuare l’overide del codice e poter capire come personalizzare l’interfaccia, ma grazie al prezioso aiuto di @dvd, mio mentore e programmatore del sito in questione, siamo riusciti a fare tutto!

Ne aprofitto per ringraziare proprio @dvd e @matteoscurati con i queli abbiamo passato romantiche serate in chat e Book Republic per il post di riferimento con tanto di citazione!

Strumenti/tecnologie usate:

• Html5 / Css3 / Scss
• Django / satchmo
• Jquery
• Mercurial

Compatibilità Browsers:

• Firefox 3 / 4
• Internet Explorer 7 / 8 / 9
• Chrome 9 / 10
• Opera
• Safari
• Lynx (browser testuale)

Il lavoro nel mio protfolio per vedere gli screenshot del progetto.

L’unico vantaggio che finora vedo nell’usare flash è l’embed dei video in stile youtube. Cosa anch’essa che sta per tramontare!

Bene, oggi mi trovo a sperimentare un nuovo prodotto che tanto mi ricorda i tempi di flash 3, in cui imparavo a fare i primi keyframe nelle animazioni manuali per poi arrivare a fare interi siti super schizzatissimi in un solo frame con tutte le animazioni realizzate in AS!

Ecco che oggi si presenta questa nuova possibilità che sfrutta le potenti novità di CSS3 e HTML5

Sancha Animator permette di animare, fare presentazioni, piccoli filmatini ecc e tutto ciò che esce è html e css… ecco la vera lucuna di falsh in questi anni! niente plugin, niente software di terze parti ecc.

Certo ancora ci sono le grandi controindicazioni. Non tutti i browser supportano le stesse caratteristiche del CSS3. Infatti molte animazioni, con Firefox 3.6 ancora non si vedono. Dobbiamo ricorrere a Chrome o Safari i quali hanno implementato queste caratteristiche.

• Vedi le demo
• CSS3 info
• HTML5 info
• HTML5 alcune demo

Comunque, finisco la prova e commenterò, con un bel po’ di pregiudizi in partenza, lo ammetto!

Personalmente, avendo sviluppato dal 2000 parecchie applicazioni flash, ritengo ormai con l’avvento delle fantastiche librerie JS e dell’HTML5, ritengo “inutile” l’utilizzo che finora è stato fatto di questa tecnologia per lo sviluppo di siti web. Credo invece che sia ancora una buona piattaforma per sviluppare alcuni tipi di applicazioni specifiche e abbastanza rare che richiedono sia interfaccia grafica che di un buon codice.

Ancora, fintanto che lo sviluppo e la diffusione dei formati open per i video non sarà tale da poterne godere, l’utilizzo di flash per i video sembra essere una gran cosa… ma coma la mettiamo con la storia dei vari iPhone, iPad ecc? Adobe e Apple si stanno organizzando ma ancora di strada ne manca.

Sto anche valutando per un cliente la possibilità di usare Flex per la realizzazione di un CMS, cosa che ho già dovuto valutare un apio di anni fa con una certa frustrazione! Perchè utilizzare flash et simili per la gestione dei dati? Continerò questo argomento quando avrò più dati!

Intanto invito alla lettura dell’articolo citato.
http://www.smashingmagazine.com/2010/04/12/the-gradual-disappearance-of-flash-websites/