Evaneos design system

Purpose

Providing a complete and easy to maintain documentation for Evaneos Design System.

How it works

Evaneos design system is based on 2 documentation types:

• Html simple documentation: put any html you want in /documentation (and subfolders). Thoses pages will be wrap with html head/foot template
• Components: one component per folder in /src/components. Folder has the name of the component. Each component documentation is based on fles:
  • {component-name}/{component-name}.less: main less file for the component
  • {component-name}/{component-name}.html: provide default full html dom for the component
  • {component-name}/{component-name}.doc.html: plain html documentation where you can put anything about the component: when to use, variant examples, ...

Install

git clone https://github.com/Evaneos/evaneos-design-system
npm install

Usage

This is a document in progress, everything is not clear and we shall discuss about it

Development

Once installed, run npm run watch to get development environement. It watch sources and build doc/styles on-the-fly. Furthermore, you can see the current output version / documentation on a local server - default is on http://localhost:8182 (see below to change the port).

While working, you can commit normally to your dev branch.

Version

Once all your stuff is clean, commit, PR validated and you're ready-to-go on production, run npm version (major | minor | fix). It will bump the version, build the dist version (both release and documentation), commit and tag.

Publish on github.io

You can publish all the documentation and production releases on github.io. Just do npm run pub. Dist content folder will be available on the repo gh-page.

Options

Development / Production mode: By default, configuration is set for production. Development options can be enabled by setting environment variable DEBUGto 1

DEBUG=1 npm run watch

Watching port: set the environement variable PORT to set another one than 8182.

PORT=1337 npm run watch

Compilation setting

All the build configuration is set in ``ìncludes/config.js```.

TODO

Next step

• [ ] Generate menu with all static and components pages links
• [ ] Documentation design & style
• [ ] Validate way of using (dev/release/deploy)

Further steps (ideas)

• [ ] Wrapper for non full with component renderer
• [ ] Css classes list
• [ ] Less files dependancies for components (and retro dependancies)