All Projects → pattern-lab → Patternlab Node

pattern-lab / Patternlab Node

Licence: mit
The Node version of Pattern Lab

Programming Languages

javascript
184084 projects - #8 most used programming language
SCSS
7915 projects
Nunjucks
165 projects
HTML
75241 projects
Mustache
554 projects
Twig
543 projects

Projects that are alternatives of or similar to Patternlab Node

hucssley
Hucssley - a full-featured, consistent, atomic utility class library for rapidly building performant UI
Stars: ✭ 79 (-95.84%)
Mutual labels:  design-systems, atomic-design
storybook-addon-blabbr
Component reviewer for React Storybook
Stars: ✭ 13 (-99.32%)
Mutual labels:  design-systems, atomic-design
shared-react-components-example
An example of a mono-repository of shared React components libraries!
Stars: ✭ 85 (-95.52%)
Mutual labels:  design-systems, atomic-design
shila-drupal-theme
Atomic design and Pattern Lab friendly, component-based, fairly unopinionated starting point for new Drupal themes
Stars: ✭ 81 (-95.73%)
Mutual labels:  pattern-lab, atomic-design
Evergreen
🌲 Evergreen React UI Framework by Segment
Stars: ✭ 11,340 (+497.47%)
Mutual labels:  design-systems
Nostyle
Design System
Stars: ✭ 101 (-94.68%)
Mutual labels:  design-systems
Design Systems Repo
A collection of Design System examples, resources, tools, articles and videos.
Stars: ✭ 95 (-94.99%)
Mutual labels:  design-systems
Puzzle Tokens
Batch create, manage and update Sketch styles and symbols using SCSS/LESS
Stars: ✭ 90 (-95.26%)
Mutual labels:  design-systems
You Dont Know Ui
Learn how to build universal, modern and scalable user interfaces
Stars: ✭ 140 (-92.62%)
Mutual labels:  design-systems
Figma Theme
Generate development-ready theme JSON files from Figma Styles
Stars: ✭ 130 (-93.15%)
Mutual labels:  design-systems
Ui Ux
📝 Curated list for UI/UX Designers
Stars: ✭ 125 (-93.41%)
Mutual labels:  design-systems
Css
The CSS design system that powers GitHub
Stars: ✭ 10,670 (+462.17%)
Mutual labels:  design-systems
Toolkit
Sky's CSS Toolkit
Stars: ✭ 126 (-93.36%)
Mutual labels:  design-systems
Tachyons Verbose
Functional CSS for humans. Verbose edition.
Stars: ✭ 102 (-94.63%)
Mutual labels:  design-systems
Balm Ui
♦️ A modular and customizable UI library based on Material Design and Vue
Stars: ✭ 133 (-92.99%)
Mutual labels:  design-systems
Pulse Boilerplate
React based boilerplate for creating scalable and well documented Design Systems. Live demo https://pulse.heartbeat.ua
Stars: ✭ 92 (-95.15%)
Mutual labels:  design-systems
Theo
Theo is a an abstraction for transforming and formatting Design Tokens
Stars: ✭ 1,697 (-10.59%)
Mutual labels:  design-systems
Paris
Define and apply styles to Android views programmatically
Stars: ✭ 1,716 (-9.59%)
Mutual labels:  design-systems
Style Dictionary
A build system for creating cross-platform styles.
Stars: ✭ 2,097 (+10.48%)
Mutual labels:  design-systems
Patternlab Edition Node Webpack
The webpack wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.
Stars: ✭ 122 (-93.57%)
Mutual labels:  design-systems

Pattern Lab Logo

Pattern Lab

This monorepo contains the core of Pattern Lab / Node and all related engines, UI kits, plugins and utilities. Pattern Lab helps you and your team build thoughtful, pattern-driven user interfaces using atomic design principles.

If you'd like to see what a front-end project built with Pattern Lab looks like, check out this online demo of Pattern Lab output.

Continuous Integration CodeQL current release license Coverage Status code style: prettier node (scoped) Join the chat at Gitter Join the chat at Discord

Docs @ Netlify Status

Pattern Lab Preview @ Netlify Status

Using Pattern Lab

Refer to the core usage guidelines

Installation

As of Pattern Lab Node 3.0.0, installation of Editions is accomplished via the command line interface.

The below assumes a new directory and project is required. This is likely what you want to do if starting from scratch. You could also run this within an existing project. The CLI will ask you for the installation location.

  1. Open a terminal window and following along below:
    mkdir new-project
    cd new-project
    npm create pattern-lab

    If you get an error stating that npx is not installed, ensure you are on npm 5.2.0 or later by running npm -v or install it globally with npm install -g npx. Learn more about npx.

  2. Follow the on-screen prompts to choose your Edition and a Starterkit should you want one.
  • If you chose edition-node, new commands in the "scripts" will be added in your package.json.
  • If you chose edition-node-gulp, a gulpfile.js will be added to your project.

Notice that @pattern-lab/cli was installed as a depdendency. Learn how to further use the cli in your own project.

Ecosystem

Pattern Lab Ecosystem

Core, and Editions, are part of the Pattern Lab Ecosystem. With this architecture, we encourage people to write and maintain their own Editions, Starterkits, and even PatternEngines.

Changelog

Each package within this monorepo has its own changelog. Below are the main ones to watch:

Support for Pattern Lab

Pattern Lab / Node wouldn't be what it is today without the support of the community. It will always be free and open source. Continued development is made possible in part from the support of contributors.

Thanks to Netlify for build tooling and hosting.

Contributing

Refer to the contribution guidelines.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].