【JavaScript】シンプルなレスポンシブグリッドベースのポートフォリオ。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ライセンス

 
Gridfolio

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

  • LATEST
  • RELATED
  • POPULAR