Skip to main content
Version: Current

Codestyle

Structure​

Components​

/client/src/components

Views​

Here are all complete elements of the website located, but separated between a full page like the Dashboard or a partials like Topbar or Footer.

/client/src/view

Page views​

Here is the main content stored, like Index or Dashboard.

/client/src/view/pages

Partials views​

Here are all the parts of the website, like the Topbar or Footer.

/client/src/view/partials

Styling​

info

Try to keep and write, clean code as much, as possible.

JavaScript​

  • Avoid external/third-party packages like (underscore, lodash, date-fns, moment or jquery)
  • Function and variables should speak for itself (isReadable, createNewReadableWikiPage())

CSS​

  • When writing own CSS, use CSS-classes which are following BEM or a similar syntax
  • Vue files should be always scoped (if they change properties on a bootstrap class)
  • Use for colors only the CSS custom properties (variables), these are generated in colors.scss

Vue​

When importing other Vue components, always specify .vue extension. This adds support for opening Vue files in VS Code.

  • We try to avoid /*.gif as loading animation, use instead a generic fas fa-spinner fa-spin as alternative.
  • $i18n, $dateFormatter and $url are global functions which are defined in vue.js
  • Avoid long complex code, which could be archived by separating individual components and nest them in one partial.
Good
import Avatar from '@/components/Avatar/Avatar.vue'

console.log($i18n(...))
// or
console.log(this.$i18n(...))
Bad
import Avatar from '@/components/Avatar'
import i18n from '@/helper/i18n.js'

console.log(i18n(...))