Download the PHP package vardumper/picocss-storybook without Composer
On this page you can find all versions of the php package vardumper/picocss-storybook. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download vardumper/picocss-storybook
More information about vardumper/picocss-storybook
Files in vardumper/picocss-storybook
Package picocss-storybook
Short Description Storybook.js for PicoCSS
License MIT
Homepage https://github.com/vardumper/picocss-storybook
Informations about the package picocss-storybook
PicoCSS Storybook
Storybook Skeleton for the PicoCSS Default Theme.
Requirements
You need NPM and Yarn installed on your machine to work with Storybook. On macOS, you can install them both with brew brew install npm yarn
.
Additionally, PHP and Twig are used to compile Stories. On macOS PHP is installed with brew install php
.
Why does this repository exist?
Storybook is a great tool to develop and test components in isolation. It is also a great tool to document components. This repository is a skeleton for the PicoCSS Default Theme. It is a starting point to develop your own designs based on PicoCSS and document components.
Goals
The goal of this repository is to provide a starting point for developing PicoCSS Themes and Color Schemes. Starting off with a component library utilizing the PicoCSS Default Theme. As an extra benefit, this repo can produce Symfony UX Twig Components, that are ready to be used in Symfony Projects. This can be done by autoloading the generated Twig Components namespace into a Symfony Project.
Getting Started
To get started, first clone this repository.
And run:
This will install Composer and Yarn dependencies, build the storybook, and finally start Storybook for you.
Roadmap
- [x] Automatically add ~all possible argument combinations~ required argument combinations (cartesian product) as stories.
- [x] Remove pico.css from preview.js and instead use a custom pico.scss without the default theme.
- [x] Enrich HTML5 Specifications with PicoCSS-specific definitions. (eg: class="{contrast|outline|secondary}")
- [ ] Move styles into a category/folder/_component-name.scss file. Decide wether to autogenerate or handcraft them.
- [ ] Finish all HTML5 Elements including complex or composite components.
- [ ] Auto generate templates for different technologies (Twig, React, Vue, Angular, Svelte, etc.)
All versions of picocss-storybook with dependencies
fakerphp/faker Version ^1.23.1
matthiasmullie/minify Version ^1.3.73
mnapoli/silly Version ^1.9
symfony/yaml Version ^7.0.7
twig/intl-extra Version ^3.9.2