Based on the Pattern Lab Twig Standard Edition for Drupal.
- PHP 7.4 with
memory_limitset at least 512M composerinstalled globally- Node v12.x.x
git clone https://github.com/JudicialCouncilOfCalifornia/courtyard.gitto create the project directory (SSH recommended).cd courtyardto go to the directory.composer installto install Pattern Lab.npm installnpm run startto generate the pattern library, watch for changes, and serve the pattern library onlocalhostat a port that will be specified in the command's console output.
As npm run start is optimized for local development before making a commit minified css for srl and trial need to be generated by running npm run build
Multiple themes are available for the pattern lab and are being developed over time. These themes are generated into different css sheets to be used in different Drupal instances. The major themes are:
- SRL
- Trial Courts (deprecated for Newsroom use until migrated)
When developing these theme use separate npm commands to generate different stylesheets through gulp.js to cut down on load times.
SRL
npm run srl to generate the SRL themed pattern library, watch for changes, and serve the pattern library on localhost.
Trial Court
npm run trial to generate the Trial Court themed pattern library, watch for changes, and serve the pattern library on localhost.
All themes
npm run start to refresh all versions of the themed pattern library, watch for changes, and serve the pattern library on localhost.
You can select between these themes in the top left corners section panel.
- SRl
- Trial Courts
To develop a new theme copy the gulp processes, generate a style sheet, duplicate the base theme in protons and then change your variables accordingly.
When making changes to components in the pattern library use sass variables referenced in /css scss files to overwrite scss and turn functionality off and on. SRL will be used as the base styling for components. For example:
When adding graphic assets to the project use the appropriate directory
Simple one color icons are implemented and managed via icomoon.io. To add additional icons you can import selection.json back to the IcoMoon app using the Import Icons button (or via Main Menu → Manage Projects) to retrieve your icon selection. See images/icomoon
For more complex multicolor icons, branding elements or photography, add files to images/graphics images/logos or images/photos
Icons bundled with the USWDS 2.0 are available at /img
| Question | Answer |
|---|---|
| the path ./source/_twig-components/functions already exists. merge or replace with the contents of pattern-lab/drupal-twig-components package? M/r | M |
| the path ./source/_twig-components/filters already exists. merge or replace with the contents of pattern-lab/drupal-twig-components package? M/r | M |
| the path ./source/_twig-components/tags already exists.merge or replace with the contents of pattern-lab/drupal-twig-components package? M/r | M |
| update the config option twigDebug (1) with the value ? Y/n | N |
| update the config option twigAutoescape () with the value html? Y/n | N |
| the path ./public/ already exists. merge or replace with the contents of pattern-lab/styleguidekit-assets-default package? M/r | R |
| update the config option styleguideKitPath (...web/libraries/courtyard/vendor/pattern-lab/styleguidekit-twig-default) with the value vendor/pattern-lab/styleguidekit-twig-default? Y/n | Y |
composer update
You can view a public deployment of the pattern library at http://patternlab.courts.ca.gov/1.x/public/. This is hosted on an Exygy Netlify account. A GitHub artifact project auto-deploys the master branch. Each time a commit is pushed to the master branch, GitHub will run the npm run build command to build the pattern library, and it will then deploy that new build from the public directory.