• Stars
    star
    376
  • Rank 113,810 (Top 3 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created almost 7 years ago
  • Updated about 1 month ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

PatternFly Elements. A set of community-created web components based on PatternFly design.

PatternFly Elements

latest version contributors

build status last commit Netlify status

Table of Contents

  1. Getting started
  2. Element catalog
  3. Creating components
  4. Theming components

PatternFly Elements is a work-in-progress collection of flexible and lightweight Web Components based on the Unified Design Kit. The repo also includes a generator to build new components. PatternFly Elements are:

  • Lightweight: small file size, minimal boilerplate, no "framework-like" features.
  • Universal: write once, use everywhere. PatternFly Elements work in React, Vue, Angular, vanilla JS, anywhere HTML elements are used.
  • Themable: Make overrides as needed via attributes or CSS variables

The result of these principles is that you can plug one set of components into a wide variety of applications; bringing UX consistency and developer familiarity to any web project.

A generator is included for creating web components that meet these goals.

Quick start

git clone [email protected]:patternfly/patternfly-elements.git
cd patternfly-elements
npm ci # install dependencies.
npm run start

Additional dependencies

nvm

Building PatternFly Elements requires specific versions of Node.js. To automate usage of the correct version, it is recommended that contributors install nvm as well an automatic version switcher like avn or shell-specific nvm integration. With those installed, your terminal will automatically switch to the correct Node.js version when you cd into the PatternFly Elements repository.

Command Line Helper Scripts

Many commands have an optional argument of space-separated component name(s), if left off it will assume it should run on all components. These should run from the project root.

Compile

# Build all components
npm run build

Preview

Runs development server.

npm start

Testing

✨ Test using (Web Test Runner)

# Run default test group in watch mode.
npm run test:watch

# Run a single test in watch mode.
npm run test:watch -- --files elements/pf-accordion/test/pf-accordion.spec.ts

# Or multiple:
npm run test:watch -- --files 'elements/pf-{select,card}/test/*.spec.ts'

# Run all tests excluding react and vue tests.
npm run test:watch

# Run all tests using a React wrapper in watch mode.
npm run test:react

# Run all tests using a Vue wrapper in watch mode.
npm run test:vue

# Run all tests with and without React and Vue wrappers.
# This is run on pull request within CI.
npm run test:ci

Development and Documentation servers

# Development and documentation servers load simultaneously on localhost:port `:8000` and `:8080` respectively.
npm run start

Support

Though we have tested and verified general usability within these frameworks, PatternFly Elements makes no guarantees about compatibility within specific sites and applications. Please test accordingly.

Stay informed

Sign up for the for the active project participation email list and/or the informed email list.

You can also participate in discussions on patternfly.slack.com in the #patternfly-elements channel.


home | start | develop | theming | catalog | web components

code style: prettier tested with webdriver.io

More Repositories

1

patternfly-3

This repo contains the HTML, CSS, and JQuery for the PatternFly 3 project.
HTML
1,148
star
2

patternfly-react

A set of React components for the PatternFly project.
TypeScript
774
star
3

patternfly

This repo contains core (HTML/CSS) implementation for PatternFly. Issues related to CSS/HTML and layout should be filed here.
SCSS
697
star
4

patternfly-timeline

A time based / event series interactive visualization using d3.js. Use drag and zoom to navigate in time.
JavaScript
136
star
5

angular-patternfly

This repo contains instructions and the code for a set of Angular 1 components for the PatternFly project.
JavaScript
123
star
6

patternfly-design

Use this repo to file all new feature or design change requests for the PatternFly project
HTML
114
star
7

patternfly-react-seed

A PatternFly seed for React web applications
TypeScript
88
star
8

patternfly-ng

The code for a set of Angular 6+ components for the PatternFly project. Note that the release/3.x branch supports Angular 4 and 5.
TypeScript
88
star
9

patternfly-org

Home of patternfly.org
JavaScript
69
star
10

patternfly-design-kit

The PatternFly Design Kit is a Sketch library used for creating PatternFly accurate design mockups
49
star
11

patternfly-sass

A port of Patternfly from Less to Sass
HTML
40
star
12

patternfly-demo-app

The PatternFly 3 demo app serves as a boiler for building your production app with PatternFly, Node.JS, and Webpack. Demo:
CSS
24
star
13

patternfly-react-demo-app

DEPRECATED: This project is no longer active. See https://github.com/patternfly/patternfly-react-seed for PF4 demos.
JavaScript
21
star
14

react-log-viewer

TypeScript
18
star
15

patternfly-quickstarts

Repository containing the PatternFly Quick Start extension code
TypeScript
15
star
16

patternfly-a11y

JavaScript
10
star
17

react-topology

TypeScript
10
star
18

pf-codemods

Codemods for upgrading from [email protected] to [email protected]. Uses eslint.
TypeScript
10
star
19

training-scenarios

PatternFly Developer Training
Shell
8
star
20

react-component-groups

TypeScript
8
star
21

patternfly-tutorial

This guide will help you set up PatternFly and start a PatternFly dashboard.
HTML
8
star
22

patternfly-next-react-demo-app

Demo React Application using Patternfly Next and Patternfly React
JavaScript
6
star
23

generator-pfelement

JavaScript
5
star
24

react-catalog-view

TypeScript
3
star
25

patternfly.github.io

HTML
3
star
26

patternfly-unified-design-kit

3
star
27

patternfly-code-guide

PatternFly Code Guide documents standards for developing flexible, durable, and sustainable HTML and CSS for PatternFly
HTML
3
star
28

react-console

This package provides VncConsole, SerialConsole and DesktopViewer React components
TypeScript
2
star
29

pfe-tools

TypeScript
2
star
30

angularjs-datatables

Clone of angular-datatables v0.5.6
HTML
2
star
31

angular-patternfly-demo-app

A base AngularJS application developed to create examples and samples of Angular-Patternfly components
JavaScript
2
star
32

patternfly-site

Wordpress theme for patternfly.org v1
JavaScript
2
star
33

patternfly-webcomponents

Proof of concept PatternFly design Web Components
JavaScript
2
star
34

patternfly-elements-documentation

Documentation website code for PatternFly Elements. Make documentation edits here.
CSS
2
star
35

react-data-view

TypeScript
1
star
36

patternfly-sketch-plugin

JavaScript
1
star
37

react-user-feedback

TypeScript
1
star
38

patternfly-jquery

HTML
1
star
39

patternfly-sandbox-ng

This repo contains instructions and the code for a set of Angular 6+ components for the PatternFly project. http://www.patternfly.org/patternfly-sandbox-ng
JavaScript
1
star
40

gatsby-theme-patternfly-org

Moved to https://github.com/patternfly/patternfly-org
1
star
41

design-tokens

SCSS
1
star
42

patternfly-blog

Wordpress theme for blog.patternfly.org
JavaScript
1
star