Code Monkey home page Code Monkey logo

patternlab-node's Introduction

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 follow 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 Starter Kit should you want one.
  • If you chose edition-node, new commands in the "scripts" will be added to 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 dependency. 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, Starter kits, 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 building tooling and hosting.

Node Support Policy

We only support actively maintained versions of Node.

We specifically limit our support to maintenance versions of Node, not because this package won't work on other versions, but because we have a limited amount of time, and supporting the oldest maintenance offers the greatest return on that investment while still providing the lowest standard level for installations on any possible actively maintained environment out there.

This package may work correctly on newer versions of Node. It may even be possible to use this package on older versions of Node. However, that's more unlikely as we'll make every effort to take advantage of features available in the oldest maintenance Node version we support.

As each Node maintenance version reaches its end-of-life, we will replace that version from the node engines property of our package's package.json file with the newer oldest one. As this replacement would be considered a breaking change, we will publish a new major version of this package. We will not accept any requests to support an end-of-life version of Node. Any merge requests or issues supporting an end-of-life version of Node will be closed.

And we might even update the minor and patch version of that supported maintenance Node version regularly, without making this a breaking change than as it should be in everybody's interest even also to follow this concept of using patched software as their development system basis, especially on those older Node versions.

We will accept code that allows this package to run on newer, non-maintenance versions of Node. Furthermore, we will attempt to ensure our changes work on the latest version of Node. To help in that commitment, we even test that out by ourselves and get feedback from the community regularly regarding all LTS versions of Node and the most recent Node release called current.

JavaScript package managers like e.g. NVM should allow you to install this package with any version of Node, with, at most, a warning if your version of Node does not fall within the range specified by our node engines property. If you encounter issues installing this package, please report the issue to your package manager.

This policy has been adapted from https://github.com/conventional-changelog/conventional-changelog#node-support-policy.

Contributing

Refer to the contribution guidelines.

patternlab-node's People

Contributors

alexbenic avatar andy-set-studio avatar benhalverson avatar bmuenzenmeyer avatar bolt-bot avatar bradfrost avatar bryce-gilhome avatar david-moldenhauer avatar dmolsen avatar dnwhte avatar e2tha-e avatar engelfrost avatar enigmatic avatar evanlovely avatar evanplaice avatar frostyweather avatar gael-boyenval avatar geoffp avatar hadl avatar josefbredereck avatar marcinmodestowicz avatar mfranzke avatar pavel avatar phawxby avatar raphaelokon avatar ringods avatar sghoweri avatar spezzino avatar tapio avatar tevio avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

patternlab-node's Issues

Async patternbuilder

Is this possible?

Been a while since I dead async node for realZ, should be fun πŸ‘Š

Version Mustache with NPM.

Does it make sense to manage mustache.js within NPM using the latest stable? Opposed to checking in the entirety of Mustache.js within the builder/lib directory.

Clean up the README

Still references to patternlab php wiki documents. Better to use patternlab.io or my own.

Pattern Lab Node 1.2

Drive progress toward adherence to the Pattern Lab specification:

  • #35 4.1. Atomic Design Naming Convention Not Required
  • #6 4.6.3. Annotations
  • #36 5.5. Version Command
  • #37 5.6. Help Command

Miscellaneous Fixes and Improvements

  • #26 Code Option Not Working and Some Icons Not Showing
  • #30 Version Mustache with NPM
  • #31 Published to NPM
  • Pattern compilation only support

Remove grunt dependencies from builder/patternlab.js

Converting the builder to straight-up node will decouple the core components from the build tool.

  • Helps with unit testing and single responsibility
  • More easily allows patternlab-node to be reused, in, say, something like gulp

Question: How much task processing do you want to include?

Hey Brian, love that we are getting the grunt and gulp versions up and running!

Shoptology was previously running patternlab-php and we built out some great workflow items for building out the style guide as the "true source" of the design templates for an app. We build out all our styles for components before exporting the finished css and image assets to our app for real world usage.

My question is to what degree would you like to include any of the following in the grunt or gulp projects? Happy to pull request for any of these elements if you think they would be beneficial for the project.

https://github.com/shoptology/patternlab-php/blob/master/Gruntfile.js

We have BrowserSync, which lets you open the styleguide in unlimited number of devices and keeps them all in sync with navigation and source changes, great for building out responsive components in the style guide.
https://github.com/shakyShane/grunt-browser-sync

