Koan is a component library and a base theme for Drupal built by sleepingmonk.
This library uses algorithmic/intrinsic layout techniques and 13 "Layout Primitives", instead of media queries and breakpoints, to compose complex layouts. It allows content to expand or contract according to its needs, and still adapts to infinite screen sizes.
Layout Primitives are composed into Atomic Components, that are used to build templates and pages.
For more details about the methodologies used in this component library see: https://github.com/sleepingmonk/koan/tree/master/src/stories/Docs/Intro
External References:
- https://every-layout.dev/rudiments/
- https://aneventapart.com/news/post/designing-intrinsic-layouts-aea-video
- https://atomicdesign.bradfrost.com/table-of-contents/
- Install with composer to your drupal project.
- COMING SOON
- Enable the base theme in drupal via the UI or with drush:
drush en koan
- Create a new theme with the following line in your
info.yml
file:base theme: koan
- Include twig templates into your theme via
@atoms/button.twig
, etc. COMING SOON
For development of the pattern library only. Not required to use this as a base theme.
- Node 18
- Clone this repo and cd to the directory
nvm use
: to use the specified version of Node. (If using nvm to manage node. You may need to install the appropriate version.)npm install
: to install the required development packages.npm run storybook
: to start storybook. It will open a new browser window.
There is a package installed to help make development easier, by generating component scaffolds for you. The package is called Plop JS. You don't need to learn or configure it. Just create new components by running it and following the prompts.
npm run plop
- Enter a component name. i.e.
Card
- Select a component type. i.e.
Molecules
The new component will appear at src/stories/Molecules/Card
For more information about how to develop components for this library, see the "Documentation" section on the sidebar of Storybook.
- Project Page: https://koan.netlify.app/?path=/docs/documentation-intro--default
- Documentation: https://koan.netlify.app/?path=/docs/documentation-intro--default
- Support: https://drupal