ucsf_edu: Pattern Lab + Drupal 8

Component-driven prototyping tool using Pattern Lab v2 automated via Gulp/NPM. Also serves as a starterkit Drupal 8 theme.

Requirements

1. PHP 7.1
2. Node (we recommend NVM)
3. Gulp
4. Composer
5. Optional: Yarn

Prototyping (separate from Drupal, Wordpress, etc.)

ucsf_edu supports both NPM and YARN.

Install with NPM: composer create-project fourkitchens/ucsf_edu:^2.0 --stability dev --no-interaction ucsf_edu && cd ucsf_edu && npm install

Install with Yarn: composer create-project fourkitchens/ucsf_edu:^2.0 --stability dev --no-interaction ucsf_edu && cd ucsf_edu && yarn install

Drupal installation

In a Composer-based Drupal install (recommended)

1. Require ucsf_edu in your project composer require fourkitchens/ucsf_edu
2. Move into the original ucsf_edu theme cd web/themes/contrib/ucsf_edu/
3. Create your new theme by cloning ucsf_edu php ucsf_edu.php "THEME NAME" (Run php ucsf_edu.php -h for other available options)
4. Move into your theme directory cd web/themes/custom/THEME_NAME/
5. Install the theme dependencies npm install or yarn install
6. Enable your theme and its dependencies drush then THEME_NAME -y && drush en components unified_twig_ext -y
7. Proceed to the "Starting Pattern Lab…" section below

If you're not using a Composer-based Drupal install (e.g. tarball download from drupal.org) installation instructions can be found on the Wiki.

Troubleshooting Installation: See Drupal Installation FAQ.

Note: Once you've created your custom theme, you can remove ucsf_edu as a dependency of your project. If you'd like to get updates as we push them, solely for educational/best-practice information, feel free to leave it in and receive the updates. Updating ucsf_edu will not affect your custom theme in any way.

Starting Pattern Lab and watch task

The start command spins up a local server, compiles everything (runs all required gulp tasks), and watches for changes.

1. npm start or yarn start

---

Highlighted Features

Lightweight	✔	ucsf_edu is focused on being as lightweight as possible.
SVG sprite support	✔	Automated support for creating SVG sprites mixins/classes.
Stock Drupal templates	✔	Templates from Stable theme - see /templates directory
Stock Components	✔	with Drupal support built-in (https://github.com/fourkitchens/ucsf_edu#ucsf_edus-built-in-components-with-drupal-support)
Performance Testing	✔	Support for testing via Google PageSpeed Insights and WebPageTest.org (https://github.com/fourkitchens/ucsf_edu/wiki/Gulp-Config#performance-testing)
Automated Github Deployment	✔	Deploy your Pattern Lab instance as a Github page (https://github.com/fourkitchens/ucsf_edu/wiki/Gulp-Config#deployment)

ucsf_edu's Built in Components with Drupal support

Forms, tables, video, accordion, cards, breadcrumbs, tabs, pager, status messages, grid

View a demo of these default ucsf_edu components.

Documentation

Documentation is currently provided in the Wiki. Here are a few basic links:

General Orientation

See Orientation

We have a series of videos for you to learn more about ucsf_edu.

For Designers (Prototyping)

See Designers

For Drupal 8 Developers

See Drupal Usage

Gulp Configuration

See Gulp Config