For testing the condition of your styles:
https://github.com/peterkeating/grunt-csscss
https://github.com/phamann/grunt-css-metrics

Visual regression tests (lets you visually test differences between versions of your style guide as your team makes changes)
https://github.com/BBC-News/wraith

UnCSS works perfectly with Patternlab, can scan all the pages and remove any css that wasn't used on the pages. We've seen 30-40% file size savings on Bootstrap projects, as has Addy Osmani who started the grunt plugin.
https://github.com/addyosmani/grunt-uncss

We also have some scripts that help with optimizing images as they come in and building sprite sheets.

.DS_Store are still compiled

Hi, I have my config/config.json configured like this:

 {
    "patterns" : {
        "source" : "/../../source/_patterns/",
        "public" : "/../../public/patterns/"
    },
    "ignored-extensions" : ["scss", "DS_Store", "less"],
    "ignored-directories" : ["scss"],
    "contentSyncPort" : 8002,
    "navSyncPort" : 8003
 }

but the .DS_Store files are still being picked up by the compiler. Am I doing something wrong?

Document pl node features on patternlab.io

Native Controls

Original inspiration: pattern-lab/patternlab-php#21

We should create some command files that users can double-click to perform common tasks. This would reduce the need to know the command line as much.

  • Grunt Install
  • Gulp Install
  • Build Pattern Lab - Grunt
  • Build Pattern Lab - Gulp
  • Build,Serve, And Watch Pattern Lab - Grunt
  • Build,Serve, And Watch Pattern Lab - Gulp
  • Stop Server
  • Get Version
  • Check for updates?

Focus would be on Mac and Windows environments, initially.

Consider shipping patternlab-node with connect task

As tridnguyen pointed out on twitter:

@bmuenzenmeyer hey is there a reason why there’s no connect task to serve static files for patternlab-node?

β€” Tri Nguyen (@tridnguyen) July 15, 2014
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

There may not be a good reason. He goes on to state that out of the box, pl ships a means to compile templates to generate files, but no way to view them in a "production" setting.

A question to @dmolsen and @bradfrost and @benedfit, do you see any downside to including mini-webservers with patternlab?

Pros
  • A decision made for end-users is a good one if it reduces barrier to entry
  • More precise analog to actual web server than filesystem
Cons
  • A decision made for end-users is something not everyone may want (see pattern-only discussions)
  • Shipping more complexity

It's fairly easy for a savvy designer/developer to add or remove grunt tasks for connect, so the decision really falls, in my mind, to what's best for those new to the space.

Also - is this something the spec should address?

Use bower for managing dependencies?

Enhancement Idea: Just throwing it out there, what do you think about using bower to manage dependencies like jquery, modernizr, and anything else that is in bower? Since it's a node project it seems to make sense. If not I might just do it for my own personal use πŸ˜„

Gulp support

Remaining todo to ship this:

  • Update gulpfile to omit scss where possible as a default
  • Revert project back to grunt-first
  • Update readme with browsersync
  • Update readme installation instructions to help users wanting to init with gulp. Mention Windows caveat
  • Update readme to help users switch to gulp
  • Create upgrade instructions
  • Create known issue section in readme for the other device page follow problems using the menu.
  • Changelog
  • Make sure gulp files are properly cited as deriving form oscar-g's work
  • Create ticket for small optimization to better target grunt watches more efficiently
  • Remove sass from package jsons, instead include directions to include and turn on

Update stated dependencies

Ran into an issue in which grunt-contrib sass was out of date.

Check to make sure the package.json file is constructed to specify latest version.

Published to NPM.

I've published this package to NPM and will maintain it so long as it's okay with the core team. I would like to make a change which is swapping devDependencies to dependencies.

Using this project within an existing Grunt project is as easy as configuring the grunt-hub plugin to point to this project nested within node_modules.

"Code" option not working and some icons not showing

screen shot 2014-04-03 at 3 40 15 pm

Above is a screen shot of the icons not showing. They do work when I install the php version, so I'm not sure where to start debugging. The "Code" option that shows code also works right off the bat in the php version but I haven't been able to get it working in the node version.

Might be relevant: My dev tools is showing on line 453 of styleguide.js, event.data.lineage is returning undefined.

Any suggestions?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.