Javascript

【JavaScript】シンプルなレスポンシブグリッドベースのポートフォリオ。Gridfolio

May 15, 2016
Gridfolio

Gridfolioはシンプルなレスポンシブグリッドベースのポートフォリオジェネレーター。

Customization

gridfolio.jsの中のgf_content variable

var gf_content = [
  [ {Block}, {Block}, {Block} ],     // Row of 3 Blocks
  [ {Block} ],                       // Row of 1 Block
  [ {Block}, {Block} ],              // Row of 2 Blocks
  ...                                // etc.
]

Blockの中オブジェクト

{
  title: "My Project",
  link: "https://github.com/christinecha/gridfolio",
  imageURL: "https://image.com/image.png",
  customHeight: true,        // only include this if you want this block to
                             // use a unique height, which you'll declare
                             // in its styles (below)
  style: { ... }
}

スタイルを追加することができる。

style: {
  color: "#818182",
  fontSize: "16px",
  borderRadius: "50%",
  height: "50px"           // you'd either need to set customHeight to true OR the
                           // global squareMode to false or else this would get ignored
}

gf_stylesは固有のスタイル

Customizing the Design

var gf_styles = {
  squareMode: true,   /* If false, each block will try to default to the
                      innerBlock.height set below, UNLESS the individual
                      block.customHeight is set to true. */

  innerBlock: {},     // block styles
  blockTitle: {},     // block title styles
  keyword: {},        // individual keyword styles
  keywords: {},       // keyword container styles
}

MITライセンス