Skip to content

Instantly share code, notes, and snippets.

@vjwilson
Last active May 31, 2017 00:29
Show Gist options
  • Save vjwilson/248b0ae4bd9e361710f8a363510ab030 to your computer and use it in GitHub Desktop.
Save vjwilson/248b0ae4bd9e361710f8a363510ab030 to your computer and use it in GitHub Desktop.
Sample basic Catalog styleguide

Components

Recipe Component

The Recipe component takes a recipe object, and if it is in a list, also a key prop.

lang: jsx
---
<Recipe key={recipe.id} recipe={recipe} />
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Recipe Catalog</title>
</head>
<body>
<div id="catalog" />
<script src="https://interactivethings.github.io/catalog/catalog.min.js"></script>
<script>
Catalog.render({
title: 'Recipe Catalog',
pages: [
{
path: '/', // The path where the page can be accessed
title: 'Introduction', // The page title
src: 'intro.md' // Path to the Markdown document
},
{
path: '/components', // The path where the page can be accessed
title: 'Components', // The page title
src: 'components.md' // Path to the Markdown document
},
// Other pages …
]
}, document.getElementById('catalog'));
</script>
</body>
</html>

Recipes Styleguide

Getting Started

The recipes consist of four (4) elements

  1. Title
  2. Author
  3. List of ingredients
  4. Directions
value: '#ffe332'
name: 'Primary'
span: 2
value: '#000'
name: 'Text'
span: 2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment