Css e grid layout

Oggi per puro caso ho scoperto un framework CSS per la creazione semplificata di layout più o meno complessi, tramite l’ottimo blog di Laburno.net, ho scoperto (in realtà l’avevo gia visto di sfuggita qualche giorno come plugin per Symfony) un altro ottimo framework, Blueprint.

Comunque rimaniamo in tema, per chi non sapesse cos’è un grid layout (io non l’ho sapevo assolutamente….) vi raccomando di leggere quest’ottimo articolo del W3c, un titolo poco originale “Passato, presente e futuro dei layout in CSS”, dove si passa dal CSS1 fino ad arrivare appunto ai grid layout proposti per il CSS3, veramente un ottimo articolo.

I grid layout sono praticamente un evoluzione delle tabelle (eh si, son tornate), solo concettualmente nel senso della divisione in righe e colonne della pagina, ma con degli indubbi vantaggi e un occhio di riguardo a chi di mestiere fa il web designer.

Inoltre non perdetevi anche questo articolo di Laburno, dove viene implementato passo passo un grid layout utilizzando il framework Blueprint.

Altri articoli interessanti:

• Cutting and sewing grid-based design: Part 1, working with other people’s comps
• Grid-based design: Part 2, Designing blog theme templates.

YAML, un framework (x)HTML-CSS

Ormai c’è un framework per ogni cosa, certo non poteva mancare anche un framework per xhtml/css che facilitasse un po le cose dei webdesigner, sto parlando di YAML per dirla come piace tanto ai geek “Yet Another Multicolumn Layout”.

Cos’è esattamente YAML ? Un framework di sviluppo xhtml/css per la creazione di layout flessibili, le feature di rilievo:

• A flexible, accessible basic layout with a header and footer, a content area with one to three columns,
• Cross-browser compatible layout display
• The fewest possible restrictions for the designer (fixed or flexible layouts, variable column widths, etc.),
• User-defined order of content columns in the source code (”any order columns”),
• Stylesheet templates ordered by function
• Column separators and backgrounds all generated without images and continuous down to the footer
• Flexible division of space inside the various containers via subtemplates

Aggiungo io:

• Completamente tableless

Cosa non è invece YAML ? Non è un layout preconfezionato, ma una serie di strumenti, che ci permetteranno di rendere la web-programming un esperienza agile e piacevole, senza dover star a litigare più con i nostri grafici per quanto riguarda l’impaginazione

Potete guardare qui un po di layout di esempio.

Come se questo non bastasse ecco un tool fantastico, che permette di creare un layout basato su framework YAML direttamente da Web (grazie Jquery), lo trovate qui.

Ancora non l’ho provato, ma sembra proprio un ottimo prodotto, quindi vi invito a leggere la documentazione ufficiale e fare un giro nel sito, dove si trova un po di tutto, Forum, Wiki, Integrazione con i vari cms.

Quando lo proverò, magari faccio una breve recensione delle potenzialità del prodotto, voi lo conoscete ?

Wordpress Plugin: Wp-image-dropshadow (ombre sulle immagini)

Ho appena creato un prototipo di un plugin, al momento sono solo poche righe di codice (giusto delle inclusioni), che permette di aggiungere dinamicamente con css e Javascript le ombre sulle immagini (come questa che vedi nel post).

Non so se gia esiste un plugin che faccia questo lavoro, ma non l’ho trovato (non è che ci abbia perso molto tempo), quindi non ho perso tempo e ne ho creato uno.

Non ho avuto tempo di creare una piccola interfaccia di amministrazione, ma nei prossimi giorni lo farò senz’altro, per adesso il funzionamento è molto semplice, basta copiarlo nella dir dei plugin ed attivarlo.

Poi, bisogno modificare il file js/shadyhotness.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

Behaviour.register({
 
  '.PostContent img' : function(element) {
 
    var wrap1 = document.createElement("div");
 
    wrap1.className = "wrap1";
 
    wrap1.setAttribute("class", "wrap1");
 
    var wrap2 = document.createElement("div");
 
    wrap2.className = "wrap2";
 
    wrap2.setAttribute("class", "wrap2");
 
    var wrap3 = document.createElement("div");
 
    wrap3.className = "wrap3";
 
    wrap3.setAttribute("class", "wrap3");    var outerNode = element.parentNode;
 
    outerNode.insertBefore(wrap1, element);
 
    wrap1.appendChild(wrap2);
 
    wrap2.appendChild(wrap3);
 
    outerNode.removeChild(element);
 
    wrap3.appendChild(element);
 
  }
 
});

La riga incriminata è la 2, esattamente “.Postcontent img”, cioè tutte le immagini che sono dentro la classe .PostContent (che rispecchia il mio CSS), quindi cambiare “.Postcontent” con la tua classe CSS che racchiude i post.

Vi prometto che farò un interfaccina di amministrazione al più presto.

Il codice è stato preso da: http://sporkmonger.com/2006/01/15/the-shady-hotness

Il plugin utilizza lo script Behaviour.js. dove potete trovare tutta la documentazione.

Potete scaricare il plugin qui: wp-image-dropshadow.tar.gz

Attendo vostri feedback

I miei delicious dal 18th Agosto al 19th Agosto

Bookmark dal 18th Agosto al 19th Agosto:

• tutorial photoshop su youtube -
• 21 temi per wordpress -
• 10 temi per wordpress -
• temi per wordpress -
• Free Software Sticker Book -
• Code Snippets - find durable events between two dates -
• tutorial photoshop su youtube -
• 21 temi per wordpress -
• 10 temi per wordpress -
• temi per wordpress -
• Free Software Sticker Book -
• Code Snippets - find durable events between two dates -

Cerca