This style guide library is designed to provide a central place for the team to document and store front end components like HTML partials and CSS styles. It is based on the Pattern Lab tool.
The Grunt wrapper around Pattern Lab Node Core, providing tasks to interact with the core library and move supporting frontend assets.
The Grunt Edition comes with the following components:
patternlab-node: GitHub, npmpatternengine-node-mustache: GitHub, npmpattern-lab/styleguidekit-assets-default: GitHubpattern-lab/styleguidekit-mustache-default: GitHub
The Pattern Lab Node - Grunt Edition uses Node for core processing, npm to manage project dependencies, and grunt.js to run tasks and interface with the core library. Node version 4 or higher suffices. You can follow the directions for installing Node on the Node website if you haven't done so already. Installation of Node will include npm.
There are two methods for downloading and installing the Grunt Edition:
The fastest way to get started with the Grunt Edition is to download the pre-built version from the releases page. The pre-built project comes with the Base Starterkit for Mustache installed by default.
Please note: Pattern Lab Node uses npm to manage project dependencies. To upgrade the Grunt Edition or to install plug-ins you'll need to be familiar with npm.
npm is a dependency management and package system which can pull in all of the Grunt Edition's dependencies for you. To accomplish this:
-
download or
git clonethis repository to an install location. -
run the following
cd install/location npm install
Running npm install from a directory containing a package.json file will download all dependencies defined within.
Most people want to run Pattern Lab Node standalone and not as a dependency. If you wish to install as a dependency you can do the following:
Use npm's install command with an argument to install the Grunt Edition into a location of your choosing. In Terminal type:
cd install/location/
npm install edition-node-grunt
This will install the Grunt Edition into a directory called node_modules in install/location/.
It's also highly recommended that you install grunt and bower globally.
npm install grunt -g;
npm install bower -g;
appcivist-patterns has the following ruby dependencies:
- compass. Compass plugin
- Susy
- sass media queries are also required.
Install rubygems then run:
gem install rubygems-update
update_rubygems
gem install sass
gem install sass-mq
gem install compass
gem install susy
To start hacking with appcivist-patterns a few commands are available to you.
You can also work with starterkits using the command line.
To update Pattern Lab please refer to each component's GitHub repository, and the master instructions for core. The components are listed at the top of the README.
These are some helpful commands you can use on the command line for working with Pattern Lab.
To list all available commands type:
grunt patternlab:help
To generate the front-end for Pattern Lab type:
grunt patternlab:build
To watch for changes, re-generate the front-end, and server it via a BrowserSync server, type:
grunt patternlab:serve
BrowserSync should open http://localhost:3000 in your browser.
To generate a distributable version of the patternlab just issue the following command:
grunt patternlab:dist
And the necessary css will be at dist folder.
Created by the Social Apps Lab at CITRIS, University of California, Berkeley. The Social Apps Lab Team is led by Prof. James Holston and Dr. Cristhian Parra. In partnership with the MiMove Team at INRIA, France, led by Dr. Valérie Issarny. Supported by EIT Digital, TUB, Nexus, and Missions Publiques. Contributions from City of Vallejo, Kalamuna and Pablo Defendini 2017 © Regents of the University of California
All the components of this project are open source software, distributed under the terms of the Social Apps Lab Open Source License