# Contribution Guidelines

# Component styles

Styling library vue components so it fits into project style can be challenging, because you don't know configuration of target project, and you can't easily import it's variables. Here are some recommendations on how to author styles, so the component is easy to use and style in target project. From most to least prefered solution (it's ok, even recommended to mix them):

# Bootstrap classes

All our projects are based on bootstrap 4. So use bootstrap classes if possible.

# Single File Components

This should be used only for general layouting (like it's inline-block, this is next to that without any padding). General rule is if you need to use any exact color or non zero value (px, em), it should not be here.

Use BEM naming convention (Block name should match component name).

Do not scope your css, it's much harder to override in target project and you don't need it with BEM.

# In library scss files

Library should provide src/styles/main.scss file this file will be loaded from target project and project will provide bootstrap scss variables, which you can use for styling. Create src/style/component_name.scss and import it in src/styles/main.scss.

This is place where you can use bootstrap variables for border-radius, spacing, font-size...

# The admin scss files

For all our administration, we're using bootstrap based theme the-admin (official documentation, source).

Use only if need the admin specific variables or when component should have extra style when used in the admin.

# Documentation

All documentation on dsg.wtf are live documents, anyone can contribute. If you see anything wrong, missing, or not documented well enough, please make merge request (if you dont want to clone the repo, you can do it directly in gitlab). Contributions are always welcome.