Prerequisites
- Node 6.2.2
- Clone from repo:
git clone git@github.com:NET-A-PORTER/preston.git
- Install node modules:
cd preston && npm i
- Start it up:
npm start
OMG, I'm ready
Style guides are currently installed via Bower.
- Create a directory for your style
- Create
definition.json
file in your brand spanking new directory that looks like this:
{
"title": "Retro 1990's Style Guide",
"elements": ["buttons", "typography", "icons", etc.],
"files": ["path/to/styles.scss"]
}
-
Create a directory for element in the style guide, e.g. buttons
-
In each directory create
document.yml
andstyle.scss
files- Your
document.yml
file should contain your elements' markup, example - Your
style.scss
file is where you put your own styles for your element
- Your
-
In your root directory, create a
style.scss
to be built, which imports the styles for each element, e.g.@import 'typography/style'; @import 'buttons/style'; @import 'icons/style';
-
Publish it via bower (push to Github, and tag)
-
Install it into Preston,
bower install --save my-groovy-style-guide
-
Raise a Pull Request to this repo with the updated
bower.json
Take a look at outnet-2015 for an example of a style guide.
- App runs from
src
directory - Style guides stored in
src/styles/{project}/
via Bower. - Styles compiled by node-sass middleware at runtime
- App styles compiled to
src/client/css/
- Style guides compiled to
src/client/css/{guide-name}
- App styles compiled to
- Built on top of API
- API routes should be defined in
src/routes/
- Try hitting /api/1.0/styles
- API routes should be defined in
- Can deploy style guides to S3 via the build, but it's recommended that you set up your own deployment pipeline in your own style guide
Preston is hosted as a service on http://preston-nap.herokuapp.com.
This is continuously deployed to whenever changes are merged into to master.
- Display SASS & compiled contents in line with markup
- Separation of base, component and module styles
- Support document style guides available on npm
- CLI to create style guides