A Simple Responsive Grid For Web Developers – Gridfolio

Preview:

Description:

Gridfolio is a simple and easy-to-use JavaScript library for generating a Flickr-style justified, responsive grid layout for portfolio webpages.

How to use it:

Include require.js and the index.js on the webpage.

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

Add your grid items to the portfolio layout in the gridfolio.js. The basic structure:

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"]
    },
  ]
]

Adjust the CSS styles in the ‘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"
  }
}

The sample CSS to style the grid layout.

.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; }
}