Una cuadrícula adaptable simple para desarrolladores web Gridfolio

Vista prévia

Descripción

Gridfolio es una biblioteca JavaScript simple y fácil de usar para generar un diseño de cuadrícula justificado, adaptable al estilo de Flickr para páginas web de portafolio.

Funcionamiento

Incluya require. js y index. js en la Página Web.

<script src="require.min.js"></script>
<script src="index.js"></script>

Agregue los elementos de cuadrícula al diseño de la cartera en el gridfolio. js. La estructura básica:

var gf_content = [

[ // row


{ // block



title: "Gridfolio Title",



link: "#",



imageURL: "",



customHeight: true,



style: {




backgroundColor: "#f1f1f2",




height: "40px",




color: "#555",




fontSize: "10px",




letterSpacing: "0.5px"



}


},

],

[ // row


{ // block



title: "Item 1",



link: "#",



imageURL: "1.jpg",



keywords: ["keyword 1", "keyword 2"]


},


{ // block



title: "Item 2",



link: "#",



imageURL: "2.jpg",



keywords: ["keyword 1", "keyword 2"]


},

]
]

Ajuste los estilos CSS en el ' gf_styles '.

var gf_styles = {

squareMode: true,

innerBlock: {


fontFamily: "Montserrat",


color: "#fff",


padding: "10px"

},

blockTitle: {


margin: "0 auto",


textTransform: "uppercase"

},

keyword: {


fontSize: "11px",


backgroundColor: "rgba(0,0,0,0.7)",


padding: "2px 5px",


margin: "2px"

},

keywords: {


fontSize: "10px",


marginTop: "-50px"

}
}

El CSS de ejemplo para el estilo del diseño de cuadrícula.

.gf-block {

padding: 10px;

box-sizing: border-box;

display: inline-block;

vertical-align: top;

cursor: default;
}

.gf-block:first-child { padding-left: 20px; }
.gf-block:last-child { padding-right: 20px; }

.gf-block-1 { width: 100%; }
.gf-block-2 { width: 50%; }
.gf-block-3 { width: 33.33%; }
.gf-block-4 { width: 25%; }
.gf-block-5 { width: 20%; }
.gf-block-6 { width: 16.66%; }
.gf-block-7 { width: 14.285%; }
.gf-block-8 { width: 12.5%; }
.gf-block-9 { width: 11.11%; }

.gf-block--inner {

width: 100%;

height: 100%;

background-color: white;

background-size: cover;

background-position: center;

text-align: center;

font-size: 16px;

vertical-align: top;

box-sizing: border-box;
}

.gf-block--inner--spacer {

height: 100%;

display: inline-block;

vertical-align: middle;
}

.gf-block--inner--title {

display: inline-block;

vertical-align: middle;

font-size: inherit;

max-width: 100%;
}

.gf-block--inner--keyword {

display: inline-block;
}

@media (max-width: 996px) {

.gf-block-4 { width: 50%; }

.gf-block-4:nth-child(3) { padding-left: 20px; }

.gf-block-4:nth-child(2) { padding-right: 20px; }

.gf-block-5 { width: 33.33%; }

.gf-block-5:nth-child(1) { width: 50%; }

.gf-block-5:nth-child(2) { width: 50%; }

.gf-block-6 { width: 33.33%; }

.gf-block-7 { width: 14.285%; }

.gf-block-8 { width: 25%; }

.gf-block-8:nth-child(5) { padding-left: 20px; }

.gf-block-8:nth-child(4) { padding-right: 20px; }

.gf-block-9 { width: 11.11%; }
}

@media (max-width: 500px) {

.gf-block-2,

.gf-block-3,

.gf-block-4,

.gf-block-5 { width: 100%; padding: 10px 20px; }
}