How to run and build the pattern library
The pattern library is based on Fractal.
Best way to understand how to run it and what is required is to read the documentation. Start from how to install Fractal; Node, Gulp and Fractal itself are the only things needed.
Once everything is installed just run
gulp dev
And the pattern library should be visible at http://localhost:3000
For creating a build, that is just a static version of the library run
fractal build
For everything else best to read the documentation extensively and check Fractal’s GitHub.
To do
The library is not completed, few components has to be built and some bits need improvements.
- Components to build are Sidebar, Progress Determinate, Working Indicator Page, Progress Indeterminate. The design files can be found as part of a Zeplin project. In case of access needed to the project, get in touch with Simon Day.
- Few components require some lines of JavaScript for being functional, right now almost all of them have the code in the component itself, in the handlebars file. Probably better to move everything in script.js.
- Library is not fully accessible at the moment. Missing ARIA labels and probably the HTML can be optimised for accessibility purpouses.
- The main.css file is not minified or gzipped. That has to be added as part of the run and build process in gulpfile.js.
- Some components, mainly the forms ones, require some additional JavaScript library for being completely styled as per design. Select2 and Chosen are good options.
- Discuss if it’s better to have multiple versions of the component in the preview screen or to have more visible links to the variants (Right now links to variants are in the Info tab).
- The Notes tab should be for describing the states of the component and how/when to use it.
- A nice addition to have is the possibility to edit the notes of the components from outside the library so designers can write description for them. The notes being just a markdown file probably should not be that difficult to have the files hosted somewhere else and then automatically copied or references in the library.
- Some components like Particles and Assets will be more clear to understand without all the tabs of the other components. The current version of Fractal doesn’t offer the option to customise the tabs per component, but a future release should have that.