Sistema de cuadrícula CSS de multiplataforma-Grid. CSS

Vista prévia

Descripción

Un sistema de rejilla de CSS ligero y fácil de usar, diseñado para móviles, tablets y ordenadores de sobremesa. Totalmente personalizable a través de SCSS.

Funcionamiento

Incluya el archivo CSS principal Grid. CSS en la Página Web.

<link rel="stylesheet" href="grid.min.css">

La estructura básica de HTML. Prefijos CSS:

• Móvil:. m (< 768px)
• Tableta:. t (768px a 991px)
• Navegador:. b (992px a 1199px)
• Large:. l (â & #137; ¥ 1200px)

<div class="container">

<div class="row">


<div id="sidebar" class="t2 b3 m-hide"></div>



<div id="content" class="t10 b9">




<div class="row">




<div class="t4 b3"><div class="item">.t4 .b3</div></div>




<div class="t4 b3"><div class="item">.t4 .b3</div></div>




<div class="t4 b3"><div class="item">.t4 .b3</div></div>




<div class="t4 b3"><div class="item">.t4 .b3</div></div>





<div class="t4 b3"><div class="item">.t4 .b3</div></div>




<div class="t4 b3"><div class="item">.t4 .b3</div></div>




<div class="t4 b3"><div class="item">.t4 .b3</div></div>




<div class="t4 b3"><div class="item">.t4 .b3</div></div>





<div class="t4 b3"><div class="item">.t4 .b3</div></div>




<div class="t4 b3"><div class="item">.t4 .b3</div></div>




<div class="t4 b3"><div class="item">.t4 .b3</div></div>




<div class="t4 b3"><div class="item">.t4 .b3</div></div>



</div>



</div>

</div>
</div>

Las clases CSS para ocultar las celdas de la rejilla en diferentes pantallas:

• Móvil:. m-show,. m-Hide
• Tablet:. t-show,. t-Hide
• Navegador:. b-show,. b-Hide
• Grande:. l-show,. l-Hide

Personalízalo a través de SCSS:

/*
* Setting
*/
$direction


 : ltr;
$columnsNumber
 : 12;
$columnsPrefix
 : '';

// screens



| Mobile
 | Tablet
| Browser
| Large
$screensNames
 : ('m',


 't',


'b',


 'l');
$screensSizes
 : (0,



 768px,

992px,

 1200px);
$containerWidth : (100%,


750px,

970px,

 1170px);