LESS.js, Usiamolo per Costruire la Griglia

LESS.js Usiamolo per Costruire la Griglia

Come accennato nella puntata precedente, a questo punto dovreste aver sperimentato i primi passi con i file .php che andranno a costruire la prima pagina del vostro template.  

Se così ancora non fosse ecco qua sotto le varie porzioni di codice che andranno a popolare i file indicati.

L’intero corso è diventato anche un ebook! Non perdere l’occasione di portare sempre con te tutta la conoscenza racchiusa al suo interno cliccando semplicemente su questo link!

header.php

sidebar.php

footer.php

index.php

Punto della situazione

A questo punto abbiamo appena creato la struttura base del nostro template, lavorando in questo modo saremo sicuri che una volta che WordPress sarà in grado di costruire la nostra template manterrà la nostra struttura HTML5 di partenza, ovvero una struttura che è altamente compatibile con i vari browser presenti sul mercato e che presenta già al suo interno utili classi per un corretto progressive enhancement.

Al momento però WordPress non è ancora in grado di costruire la nostra pagina. Abbiamo fatto qualcosa di sbagliato?!?

Assolutamente no! Ma non abbiamo ancora detto al nostro template dove potrà andare a prendere i vari pezzi della nostra pagina, vediamo quali utili funzioni ci vengono offerte da WordPress!

Conclusioni

Siamo ancora lontani dal diventare dei GURU nella creazione di template WordPress, ma per quello che ci interessa oggi è un grande giorno per il vostro futuro da sviluppatori! Abbiamo infatti creato il nostro primo layout WordPress!!!

Vi aspetto alla prossima puntata dove andremo a conoscere da vicino lo sviluppo in locale della nostra template!

Lascia il tuo Pensiero

7 Responses to “LESS.js Usiamolo per Costruire la Griglia”

  1. gian

    Molto interessante, mà (c’è sempre un mà) secondo il mio parere sarebbe stato meglio se avessi creato una guida senza parlare della libreria less.js, mà semplicemente spigando come scrivere il codice usando i fogli di stile, questo perchè chi finiche su questa guida (come mè) probabilmente conosce già .css e javascript e qualche sua libreria mà non è interessato, per il mometo, ad apprenderne altre, quindi spiegare il funzionamento dei temi di wordpress tramite la libreria “less” può confondere le idee a chi utilizza gia altre librerie, detto questo la tua guida mia fornito dei validi spunti da cui partire per imparare ad utilizzare al meglio wordpress,
    quindi grazie del lavoro svolto

    Rispondi
    • Andrea Barghigiani

      Grazie mille Gian per il tuo interessante commento.

      Da parte mia devo dire che ho scelto di utilizzare la libreria LESS.js perché, come preferenza personale, la ritengo molto utile per lo sviluppo di un sito web e permette di velocizzare molto anche lo sviluppo stesso dei CSS.

      Comunque, per chi conosce già CSS e JS, non ci dovrebbero essere grossi problemi nel sostituire la parte relativa a LESS.js (veramente minima in questa guida) con la struttura CSS a cui è abituato. Per questo ho ritenuto utile inserirla all’interno della guida, chi conosce i CSS e non vuole apprendere una nuova metodologia può tranquillamente ingnorarla, chi è nuovo potrà apprendere una tecnologia che gli sarà molto utile.

      Ciao e grazie per il tuo commento!

      Rispondi
  2. Nicola

    Ottima guida Andrea, i miei complimenti.
    Sono nuovo di wordpress e mi piacerebbe sviluppare anche dei temi personalizzati.
    Per quanto riguarda la guida devo segnalare un errore nel calcolo “larga 1080px ( infatti: (80 * 12) + (5 * 12) = 1080px ).” Dovrebbe mancare un *2 nelle colonne. 🙂

    Invece se riesci a spiegarmi, vorrei sapere a cosa si riferiscono i numeri, ed esempio in .grid_8 {.larghezza (8,14) ….

    Cosa vogliono dire 8 e 14?
    Grazie per un eventuale risposta e complimenti ancora per la guida

    Rispondi
    • Andrea Barghigiani

      Ciao Nicola,

      grazie per i complimenti e per trovare la guida utile. Per quanto riguarda il * 2 (se mi ricordo bene) non manca perché i due margini esterni alla griglia (della prima e ultima colonna) sono differenti da quelli che verranno impostati internamente alla griglia. Per quanto riguarda la domanda sui parametri che vengono passati a .grid_ mi servono per calcolare quante colonne e margini verranno impostati.

      Tra qualche mese dovrei essere in grado di rilasciare una nuova guida che riguarda il template gratuito Bones e che ha una griglia ancor più aggiornata e responsive. Se ti interessa l’argomento, ti consiglio di tornare a trovarci.

      Ciao e a presto!

      Rispondi
  3. Salvo

    Ciao, potresti spiegarmi come fare per avere 2 sidebar? una a sinistra ed una a destra? grazie in anticipo

    Rispondi
    • Andrea Barghigiani

      Ciao Salvo,

      per creare due sidebar differenti ti conviene seguire i passi che ti indico in questa lezione. Come scoprirai da solo, dire a WordPress che vuoi più sidebar non è assolutamente difficile mentre, per il posizionamento diciamo che a parte la posizione di inserimento che applichi all’interno della pagina, dovrai anche agire all’interno del tuo file CSS.

      Spero di esserti stato di aiuto e a presto!

      Rispondi
  4. Andrea

    Salve gent.mo Andrea Barghigiani non riesco a capire come mai la mia pagina si vede nel browser mozilla e in internet explorer non vedo nulla di quello che sto costruendo con i less e modernizr?
    Ho creato tutta la struttura del sito in less e più file less che gestiscono Griglie , Font , Responsive , ecc.. e poi il file principale del sito che è in less.
    Cosa devo fare? Dove sbaglio?

    Rispondi