This is a Wordpress Theme Built on Timber with built-in Storybook documentation
In the project directory, you can run:
Runs storybook.
Open http://localhost:9009 to view it in the browser.
The page will reload if you make edits.
TODO
- Builds theme
- Compiles SASS
- Minifies CSS and JS
- Builds static storybook for github pages in
docs/directory
This theme uses repeatable components (Atoms and Molecules as defined in Atomic Design) to create blocks (Organisms)
- A component definition is comprised of:
- A directory within the /components folder
- One or more
.twigtemplate files - Corresponding SCSS definitions
- A Storybook stories file
For example, the button component is:
/components/button/
button.scss
button.stories.js
button.twig
Blocks are made available to all pages, and must be used in lieu of the classic editor to take advantage of theme functionality
Available blocks:
- Section
- Uses section and container components
- Section background color: default, muted, primary, secondary
- Section background cover image
- Container width: default, xsmall, small, large, xlarge, expand
- content
- Switcher Section
- Uses section, container, and switcher components
- Like section, but switches between content section panes added as children blocks
- Repeater: pane name, section
- Grid
- Useful for custom grid layout combining different blocks. Check that another block doesn't already exist displaying your content in a grid
- Uses grid component
- Grid gap: default, small, medium, large, collapse
- Grid child width: default, 1/2, 1/3, 1/4, 1/5, 1/6
- Always set to collapse to single column
- Grid match height: yes, no
- Repeater: content
- Heading
- Default gutenberg heading block
- Icon Grid
- Use the
developbranch for visual testing. - Chromatic will run automatically on commit.
- When you are ready to push a new version, create a pull request
- The Chromatic build must be approved for the pull request to succeed