Zurb Foundation 3: sezioni a larghezza intera e modifica della larghezza massima?

Sto usando ZURB Foundation 3 su un mio progetto. Adoro i sistemi di grid e i siti reattivi, ma il mio problema è che sono ancora convinto che dovrebbero essere costruiti più largamente di 1000px.Zurb Foundation 3: sezioni a larghezza intera e modifica della larghezza massima?

ho alcune domande:

1) Prima di tutto mi piacerebbe fare alcune sezioni (div) larghezza. Ora ho letto posso semplicemente sostituire <div class="row"> con <div class="container"> per esempio e genererà quell'effetto. Ora per qualche ragione questo non mi sembra giusto, dovrei semplicemente creare la mia classe a tutta larghezza, o quale sarebbe il modo corretto di farlo?

2) Mi piacerebbe averlo basato per una risoluzione maggiore, forse un massimo 1440px di larghezza o anche un fluido 100% di larghezza totale. Come potrei andare a fare questo, e/o la Fondazione non è la struttura corretta per me? Adoro il fatto che venga fornito con tutti i modelli, quindi è molto veloce e facile da usare.

Grazie in anticipo.

fonte

2012-10-11 matt

Progettare per una specifica larghezza si scontra con l'intero concetto di responsive design. – cimmanon

Sì, lo prendo, ma al posto del valore predefinito "max-larghezza" di 1000px o 960, ad esempio, preferisco aumentare il valore predefinito a 1440px ecc. Ciò non dovrebbe influire sulla reattività. Sentiti libero di elighten me perché tendono sempre ad avere una larghezza massima di 940-1000px? – matt

@cimmanon non stava chiedendo come creare una larghezza specifica, stava chiedendo come impostare la larghezza massima del disegno fornita nel framework Foundation. Max-width! = Width –

Aggiornamento: Si prega di smettere di votare questo post. Il quadro è cambiato in modo significativo da quando la domanda è stata risolta. Se utilizzi Foundation 4 o versioni successive, consulta le risposte aggiornate e vota.

Per le versioni precedenti di Fondazione 3 solo Aggiungere il seguente override per il CSS (Questo deve apparire dopo o alla fine del foundation.css)

.row { 
    width: 100%; 
}

Ciò ignorare l'impostazione predefinita con del quadro e rendere il design a schermo intero. Sentiti libero di cambiare questo valore in base alle tue esigenze.

C'è anche un download disponibile su misura presso http://foundation.zurb.com/download.php (che probabilmente fa la stessa cosa, ignora o sostituisce .row larghezza)

fonte

2012-10-11 17:15:04

awesome thank you, idealmente potrei semplicemente creare una nuova classe chiamata ".full-row", per esempio, e renderlo corretto al 100%? Ho visto la versione di download personalizzata, ma dice max-width e ho pensato che fosse solo per la versione mobile ... perché il valore di riga per me sembra essere 1000px e la larghezza massima di download predefinita è 940px. – matt

Non sono sicuro di come si possa aggiungere una nuova classe .full-row. Esistono diverse classi CSS che spostano i loro selettori fuori dalla classe .row. Vorrei esaminare foundation.css prima di implementare quel cambiamento. –

Per favore segna questo come risposta se risolve il tuo problema. Grazie. –

Editing/fondamento principale è facile. In Foundation 4 è possibile modificare il file _settings.scss. Elimina il commento $ row-width: emCalc (some_number.px); a una larghezza di riga che vorresti usare.

fonte

2013-05-20 14:05:40

decommentando $row-width: rem-calc(1000); ha lavorato per me

fonte

2013-12-05 10:34:17 AnkitG

Zurb Foundation 3: sezioni a larghezza intera e modifica della larghezza massima?

risposta

Problemi correlati