https://github.com/ilrWebServices/union

A web component library for the ILR School
https://github.com/ilrWebServices/union

Last synced: about 2 months ago
JSON representation

A web component library for the ILR School

• Host: GitHub
• URL: https://github.com/ilrWebServices/union
• Owner: ilrWebServices
• Created: 2019-02-26T18:29:55.000Z (almost 6 years ago)
• Default Branch: union_ng
• Last Pushed: 2024-07-23T21:24:40.000Z (5 months ago)
• Last Synced: 2024-07-24T19:15:09.894Z (5 months ago)
• Language: Twig
• Homepage: https://ilrwebservices.github.io/union/
• Size: 3.48 MB
• Stars: 6
• Watchers: 6
• Forks: 0
• Open Issues: 14
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• component-based-theming - Union

README

        
# Union - Cornell University ILR School Design System

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

## Setup

```

$ composer install

```

## Usage

### Creating components

```

$ composer run union:new

```

Component example:

```

components/button/

├── buttons.data.yml

├── button.twig

├── button.css

└── button.libraries.yml

```

Library example:

```

# button.libraries.yml

css:

  button.css: {}

js:

  button.js: {}

dependencies:

  - base

```

### Connect to Drupal

[Union Organizer](https://github.com/ilrWebServices/union_organizer/) is a custom Drupal 8 module configures Twig namespacing and adds components and skins as Drupal libraries. See the [Union Organizer readme](https://github.com/ilrWebServices/union_organizer/blob/master/README.md) 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.

## Publishing a new Release

This package is published to Packagist. To create a new release:

```

# TBD

```

## Roadmap

- 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.