stylegen should be an easy to use styleguide generator for arbitrary projects. There is no assumption about programming languages and only a few ones about your projects code structure.
What stylegen ships is an executable that parses your project for configuration files and some templates which describe your work and builds a ready to deploy static styleguide out of it.
As stylegen is based upon Node.js, we have to get that installed first. So just download a prebuilt version or install it via your favorite package manager, like Homebrew. Afterwards the command-line tools node and its corresponding package manager npm should be available.
stylegen is shipped with an executable so that can just install it globally with npm as usual (the --global flag assures, that the executable is linked inside your path).
npm install --global stylegenAfter a successful installation you should have the stylegen command available in your commandline which we can test easily with:
stylegen help
Which should result in an output like
> stylegen help
>
> Usage: stylegen [options] <command>
>
> stylegen v0.x.x
>
> a static styleguide generator
>
> [...]Now, with the tooling at hand, lets get started with the actual styleguide. We need to setup some configurations and templates, so that the tool gets its instructions of what to build in the end.
At first you should create a styleguide.yaml file (or .json if writing brackets is more of your taste :)). The styleguide-Configuration is usually expected in the folder where you will run the stylegen create command later on.
And to have some starting content, lets create a markdown file in a sub-folder, that contains our static page content. So lets create a sub-folder pages
and a file inside of it called introduction.md. On unix machines you may just run the following command:
mkdir -p ./pages && printf "Some introduction text, that provides an entry to your styleguide.\n" > ./pages/introduction.mdNOTE: the current working directory, styleguide config path and similar can be configured in an advanced setup.
Lets assume a simple basic configuration as a starting point:
# project name
project: Example
# resulting content structure
content:
- label: introduction
type: md
content: pages/introduction.mdso our current content should look something like this:
├── pages
│ └── introduction.md
└── styleguide.yaml
No we are able to run our styleguide tool the first time with a resulting styleguide created out of the given (yes, very simple) content.
So just run stylegen create and you should receive something like that:
> Cli.command create
> […]
> Styleguide.write: finished writing
And in result there should be a freshly generated folder styleguide inside this directory, that contains the according generated files. At the moment you may just open the introduction.html page to have a first impression on what our styleguide may look like. To serve this repository with live-reload enabled so that changes appear immediately you may want to take a look at live-server or something similar.
NOTE: Because of keeping the project scope clear and concise (it is actually about building styleguides out of files), we've decided for not adding such tooling to the executable, so you won't find file watchers or servers inside this project.
Beside static content, which is a little bit boring, the core of a web-styleguide is the possibility to describe a pattern library aside to your frontend components.
Lets assume/create a folder structure, that contains exactly one component called 'button' so we have a simple example.
> mkdir -p components/button
> touch components/button/component.yaml
> printf "---\ntext: ExampleButton\n---\n<button>{{text}}</button>" > components/button/view.hbsNOTE: if you have an asset structure that has a component structure already, you may just lay any configurations aside to the component files. In case you don't have something like that, e.g. you may have only a few css/js files in a flat folder, you can lay your stylegen component files in a folder tree anywhere you think it fits in.
To identify a component as such, we have to add a file called component.yaml (or .json) to that directory. By doing this we say, ok in this directory i describe a component. A component folder may contain "sub-components", with their own component.yaml files, but that does not really matter for stylegen. Any grouping and structuring of the resulting styleguide is done inside of the styleguide.yaml, so that we later on may change the file structure, without disturbing the styleguide and vise versa.
A component-configuration may contain a variety of information, but we start with a very simple one.
label: Button
id: btnThis file must be located in the project root and declares the project settings. It may be either written in yaml format (styleguide.yaml) or as plain json (styleguide.json). We prefer yaml format for configurations, but you are free to choose json as well.
| Property | Default | Description |
|---|---|---|
| project | project name | |
| namespace | "app" | a namespace, that e.g your helpers are prefixed with |
| componentPaths | ["components"] | relative directory paths, in that your component configurations are located |
| target | "styleguide" | the compile target for the resulting styleguide |
| dependencies | {} | see "Dependencies" below |
| assets | static asset files, that should be copied to the styleguide directory, head for "Assets" for further information | |
| content | list of page configurations, take a look at "Content" | |
| componentDocs | "." | path of component doc files, relative to the given component.yml. "doc" e.g says "all documents have to be placed in a sub-directory doc adjacent to the component.yml" |
| Property | Default | Description |
|---|---|---|
| styles | styles that should be linked in the head section of your page | |
| js | js that is loaded at the end of your body tag | |
| templates | see dependecy templates |
| Property | Default | Description |
|---|---|---|
| head | [] | may contain a list of filepathes, of that each content is placed in the head tag |
| bottom | [] | may contain a list of filepathes, of that each content is placed in right before the closing body tag |
| Property | Default | Description |
|---|---|---|
| src | file or directory, that should be copied to the styleguide | |
| js | target path for that file or directory |
| Property | Default | Description |
|---|---|---|
| label | the label of a page is used for the link text for example *required | |
| type | either one of "md" or "tags", to define a page to be a plain markdown document or a list of components grouped by tags | |
| content | in case type is "md", content must be a relative path to that document, otherwise a list of tags is expected | |
| children | like content itself this is a list of page configurations | |
| preflight | a preflight markdown document that is rendered in front of a component listing (so it is only "valid" for nodes of type 'tags' or 'components') |
Component configuration files are usually located adjacent to the component content, but it is not mandatory. Likewise to the styleguide configurations, you can use component.yaml or component.json files for the configurations. As well as for styleguides we recommend the usage of yaml as configuration language.
| Property | Default | Description |
|---|---|---|
| id | directory basename | namespace unique identifier |
| label | label is used for the component headline for example | |
| namespace | app | prefix e.g. for components and partials |
| tags | [] | list of tags, that is used for content structure building |
| partials | [*_partial.hbs] | reusable list of partials for creating entities of this component. Partials are prefixed with the configured namespace. |
| view | "view.hbs" | the view is the renderable preview inside of the component |
| docs | [*.md] | list of markdown documents, that describe the component. See "Documentation" |
| states | {} | list of states a component may have, e.g. hover, disabled, active, etc. --> "States" |
| viewContext | Object context that is passed to the rendered view |
| Property | Default | Description |
|---|---|---|
| key: value | key determines the label of a document, while the value is a component relative path to the document. (e.g. "business": "component-business.md") |
| Property | Default | Description |
|---|---|---|
| id: State | an object with key as "id" for the state and a "State" as value |
| Property | Default | Description |
|---|---|---|
| id: State |
To get stylegen up and running for your development, just create your fork and run npm install in it.
For TypeScript compilation, please install the TypeScript npm package:
(Because we rely on es6 but want to have the commonjs import syntax to have it running on node, please install the latest typescript package with @next)
npm install -g typescript@next
Install also the Typedefinitions with tsd:
npm install tsd -g
tsd install
To work with stylegen, it may make sense to link the executable bin/stylegen into your PATH, so that you may call it also in other directories, without having the need to call everytime for the absolute or relative path.
To develop new features you may want to add a file structure e.g. like that:
├── assets
│ ├── components
│ │ ├── atoms
│ │ │ └── form-elements
│ │ │ ├── button
│ │ │ │ ├── button_danger_partial.hbs
│ │ │ │ ├── button_partial.hbs
│ │ │ │ ├── button_primary_partial.hbs
│ │ │ │ ├── button_view.hbs
│ │ │ │ └── component.json
│ │ │ └── text_field
│ │ │ ├── component.json
│ │ │ ├── text_field_partial.hbs
│ │ │ └── text_field_view.hbs
│ │ └── moleculars
│ │ └── forms
│ │ └── search_form
│ │ ├── component.json
│ │ └── search_form_view.hbs
│ └── globals
└── styleguide.json