レスポンシブ対応のグリッドレイアウトを簡単に実装できるテンプレート Gridfolio

レスポンシブ対応のグリッドレイアウトを簡単に実装できるテンプレートを紹介します。

Gridfolioを使えば、簡単にレスポンシブ対応のグリッドレイアウトを実装することができます。

まずはこちらの動作サンプルをご覧ください。

各行に表示するボックスの個数は自由に設定することができます。

ポートフォリオサイトなどに使いやすいテンプレートです。

JavaScriptベースで実装します。

デモ

デモページを用意しました。

使い方

ダウンロードページ上部にある「Download ZIP」ボタンからダウンロードします。

CSSとして、index.cssを読み込みます。

<link href="css/index.css"/ rel="stylesheet">

JavaScriptとして、require.min.jsとindex.jsを読み込みます。require.min.jsはクラウドから読み込みました。</body>閉じタグの直前で読み込みましょう。

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js" type="text/javascript"></script>
<script src="js/index.js"></script>
</body>

HTMLを用意します。HTMLは1行だけです。

<div id="gridfolio"></div>

HTMLファイルと同じ階層に、gridfolio.jsをアップロードしておきます。

※index.js内のスクリプトが、require.min.jsを使って、gridfolio.jsを自動的に読みこむようになっています。

gridfolio.jsを開いて、表示する項目を設定します。

var gf_content = [
  [ // row
    { // block
      title: "Gridfolio: a simple layout for developers >>",
      link: "https://github.com/christinecha/gridfolio",
      imageURL: "",
      customHeight: true,
      style: {
        backgroundColor: "#f1f1f2",
        height: "40px",
        color: "#555",
        fontSize: "10px",
        letterSpacing: "0.5px"
      }
    },
  ],
  [ // row
    { // block
      title: "Jane Javascript",
      style: {
        backgroundColor: "#00aeef",
        fontSize: "25px",
        letterSpacing: "1px"
      }
    },
    { // block
      title: "Project #1",
      link: "https://github.com/christinecha/gridfolio",
      imageURL: "http://facespayneuter.org/wp-content/uploads/2014/08/foundkittens.jpg",
      keywords: ["skill", "thing", "language", "library"]
    },
    { // block
      title: "Project #2",
      link: "https://github.com/christinecha/gridfolio",
      imageURL: "https://www.washingtonpost.com/blogs/local/files/2014/10/4-kittens1.jpg",
      keywords: ["skill", "thing", "language", "library"]
    },
    { // block
      title: "Project #3",
      link: "https://github.com/christinecha/gridfolio",
      imageURL: "https://s3.amazonaws.com/rapgenius/cats-animals-kittens-background.jpg",
      keywords: ["skill", "thing", "language", "library"]
    }
  ],
  [  // row
    { // block
      title: "Project #4",
      link: "https://github.com/christinecha/gridfolio",
      imageURL: "http://www.tshirtvortex.net/wp-content/uploads/Mister-Mittens-Big-Adventure.jpg",
      keywords: ["skill", "thing", "language", "library"]
    },
    { // block
      title: "Project #5",
      link: "https://github.com/christinecha/gridfolio",
      imageURL: "http://data.whicdn.com/images/79011117/large.jpg",
      keywords: ["skill", "thing", "language", "library"]
    },
    { // block
      title: "Project #6",
      link: "https://github.com/christinecha/gridfolio",
      imageURL: "https://s-media-cache-ak0.pinimg.com/736x/be/09/56/be09569e65ee1e58e1cdb954da4c6192.jpg",
      keywords: ["skill", "thing", "language", "library"]
    }
  ]
]

var gf_content = の中で、表示する項目を設定できます。

// row の部分が1行のエリアです。// block の部分が一つのブロックです。

下記の画像は、1行のrowに、blockが4つ並んでいます。

blockの中の各項目を設定します。

title: ブロックに表示するテキスト
link: テキストのリンク先
imageURL: ブロックに表示する画像のURL
keywords: ブロックに表示するキーワード

rowとblockは自由に増減させることができます。1行目はblockを4つ表示して、2行目はblockを3つ表示してなどのレイアウトも可能です。

var gf_styles = の部分のCSSを調整して、見た目を変更することができます。

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

以上で、実装は完了です。