Docplanner Web UI Kit


With Web UI Kit you can build responsive, mobile-first components using Vue.js v3 and Bootstrap v4.

Ecosystem

ProjectVersionDescription
dp-ui-kit-vuev4.0.0Vue components
dp-ui-kit-scssv4.0.0SCSS styles
dp-ui-kit-iconsv4.0.0Icons
dp-ui-kit-logosv4.0.0Logotypes

Installing

CODE

Copy

How to extend/fix/modify a package

  1. Always start working with new branch from fresh develop branch.
  2. During creating a new commit or branch please keep in mind about conventional commits that we are stick.
  3. Create a new pull request of your branch to develop.
  4. If you provide changes that needs to be described in documentation don't hesitate, your contribution is welcome. These tips may help you with it.
  5. Ping someone from Web UI Kit team to review your commits.
  6. You will be automatically informed through the Slack channel #tech-project-ui-kit after it will be released.

FAQ

How to deal with Conventional Commits ?

TLDR;

CODE

Copy

Commit types: feat:, fix:, refactor:, perf:, test:, chore:, docs:, style:
Commit scopes: ...(vue):, ...(scss):, ...(icons):, ...(logos):

For quick lookup check Conventional Commits Cheat Sheet.

Learn in deep about conventional commits at official specification website and Commit Message Guidelines from Angular convention.

How to add a new icon to icons package ?

The answer is here

How to contribute to write documentation

Run documentation locally, just type from root folder:

CODE

Copy

Current version of documentation are located at docs folder

There are available extra featured fence Code Blocks for markdown

Code langDescription
vueGenerates live visual vue component preview with code preview (vue & html) for provided vue code
htmlGenerates visual & code preview for provided html code
ModifierDescription
htmloffDisable html code preview for provided code
outlineOutline variant for preview container, default is gray filled background
staticDisable vue or html visual preview, it generates provided code as is

You can chain code lang with any modifiers, for example:

CODE

Copy

How can we contribute to the DP UI Kit?

You can demand improvements and report bugs in the components,

  1. Create an issue.
  2. Try to be as descriptive as possible and add a version of the DP UI Kit.
  3. Submit! everything is ready to discuss and review the issue with the team.

Assets handling

Image from public directory docs/.vuepress/public/Image from assets directory docs/assets/
![img from public dir](/dp-logo.svg)![img from assets dir](@assets/img/dp-logo.svg)