UI Framework

CSS Vars

Spacing Prototype

• var(--spacing)
• var(--spacing-big)
• var(--spacing-small)

Colors Prototype

• var(--c-{color}-{modifier})

Font Sizes Prototype

• var(--fs-h{1-6})

Grid Prototype

• App Screen mit entsprechenden Sections (evtl. Sidebar?)
• Tech Flexbox

Components

General

• Icon (SVG Wrapper)
• Bild (evtl. Parallax)

Layout

• Menu (responsive)
• MenuToggler

Card

• Card
• CardImage
• CardControls

Formular Prototype and Buttons

• TextInput
• TextArea
• Select
• Radio
• Checkbox
• Button (variationen)

Assets

• Bilder
• Logo / YB Branding
• SVG (Icons)

Charts

• TODO: Chart Lib evaluieren

Getting Started

Installation

This App uses nodeJS (min v. 8.10) and Node Package Manager (min v. 6.9).
If both are installed you can use npm install to install all dependencies.

Build

• npm start: starts the development build process, the file watcher and the DevServer
• npm prod: runs the production build

Serve

$ npm run serve

This will launch a Webpack DevServer on localhost Port 1898 (I hope you know why 😉) and will open the App inside the browser.

localhost SSL

The App can optionally be served over HTTPS on localhost. All you need to do is to add the path to the Certs as an env var:

//.env

SSL_KEY=./../ssl/localhost.key
SSL_CRT=./../ssl/localhost.crt
SSL_PEM=./../ssl/localhost_CA.pem

Workflow

JavaScript / Flow

This App uses es6 syntax and flowJS for static typing.

Code formatting

The Build process uses eslint and stylelint to provide a clean workflow and also prettier is implemented. I'd recommend to use prettier directly inside your IDE.

Testing

There are two commands (npm run eslint and npm run stylelint) that will run the linters. npm run lint will start both.

Git

There is a Pre-Commit Hook (using Husky) that will ensure that only code can be committed that pass the linter.