From 0413f3b39fa10e171e82ee080981bff8f72c9ab5 Mon Sep 17 00:00:00 2001 From: Carl Fairclough Date: Sat, 21 Mar 2020 11:56:40 -0300 Subject: [PATCH 1/2] Add card documentation --- docs/.vuepress/components/CardList.vue | 6 +- docs/style-guide/cards/index.md | 450 +++++++++++++++++++++++++ docs/style-guide/index.md | 3 + 3 files changed, 457 insertions(+), 2 deletions(-) create mode 100644 docs/style-guide/cards/index.md diff --git a/docs/.vuepress/components/CardList.vue b/docs/.vuepress/components/CardList.vue index e61b48a7e4e..e07da90895a 100644 --- a/docs/.vuepress/components/CardList.vue +++ b/docs/.vuepress/components/CardList.vue @@ -65,9 +65,11 @@ export default { grid-template-columns repeat(2, 1fr) .col-3 grid-template-columns repeat(3, 1fr) -.col-5 - grid-template-columns repeat(4, 1fr) .col-4 + grid-template-columns repeat(4, 1fr) +.col-5 + grid-template-columns repeat(5, 1fr) +.col-6 grid-template-columns repeat(5, 1fr) @media screen and (min-width: $breakXS) diff --git a/docs/style-guide/cards/index.md b/docs/style-guide/cards/index.md new file mode 100644 index 00000000000..eebe69b8454 --- /dev/null +++ b/docs/style-guide/cards/index.md @@ -0,0 +1,450 @@ +--- +title: Style Guide Documentation — Cards +lang: en-US +base: + - title: Hello World + content: A Hello World style template that deploys a smart contract with a configurable message, and renders it to the browser. + link: + to: https://studio.ethereum.org/1 + - title: Coin contract + content: A starter dapp template that defines a basic fungible token you can create and send to others. + link: + to: https://studio.ethereum.org/2 + - title: Crypto Pizza + content: A collectibles game built on top of the ERC-721 standard for creating unique tokens. + link: + to: 'https://studio.ethereum.org/1' +link: + - title: Hello World + content: A Hello World style template that deploys a smart contract with a configurable message, and renders it to the browser. + link: + text: Run hello world + to: https://studio.ethereum.org/1 + - title: Coin contract + content: A starter dapp template that defines a basic fungible token you can create and send to others. + link: + text: Mint your token + to: https://studio.ethereum.org/2 + - title: Crypto Pizza + content: A collectibles game built on top of the ERC-721 standard for creating unique tokens. + link: + text: See crypto-pizza + to: 'https://studio.ethereum.org/1' +img: + - header: https://source.unsplash.com/featured?waving + title: Hello World + content: A Hello World style template that deploys a smart contract with a configurable message, and renders it to the browser. + link: + text: Run hello world + to: https://studio.ethereum.org/1 + - header: https://source.unsplash.com/featured?coins + title: Coin contract + content: A starter dapp template that defines a basic fungible token you can create and send to others. + link: + text: Mint your token + to: https://studio.ethereum.org/2 + - header: https://source.unsplash.com/featured?pizza + title: Crypto Pizza + content: A collectibles game built on top of the ERC-721 standard for creating unique tokens. + link: + text: See crypto-pizza + to: https://studio.ethereum.org/1 +leftimg: + - header: https://source.unsplash.com/featured?waving + leftimg: true + title: Hello World + content: A Hello World style template that deploys a smart contract with a configurable message, and renders it to the browser. + link: + text: Run hello world + to: https://studio.ethereum.org/1 + - header: https://source.unsplash.com/featured?coins + leftimg: true + title: Coin contract + content: A starter dapp template that defines a basic fungible token you can create and send to others. + link: + text: Mint your token + to: https://studio.ethereum.org/2 + - header: https://source.unsplash.com/featured?pizza + leftimg: true + title: Crypto Pizza + content: A collectibles game built on top of the ERC-721 standard for creating unique tokens. + link: + text: See crypto-pizza + to: 'https://studio.ethereum.org/1' +button: + - title: Hello World + content: A Hello World style template that deploys a smart contract with a configurable message, and renders it to the browser. + link: + button: true + text: Run hello world + to: https://studio.ethereum.org/1 + - title: Coin contract + content: A starter dapp template that defines a basic fungible token you can create and send to others. + link: + button: true + text: Mint your token + to: https://studio.ethereum.org/2 + - title: Crypto Pizza + content: A collectibles game built on top of the ERC-721 standard for creating unique tokens. + link: + button: true + text: See crypto-pizza + to: https://studio.ethereum.org/1 +twobutton: + - title: Hello World + content: A Hello World style template that deploys a smart contract with a configurable message, and renders it to the browser. + link: + - button: true + text: Run hello world + to: https://studio.ethereum.org/1 + - button: true + text: Other + to: https://studio.ethereum.org/1 + - title: Coin contract + content: A starter dapp template that defines a basic fungible token you can create and send to others. + link: + - button: true + text: Mint your token + to: https://studio.ethereum.org/2 + - button: true + text: Other + to: 'https://studio.ethereum.org/1' + - title: Crypto Pizza + content: A collectibles game built on top of the ERC-721 standard for creating unique tokens. + link: + - button: true + text: See crypto-pizza + to: 'https://studio.ethereum.org/1' + - button: true + text: Other + to: 'https://studio.ethereum.org/1' +emoji: + - header: 👋 + title: Hello World + content: A Hello World style template that deploys a smart contract with a configurable message, and renders it to the browser. + link: + text: Run hello world + to: https://studio.ethereum.org/1 + - header: 🗝 + title: Coin contract + content: A starter dapp template that defines a basic fungible token you can create and send to others. + link: + text: Mint your token + to: https://studio.ethereum.org/2 + - header: 🍕 + title: Crypto Pizza + content: A collectibles game built on top of the ERC-721 standard for creating unique tokens. + link: + text: See crypto-pizza + to: 'https://studio.ethereum.org/1' +hero: + - header: https://source.unsplash.com/featured?waving + hero: true + title: Hello World + content: A Hello World style template that deploys a smart contract with a configurable message, and renders it to the browser. + link: + text: Run hello world + to: https://studio.ethereum.org/1 + - header: https://source.unsplash.com/featured?coins + hero: true + title: Coin contract + content: A starter dapp template that defines a basic fungible token you can create and send to others. + link: + text: Mint your token + to: https://studio.ethereum.org/2 + - header: https://source.unsplash.com/featured?pizza + hero: true + title: Crypto Pizza + content: A collectibles game built on top of the ERC-721 standard for creating unique tokens. + link: + text: See crypto-pizza + to: https://studio.ethereum.org/1 +--- + +# Component Usage + +### Cards + +Individual cards accept the following: + +- `level: number, optional, default: 3` the h tag to use. level: 3 = h3 +- `header: image url or emoji, optional, default: ''` +- `hero: boolean, optional, default: false` if a header image, then it will be displayed as a hero +- `title: string, required` the card title +- `content: string, required` the card text +- `link: object or array (max 2), optional, default: ''` the link + - If one item: + - `text: string, optional, default: ''` The text to display on the link + - `to: string, required` The url + - `button: boolean, optional, default: false` Show a button instead of a link + - if two items + - `text: string, required` + - Will show buttons + +### Card Lists + +- `level: number, optional, default: 3` the h tag to use. level: 3 = h3 +- `items: array, required` an array of card objects +- `desktopColumns: optional, default: 3` the number of desktop columns +- `tabletColumns: optional, default: 2` the number of desktop columns +- `smallTabletColumns: optional, default: 2` the number of desktop columns + +## Card Lists + +
+ +### 1 Column {.mt-4} + + + +### 2 Column {.mt-4} + + + +### 3 Column {.mt-4} + + + +### 4 Column {.mt-4} + + + +### 5 Column {.mt-4} + + + +### 6 Column {.mt-4} + + + +## Card Variants + +### Basic Cards {.mt-4} + + + +``` + +``` + +```yaml +base: + - title: Hello World + content: A Hello World style template that deploys a smart contract with a configurable message, and renders it to the browser. + link: + to: https://studio.ethereum.org/1 + - title: Coin contract + content: A starter dapp template that defines a basic fungible token you can create and send to others. + link: + to: https://studio.ethereum.org/2 + - title: Crypto Pizza + content: A collectibles game built on top of the ERC-721 standard for creating unique tokens. + link: + to: 'https://studio.ethereum.org/1' +``` + +### Cards With Link Text {.mt-4} + + + +``` + +``` + +```yaml +link: + - title: Hello World + content: A Hello World style template that deploys a smart contract with a configurable message, and renders it to the browser. + link: + text: Run hello world + to: https://studio.ethereum.org/1 + - title: Coin contract + content: A starter dapp template that defines a basic fungible token you can create and send to others. + link: + text: Mint your token + to: https://studio.ethereum.org/2 + - title: Crypto Pizza + content: A collectibles game built on top of the ERC-721 standard for creating unique tokens. + link: + text: See crypto-pizza + to: https://studio.ethereum.org/1 +``` + +### Cards With One Button {.mt-4} + + + +``` + +``` + +```yaml +button: + - title: Hello World + content: A Hello World style template that deploys a smart contract with a configurable message, and renders it to the browser. + link: + button: true + text: Run hello world + to: https://studio.ethereum.org/1 + - title: Coin contract + content: A starter dapp template that defines a basic fungible token you can create and send to others. + link: + button: true + text: Mint your token + to: https://studio.ethereum.org/2 + - title: Crypto Pizza + content: A collectibles game built on top of the ERC-721 standard for creating unique tokens. + link: + button: true + text: See crypto-pizza + to: https://studio.ethereum.org/1 +``` + +### Cards With Two Buttons {.mt-4} + + + +``` + +``` + +```yaml +twobutton: + - title: Hello World + content: A Hello World style template that deploys a smart contract with a configurable message, and renders it to the browser. + link: + - button: true + text: Run hello world + to: https://studio.ethereum.org/1 + - button: true + text: Other + to: https://studio.ethereum.org/1 +``` + +### Cards with emoji header {.mt-4} + + + +``` + +``` + +```yaml +emoji: + - header: 👋 + title: Hello World + content: A Hello World style template that deploys a smart contract with a configurable message, and renders it to the browser. + link: + text: Run hello world + to: https://studio.ethereum.org/1 + - header: 🗝 + title: Coin contract + content: A starter dapp template that defines a basic fungible token you can create and send to others. + link: + text: Mint your token + to: https://studio.ethereum.org/2 + - header: 🍕 + title: Crypto Pizza + content: A collectibles game built on top of the ERC-721 standard for creating unique tokens. + link: + text: See crypto-pizza + to: 'https://studio.ethereum.org/1' +``` + +### Cards with small image header {.mt-4} + + + +``` + +``` + +```yaml +img: + - header: https://source.unsplash.com/featured?waving + title: Hello World + content: A Hello World style template that deploys a smart contract with a configurable message, and renders it to the browser. + link: + text: Run hello world + to: https://studio.ethereum.org/1 + - header: https://source.unsplash.com/featured?coins + title: Coin contract + content: A starter dapp template that defines a basic fungible token you can create and send to others. + link: + text: Mint your token + to: https://studio.ethereum.org/2 + - header: https://source.unsplash.com/featured?pizza + title: Crypto Pizza + content: A collectibles game built on top of the ERC-721 standard for creating unique tokens. + link: + text: See crypto-pizza + to: 'https://studio.ethereum.org/1' +``` + +### Cards with small image on the left {.mt-4} + + + +``` + +``` + +```yaml +leftimg: + - header: https://source.unsplash.com/featured?waving + leftimg: true + title: Hello World + content: A Hello World style template that deploys a smart contract with a configurable message, and renders it to the browser. + link: + text: Run hello world + to: https://studio.ethereum.org/1 + - header: https://source.unsplash.com/featured?coins + leftimg: true + title: Coin contract + content: A starter dapp template that defines a basic fungible token you can create and send to others. + link: + text: Mint your token + to: https://studio.ethereum.org/2 + - header: https://source.unsplash.com/featured?pizza + leftimg: true + title: Crypto Pizza + content: A collectibles game built on top of the ERC-721 standard for creating unique tokens. + link: + text: See crypto-pizza + to: 'https://studio.ethereum.org/1' +``` + +### Cards with hero header {.mt-4} + + + +``` + +``` + +```yaml +hero: + - header: https://source.unsplash.com/featured?waving + hero: true + title: Hello World + content: A Hello World style template that deploys a smart contract with a configurable message, and renders it to the browser. + link: + text: Run hello world + to: https://studio.ethereum.org/1 + - header: https://source.unsplash.com/featured?coins + hero: true + title: Coin contract + content: A starter dapp template that defines a basic fungible token you can create and send to others. + link: + text: Mint your token + to: https://studio.ethereum.org/2 + - header: https://source.unsplash.com/featured?pizza + hero: true + title: Crypto Pizza + content: A collectibles game built on top of the ERC-721 standard for creating unique tokens. + link: + text: See crypto-pizza + to: 'https://studio.ethereum.org/1' +``` + +
diff --git a/docs/style-guide/index.md b/docs/style-guide/index.md index e8a755e0df0..df8c1ee8ea9 100644 --- a/docs/style-guide/index.md +++ b/docs/style-guide/index.md @@ -5,6 +5,9 @@ componentLinks: - title: Lists link: '/style-guide/lists' meta: 14 March 2020 + - title: Cards + link: '/style-guide/cards' + meta: 21 March 2020 --- # Component usage From acedb85e9a06643a90fa59e7499162261d938daf Mon Sep 17 00:00:00 2001 From: Carl Fairclough Date: Sat, 21 Mar 2020 19:27:52 -0300 Subject: [PATCH 2/2] fix grid columns --- docs/.vuepress/components/CardList.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/.vuepress/components/CardList.vue b/docs/.vuepress/components/CardList.vue index e07da90895a..de8bbe5841d 100644 --- a/docs/.vuepress/components/CardList.vue +++ b/docs/.vuepress/components/CardList.vue @@ -70,7 +70,7 @@ export default { .col-5 grid-template-columns repeat(5, 1fr) .col-6 - grid-template-columns repeat(5, 1fr) + grid-template-columns repeat(6, 1fr) @media screen and (min-width: $breakXS) .a-xs-col-1