El sistema de Reticle

El sistema de reticle de gran abast utilitza una variació del sistema de la reixeta 960. La sintaxi és molt simple i funciona a l'altre costat dels principals navegadors com Chrome, Safari, Firefox i fins i tot Internet Explorer 7 +.

Per a una millor comprensió de com funciona el sistema de reticle, si us plau reviseu els exemples i comentaris a continuació.

Exemple 1

Aquest és l'exemple més bàsic de com usar la xarxa.

Codi

1  ## Exemple 1 ## 
2  <!-- envoltar columnes amb un div amb la clase .seccio o .netejar per netejar les columnes flotants -->
3  <!-- envoltar columnes amb un div amb la clase .seccio o .netejar per netejar les columnes flotants -->
4  <div class="seccio filera una-filera">
5
6    <!-- Afegir una clase .columna seguit amb l'ample de columna en valor de la paraula (un, dos, tres ..., 12) -->
7      <div class="columna set">7</div>
8      <div class="columna cinc">5</div>
9
10  </div> <!--/seccio o netejar -->

Exemple 2

Per a les columnes d'amplada total de la tableta, només ha d'afegir la classe .tableta-complet

Codi

1  ## Exemple 2 ##
3  <!-- envoltar columnes amb un div amb la clase .seccio o .netejar per netejar les columnes flotants -->
4  <div class="seccio filera una-filera">
5
6    <!-- Afegir la clase .tableta-complet per fer columnes 100% ample en vista tableta -->
7      <div class="columna set tableta-complet">7</div>
8      <div class="columna cinc tableta-complet">5</div>
9
10  </div> <!--/seccio or netejar -->

Exemple 3

A més, pot fer que les columnes d'amplada total per mòbil mitjançant l'addició de la classe .mobil-complet.

Codi

1  ## Exemple 3 ##
3  <!-- envoltar columnes amb un div amb la clase .seccio o .netejar per netejar les columnes flotants -->
4  <div class="seccio filera una-filera">
5
6    <!-- Afegir la clase .mobil-complet per fer columnes 100% ample en vista tableta -->
7      <div class="columna set tableta-complet mobil-complet">7</div>
8      <div class="columna cinc tableta-complet mobil-complet">5</div>
9
10  </div> <!--/seccio or netejar -->

Exemple Mixt

El sistema de xarxa també inclou amples de columna específics tauleta i mòbil en cas que li agradaria reemplaçar el valor predeterminat heretat. Vegeu el següent exemple per a una millor comprensió.

Codi

1  ## Exemple Mixt ##
2  <div class="seccio filera una-filera">
3    <div class="columna una tableta-quatre mobil-vuit">1</div>
4    <div class="columna once tableta-vuit mobil-quatre">11</div>
5  </div>
6
7  <div class="seccio filera una-filera">
8    <div class="columna dues tableta-tres mobil-nou">2</div>
9    <div class="columna deu tableta-nou mobil-tres">10</div>
10  </div>
11
12  <div class="seccio filera una-filera">
13    <div class="columna tres tableta-once mobil-una">3</div>
14    <div class="columna nou tableta-una mobil-once">9</div>
15  </div>
16
17  <div class="seccio filera una-filera">
18    <div class="columna quatre tableta-tres mobil-nou">4</div>
19    <div class="columna vuit tableta-nou mobil-tres">8</div>
20  </div>
21
22  <div class="seccio filera una-filera">
23    <div class="columna cinc tableta-complet mobil-complet">5</div>
24    <div class="columna set tableta-complet mobil-complet">7</div>
25  </div>