Come utilizzare in modo efficace la griglia Frameless?

Question

Sto iniziando a creare un sito Web adatto anche ai dispositivi mobili. Quindi sto anche iniziando a studiare le query sui media e le varie strutture della griglia. Ho preso uno sguardo a tutti i giocatori 'principali' come Inuit.css, la griglia semantica, ecc .. e ho trovato che probabilmente il migliore per me è la frameless grid

L'autore dice che è 'il successore spirituale a Less Framework ':

Ok. Ho studiato molto meno codice/css e codice html della pagina principale di framelessgrid.com (che dovrebbe implementare la griglia frameless), ma non riesco a capire come davvero posso implementarla.

• Prima di tutto, cosa intende esattamente con "senza cornice"? Semplicemente che non è un framework? E oltre a disporre di larghezze di colonna libere e di query multimediali "invertite" come "mobili per la prima volta", in che cosa differisce da lessframework?

• Come utilizzare esattamente le variabili .less (in particolare la serie @cols)?

• Che cosa significa "Adatta colonna per colonna, non pixel per pixel". significare? Come si dovrebbe mettere in pratica questo concetto?

:)

Answer 1

Sto finalmente utilizzando la griglia senza cornice, quindi voglio rispondere alle mie domande:

1. Non so: PI media, quel nome, don lo so Non importa, però .. (Ho anche invitato l'autore della griglia frameless a rispondere qui, ma non l'ha fatto.)

2. Il @cols vars. Penso che fondamentalmente, sono la griglia frameless. Beh, non lo sono, dal momento che la griglia frameless è 'solo' un'idea. Ma in pratica, beh, è ​​la principale differenza css rispetto all'approccio 'standard'. È sufficiente definire la larghezza degli elementi nelle colonne anziché in pixel. È tutto. Questo, ovviamente, può essere fatto solo usando Less o Sass. Dal momento che non conoscevo meno e scss, non ho potuto capire completamente l'idea principale. Finirai per dire che un elemento è largo 8 colonne, largo 5 colonne, ecc. Molto più semplice del calcolo dei pixel.

3. See risposta 2: P

Spero che questo vi aiuterà a qualcun altro.

Answer 2

Se vieni da css da un punto di programmazione, consiglio vivamente di meno. Metterà davvero il css nella tua mente di programmazione in un buon modo.

Uno dei problemi che ho riscontrato è stato il concetto di elaborazione del css su ogni caricamento della pagina (che non è probabilmente peggiore dell'elaborazione di un framework javascript) o dell'impostazione del minor compilatore da eseguire sul server.

C'è un modo migliore. Basta installare winless se si è su Windows o Less app per OS X. Sono semplici osservatori di file che compilano i tuoi css finiti ogni volta che apporti una modifica ai tuoi .less file.Se si imposta il vostro progetto in questo modo:

/stili /css/ meno

Essi saranno entrambi mettere i file CSS compilati nella directory css. Quindi puoi collegare il tuo html ai file css e non devi preoccuparti di compilare al volo. Entrambi funzionano perfettamente anche con la piattaforma di controllo del codice sorgente.

Less ha solo una pagina di documentazione, quindi è possibile entrarci ed essere esperti in circa un'ora circa. È davvero divertente lavorare con te perché sai già la sintassi se conosci il css. Less è un superset di css, quindi tutto ciò che si conosce su CSS è ancora valido. Le poche aggiunte di meno sintassi sono davvero facili da capire.

Preferisco l'installazione frameless un po 'di più rispetto allo Less Framework, ma è una questione di scelta.

Inoltre, se hai bisogno di un po 'più di quanto non ci siano i documenti frameless, assicurati di controllare il css usato per lo actual site.

Buon divertimento!

Answer 3

In aggiunta alle risposte di Stratboy sopra, vorrei condividere la mia domanda e altre risposte sul meno CSS Joni utilizzato per Framelessgrid. Ho avuto difficoltà a capire meno CSS e la comunità SO ha davvero aiutato.

How to read this LESS css?

Answer 4

Been macineranno al concetto di framless per circa un mese e ha colpito il momento lampadina circa una settimana fa ... non so quanto è stato il concetto senza cornice o quanto stava lavorando con meno. Ma so che finora il concetto è abbastanza solido.

Credo che non ci sia documentazione perché ciò che ha costruito è un punto di partenza per lo sviluppatore che si diramerà sul suo percorso e trova il modo migliore per costruire il suo doc meno e alla fine costruirne uno proprio.

Ma ho iniziato a scambiare le grondaie e le larghezze delle colonne con altre variabili e dividendole per trovare un buon rapporto tra gli elementi. Quindi alla fine diventa un master var che può cambiare l'intero tema con un cambio di numero. Le posibiliti sono infinite.

Answer 5

Per quel che vale ho scritto un tutorial per il sistema di rete senza telaio qui:

http://marknugent.tumblr.com/post/47212935858/a-guide-tutorial-to-the-frameless-grid-how-to

Spero che sia utile!

Edit: Per il suggerimento di seguito che la mia risposta dovrebbe stare da sola piuttosto che semplicemente con un link (! Abbastanza giusto), aggiungerò il seguente:

Sì, i @cols Vars sono infatti le chiavi alla griglia frameless. Lo usi per dimensionare i tuoi elementi come faresti con qualsiasi altra unità di misura.

Per esempio, diciamo che si desidera #firstDiv di prendere tre colonne con #secondDiv, 2 colonne di larghezza, alla sua destra:

#firstDiv { 
    width: @3cols; 
    float: left; 
} 
#secondDiv { 
    width: @2cols; 
    margin-left: @gutter/@em; 
    float: left; 
} 

Nota che si deve tenere conto per la grondaia pure.

Mentre si passa al foglio di stile, a partire dagli stili mobili, si utilizzano le query @media, che si apriranno dove si desidera, per aggiungere stili a schermi progressivamente più grandi, sostituendo i valori dichiarati in precedenza quando necessario. Ad ogni passo aggiungi colonne al tuo layout.

C'è anche una tecnica che è possibile utilizzare a passaggi intermedi per ingrandire l'intero layout:

body { 
    font-size: (@font-size + 1)/16*1em; 
} 

Questo codice viene ingrandita il layout in da qualcosa come 6 per cento, supponendo che hai esprimendo tutte le dimensioni nella stenografia/@ em, ad es se si esprime una larghezza di imbottitura pari a 100/@ em anziché a 100 pixel, verrà ingrandito insieme al resto del layout utilizzando la tecnica precedente.

Allo stesso modo questo codice sarebbe diminuire il layout di fuori di un livello:

body { 
    font-size: (@font-size - 1)/16*1em; 
}