Skip to content
A web component library for the ILR School
CSS HTML JavaScript Shell PHP
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows
scripts
source
tools/new-component
.gitignore
.nvmrc
README.md
alter-twig.php
composer.json
gulpfile.js
package-lock.json
package.json
patternlab-config.json

README.md

Union - Cornell University ILR School Design System

A simple, Twig-based component builder and Pattern Lab styleguide compatible with Drupal.

Setup

$ npm run setup

Usage

Creating components

$ npm run union:new

Component example:

source/patterns/components/button/
├── _button.twig
├── demo
│   ├── buttons.md
│   ├── buttons.twig
│   └── buttons.yml
├── button.css     (automatically compiled)
├── button.css.map (automatically compiled)
├── button.libraries.yml
└── button.scss

Library example:

# button.libraries.yml

css:
  button.css: {}
js:
  button.js: {}
dependencies:
  - base

Note that the css file referenced in your .libraries.yml file is automatically compiled from your .scss file. See below.

Compile and watch for changes and start Pattern Lab

$ npm start

Compile only

$ npm run build

Connect to Drupal

Union Organizer is a custom Drupal 8 module configures Twig namespacing and adds components and skins as Drupal libraries. See the Union Organizer readme for installation and documentation.

Helper functions

union_attributes().

Abstracts Drupal Attribute functionality so that attributes can be dynamically created or added to from within a template. See the form component.

Roadmap

  • Don't always include all skins in Pattern Lab and allow selection of skin.
  • Refactor colors. Define names in global but actual colors in skins.
  • Actually use libraries to build css rather than single union.css and union.js files.
  • In all cases, skin CSS should be loaded after component CSS.
  • Cleaner separation of component and skin typography.
You can’t perform that action at this time.