Creare un Sito Html/CSS Modulare con BEM #1 – Intro & Menu
By Andrea Marchetti
@marchetti_design
In questa nuova serie andiamo a vedere come creare un sito modulare con la convenzione BEM.
Grazie a questa convenzione possiamo creare strutture HTML/CSS suddivise in moduli che possiamo estrapolare dalla pagina e riutilizzare in altre parti del nostro sito.
Nella prossima lezione realizzeremo la cover: http://www.marchettidesign.net/2016/09/creare-un-sito-htmlcss-modulare-2-cover/
Scarica il codice della struttura realizzata qui: http://bit.ly/marchetti-design-community
Questo approccio alla creazione di Siti Web rende più chiaro e facile capire come sia strutturato il codice.
Struttura base di partenza
Come base di partenza del nostro sito non useremo nessun framework HTML/CSS, faremo tutto con normale codice HTML/CSS scritto con la convenzione BEM.
Le uniche risorse che dobbiamo includere al nostro progetto sono il file di reset CSS Normalize.css (che serve per ottimizzare l’interpretazione dei CSS da parte dei vari Browser) e Jquery (che utilizzeremo per animare il menu).
Modulo Header
Una volta inseriti Normalize e Jquery possiamo partire a scrivere il codice della nostra struttura. Suddivideremo la pagina in moduli. Oggi realizziamo il modulo Header che conterrà il Logo e il Menu Responsive del nostro sito web modulare.
Video introduttivo su BEM: http://www.marchettidesign.net/2016/06/bem-scrivere-css-facili-da-comprendere-mantenibili-e-scalabili/
Video su Emmet: http://www.marchettidesign.net/2016/04/emmet-il-tool-essenziale-per-i-web-developers/
Video su Clearfix & Float: http://www.marchettidesign.net/2016/06/capire-la-proprieta-css-float-per-creare-layout-responsive-perfetti-1-elementi-e-testo/
Se ti è piaciuto il video iscriviti al nuovo canale YouTube 😉
https://www.youtube.com/channel/UCWT3E1a00seSxCo3amg16AQ
Stay Tuned!
Potrebbero interessarti:
ciao, volevo farti i complimenti per i video tutorial sull’Html/CSS, molto chiari, semplici e si seguono in modo piacevole.
Volevo farti anche una domanda, tra gli elementi del menu ITEM rimane dello spazio, si tratta di circa 5px tra i primi 2 elementi e ultimi 2 e di circa 3 px tra gli elementi centrali.
Volevo far combaciare gli elementi in modo che non ci fosse spazio tra loro ed ho provato ad usare margin-right: margin-left: impostando un valore negativo -x ma il risultato non è stato molto soddisfacente sopratutto perchè la distanza tra gli elementi non è costante.
Avresti qualche consiglio?
grazie!
Ciao, Elimina lo spazio trai link emettili sulla stessa riga 😉
Non riesco a scaricare il codice della struttura. Forse non ho capito il sistema di download ma a me sembra troppo faraginoso.
Inoltre, non riesco a entrare nella quinta parte del corso di JS.
Il link mi porta ai Commenti per Marchetti Design.
Hai abbandonato il progetto, oppure è ancora in itinere?
Grazie, comunque, per tutto il bellissimo lavoro che hai fatto e che hai messo a disposizione di tutti noi.
Ciao Vito, grazie del feeback, per scaricare le risorse devi iscriverti alla newsletter qui:
http://www.marchettidesign.net/moduli/sito-bem.html
segui il link nella mail e scarica il file .zip
Se il form non funziona probabilmente è il browser, prova con un altro 😉
Questa è la quinta lezione su javascript: http://www.marchettidesign.net/2016/01/guida-javascript-base-5-esempi-pratici-di-selettori-su-pagine-web/
Ciao Andrea.
Complimenti davvero per i tuoi video. Sono registrato alla newsletter ma cmq ogni volta che cerco di scaricare gli esempi mi rimanda al link di registrazione. Quando inserisco l’email mi dice che sono già iscritto alla newsletter. Sto sbagliando qualcosa? Grazie
Ciao Elvis,
scusami per l’inconveniente ho da poco cambiato il metodo di registrazione per renderlo più semplice,
prova a disiscriverti e reiscriverti dovresti accedere alla pagina con tutte le risorse senza problemi..
ciao, io non ho ricevuto alcun link nella mail di registrazione…
Dove scarico il codice sorgente della lezione?
Ciao,
per accedere alle risorse devi confermare l’iscrizione alla mailing list cliccando nella prima mail ricevuta:
“Sì, confermo la mia iscrizione alla mailing list”
A seguire riceverai le credenziali per accedere.