Per comprendere bene l'utilità di una sezione, ecco come funziona.

La sezione contiene non solo la sezione ma anche il contenitore in cui si trovano i moduli.

Scegliere una sezione significa quindi:

1/ Selezionare una visualizzazione particolare per i nostri moduli. Ad esempio, non mettere margine (full-screen), avere un piccolo margine o un margine più ampio. Possiamo anche decidere di assegnare un colore di sfondo grigio.

2/ Decidere il comportamento dei nostri moduli. Quale disposizione su desktop e mobile, ad esempio.

Le sezioni sono suddivise in due stili.

Quelle che sono assegnate e utili per un tipo di modulo in particolare, sono lesezioni assegnate.

E lenon assegnateche sono utilizzabili in diverse situazioni.

la sezione ONE-LINE-DESKTOP ha il comportamento seguente :

=> Nessun margine per la sezione, possibilità di fare full screen

=> Il container occupa tutta la larghezza del contenuto e si centra nella pagina.

Questo significa che è la larghezza totale dei moduli a definire la larghezza del container. Il contenuto è centrato.

Ad esempio, se la sezione contiene due moduli che misurano entrambi 500px.

I moduli si disporranno affiancati e si centreranno nella pagina.

Se al contrario la larghezza totale del o dei moduli è del 100% della larghezza della pagina, la sezione sarà in full-screen.

La sezione ONE-LINE-DESKTOP-WITH-MARGIN ha il comportamento seguente :

=> La sezione ha una larghezza massima di 1660px

=> Il container occupa tutta la larghezza del contenuto e si centra nella pagina se è più piccolo di 1660px

=> Sfondo grigio a schermo intero per il -GREY

Ad esempio, se la sezione contiene tre moduli che misurano tutti e tre 1660px.

I moduli si disporranno uno accanto all'altro. Su uno schermo largo 1920px, ci sarà quindi un margine a destra e a sinistra.

Nel caso di uno schermo più piccolo di 1660px, il container occuperà tutta la larghezza della pagina (meno i margini automatici del sito) e la dimensione o posizione dei moduli varierà in base alla loro natura. Possono ad esempio ridursi o andare a capo.

La sezione ONE-LINE-WITH-MARGIN-SCROLL-MOBILE ha il seguente comportamento:

=> La sezione scorre in mobile

Ad esempio, con questa sezione un contenitore di 3 blocchi farà scorrere il contenuto in mobile

La sezione DESKTOP-WITH-MARGIN ha il seguente comportamento:

=> La sezione ha una larghezza massima di 1660px

=> Il container prende tutta la larghezza del contenuto e si centra nella pagina se è più piccolo di 1660px

=> Se la larghezza dei moduli è maggiore del container, i moduli andranno a capo centrati

Ad esempio, se la sezione contiene tre moduli che misurano 1800px.

I primi due moduli si disporranno affiancati e il terzo andrà a capo.

La sezione ONE-LINE-DESKTOP-INVERSED-WITH-MARGIN ha il seguente comportamento :

=> Il contenitore inverte la posizione dei blocchi in mobile

Ad esempio, se abbiamo un blocco di testo e poi a destra un'immagine in desk. (1 poi 2)

In mobile avremo l'immagine poi il testo (2 poi 1)