@mem4/pattern-lib v0.0.3

Memberhip4 Pattern Lib / Components

A current preview (based on tag "preview") is available at http://167.172.182.63:8093/

Introduction / Guidlines

Atomic Design

Components must be structured according to the Atomic Design Methodology

Coding style guidlines for vue components

Vue Components should adhear to the VUEJS style guidlines

CSS class nameing

Class names should be named / organized according to the BEM Methodology

Component naming

To avoid conflicts with html elements or external vue components all component names must be prefixed with "M4". Example: M4Button

Used tools

• vue-cli - Standard Tooling for Vue.js Development
• vue-styleguidist - Documentation generation

Building styleguid

Dev

yarn styleguide

yarn styleguide:watch

Prod

yarn styleguide:build

Building library

yarn build

Format code on save with prettier

Guide for php/webstrom

Use Package in a Project with yarn/npm link

https://medium.com/@the1mills/how-to-test-your-npm-module-without-publishing-it-every-5-minutes-1c4cb4b369be

Run this in mem4-patter-lib and follow instructions:

yarn link

add "mem4-patter-lib": "latest" to dependencies in you package.json file.

Attention: Yarn / Npm tries to find the package in their registries, that's why you have to remove "mem4-patter-lib" form the package.json before you run yarn add and yarn install This can be fixed if by publishing "mem4-patter-lib" to npm or a private npm repository.

Import of a component:

import { M4Button } from 'mem4-pattern-lib'

SASS Import:

@import "node_modules/mem4-pattern-lib/src/index";