CSS sólo Pinterest-como el diseño de la placa adaptable-Boardz. CSS

Vista prévia

Descripción

Boardz. CSS es una biblioteca de CSS muy ligera que te permite generar un diseño de cuadrícula adaptable, adaptativo, parecido a una placa de Pinterest a partir de listas HTML normales.

Funcionamiento

Descargue y coloque el archivo CSS boardz. CSS en el encabezado del documento HTML.

<link rel="stylesheet" href="src/boardz.css">

Cree una lista de tableros e insértelos en un contenedor DIV denominado '. boardz '.

<div class="boardz">

<ul>



<li>





<h1> Board 1</h1>





Content



</li>



<li>





<h1> Board 2</h1>





Content



</li>

</ul>


<!-- Second column -->

<ul>



<li>





<h1> Board 3</h1>





Content



</li>



<li>





<h1> Board 4</h1>





Content



</li>

</ul>
</div>

Para crear un diseño de tablero ' ajustado ', simplemente agregando la clase ajustada al div del elemento Boardz, como < div class = "boardz ajustado" >, el objeto Boardz justifica las columnas verticalmente, haciendo que toda la tabla se parezca más a un rectángulo.

<div class="boardz fitted">

...
</div>

Boardz también se puede utilizar con imágenes. A continuación se muestra un ejemplo de Boardz que mezcla celdas de imagen y texto.

<div class="boardz centered-block">

<ul>



<li>





<img src="http://kingofwallpapers.com/poster/poster-003.jpg" alt="demo image"/>



</li>




<li>





<img src="https://2.bp.blogspot.com/-pINYV0WlFyA/VUK-QcGbU5I/AAAAAAAABcU/fNy2pd2cFRk/s1600/WEB-Jack-White-Poster-Creative.png" alt="demo image"/>



</li>




<li>





<img src="https://payload140.cargocollective.com/1/10/349041/5110553/Florrie.jpg" alt="demo image"/>



</li>











</ul>

<ul>



<li>





<img src="https://cdn3.volusion.com/prakm.mcyzp/v/vspfiles/photos/TWAMBLUE-2.jpg" alt="demo image"/>



</li>



<li>





<img src="http://wpmedia.ottawacitizen.com/2015/11/01.jpg?quality=55&strip=all&w=840&h=630&crop=1" alt="demo image"/>



</li>



<li>





<img src="https://s-media-cache-ak0.pinimg.com/736x/8c/ee/ff/8ceeff967c03c7cf4f86391dd6366544.jpg" alt="demo image"/>



</li>



<li>





<img src="https://s-media-cache-ak0.pinimg.com/originals/87/16/8c/87168cbbf07cb54a9793bebaa20b1bde.jpg" alt="demo image"/>



</li>

</ul>

<ul>



<li>





<img src="http://images.fromupnorth.com/077/54a12d7458673.jpg" alt="demo image"/>



</li>



<li>





<img src="https://s-media-cache-ak0.pinimg.com/736x/22/95/48/229548086245c332443109ca9f2e0890.jpg" alt="demo image"/>



</li>



<li>





<img src="https://inspirationfeeed.files.wordpress.com/2014/01/ca402f7410884454ec5c303336e8591d1.jpg" alt="demo image"/>



</li>

</ul>




 </div>