Home Google Chrome #00: Creazione pagina

Sommario
– familiarità con il progetto;
– strutturare lo schema iniziale;
– creazione dei box singoli;
– inserire le icone e le rispettive label;
– centrare le icone e personalizzarle;
– centrare il contenitore delle icone;

Partiamo da un concetto semplice: la gente, quando naviga su una pagina in particolare, non vuole che la vista e la navigazione non vengano appensantite durante la sua visita. L’utente vuole trovare quello che cerca in maniera semplice e immediata, e la pagina iniziale che ritroviamo aprendo una nuova finestra del browser Google Chrome rispecchia alla perfeziona di questa regola.

La pagina che andrò a replicare sarà proprio quella dell’home page di Google Chrome, raggiungibile cliccando semplicemente sull’icona di Google Chrome. Vado a prendermi la struttura principale, formata dalla scritta principale, dall’input di ricerca e dai box contenente le ultime pagine visitate.

I box avranno un proprio stile (immagine con bordo circolare, e l’eventuale scritta sotto a simboleggiare il titolo): questi allo stato attuale sono dentro un md-tile-inner, che a sua volta contiene un md-icon e un md-title-container

Assegniamo anche una classe CSS .labelBox con un

text-align:center

e duplichiamo almeno cinque volte lo stesso singleBox.
Infine, applico il display:flex per mettere i singleBox insieme.

Sperimento un pò con il text-align:center applicato anche alla .singleBox, proprio perché poi dovrò andare a duplicare per altre 4 volte lo stesso singleBox, per arrivare a creare la prima cinquina di elementi “pagine visitate”; in questo caso non vado a cercare delle singole immagini per le icone, me ne basta solo una giusto per riempire e sistemare i .singleBox dentro la struttura.
Infine, applichiamo il display:flex per mettere i singleBox insieme.

Adesso inserisco un pò di padding e margin vari tra questi: a questo punto, quello che conta maggiormente è capire l’impostazione della distanza tra i singoli input, ecco perché ogni tanto andrò ad utilizzola property border su questi item per valutare l’eventuale width o height aggiunto.

Successivamente ricreo l’altra sequenza di singleBox: mettere un semplice

<br>

non basta. 
Quindi imposto sperimentando prima un pò con le properties del display:flex: l’importante è tenere sempre in considerazione che i singoli box devono essere egualmente spalmati lungo l’intero contenitore, e devono essere cinque per riga senza che la label del box della prima riga vada subito sopra l’immagine del box della seconda riga subito sotto.

Aggiungo il border-radius a 50% per le immagini e imposto un pò di margin-bottom a 30px; poi diminuisco lo spazio tra le immagini e le relative label.

Infine, applico la text-transformation con il valore capitalize della prima lettera di “netflix”.


.labelBox {
text-transform: capitalize;
margin-top: -10px;
text-align: center;
}

Per chiudere, metto tutto al centro della pagina, posizionando ed aggiungendo altri classi sempre utilizzando (questa volta a larga scala) la modalità prevista dal “display:block” e del “position:relative”, utilizzati in precedenza per posizionare al centro le immagini e le label contenuti nei vari .singleBox.








We are using cookies on our website

Please confirm, if you accept our tracking cookies. You can also decline the tracking, so you can continue to visit our website without any data sent to third party services.