assemble-pattern-lab

An easier-to-use and more extensible build system for pattern-lab.

This project uses Assemble to build projects with pattern lab conventions.

Note that this isn't 100% feature complete, and the focus was mostly on implementing the patterns - not the actual demo site, but this project does implement the actual patterns, e.g. the important parts, and you can easily add (or request) any functionality you require.

Also, there are a few differences in how this project handles templates. Instead of having to namespace partials, like {{> organisms-latest-posts }}, and then using a complex regex system for dynamically renaming these partials according to how they are organized in folders, here you can simply use {{organism "latest-posts"}}.

This has several advantages:

Store your patterns wherever you want them, just tell Assemble where they are.
We're adhering to mustache/handlebars conventions instead of working around them.
We can easily extend and add new patterns, or allow metadata to be passed as context to templates and so on.

Getting Started

Download Options

Either download the project from GitHub, or
Use git to clone the project: git clone https://github.com/assemble/assemble-pattern-lab.git

Install dependencies

Install the necessary dependencies, including Assemble and Grunt:

npm i

Build

With everything downloaded and installed, build the project by running:

grunt assemble

Usage

The following patterns have been implements:

atoms: used in templates with {{atoms "foo"}}
molecules: used in templates with {{molecules "foo"}}
organisms: used in templates with {{organisms "foo"}}
templates: used in templates with {{templates "foo"}}
pages: Pages are specified using src property or files object/arrays in the Gruntfile config (see below)

For any templates to actually be found during the build, you'll have to first tell Assemble where to find them in Gruntfile, like so:

assemble: {
  options: {
    // Pattern Lab templates
    patterns: {
      atoms: ['src/atoms/**/*.hbs'],
      molecules: ['src/molecules/**/*.hbs'],
      organisms: ['src/organisms/**/*.hbs'],
      templates: ['src/templates/**/*.hbs'],
    }
  },
  site: {

    // `pages` are defined here (you can use any of the Grunt files
    // patterns, e.g. src-dest, files object, files array, etc)
    files: {
      '_gh_pages/': ['src/pages/*.hbs']
    }
  }
}

Contributing

All contributions are welcome! If you like the project, stars and tweets are a great way to show your support. If you want to take a more active role and help with documentation, writing unit tests, addressing issues or whatever seems interesting, please let us know, we'd be happy to help you get started!

Also, we use Verb for documentation, so don't edit the readme or other docs directly. Please edit the templates in the docs directory and then run verb to build them before you do a pull request. Thanks!

Authors

Jon Schlinkert

License

This file was generated by verb-cli on March 17, 2014.

assemble / assemble-pattern-lab

readme