• Docs

Getting Started

  1. Introduction

CLI

  1. General

    1. Installation
    2. Commands
    3. Scaffold a new project
    4. Generate a new component
    5. Install a component
  2. Generators

    1. Veams Generator

Framework

  1. Base

    1. Base Class
    2. Component Class
    3. Core
    4. Helpers
  2. Plugins

    1. Overview
    2. Logger
    3. Modules
    4. Media Query Handler
    5. Store
    6. Templater
    7. Vent
  3. Other Packages

    1. Http-Service

Methodology

  1. General

    1. Overview
  2. Instruments

    1. Regions
    2. Components
    3. Utilities
  3. Classes and Markup

    1. Introduction
    2. Global Styling
    3. Context Styling
    4. Modifier Styling
  4. JavaScript

    1. Modules
    2. Items
    3. Options
    4. Bringing It All Together

Core of VEAMS framework

VEAMS provides a simple but extendable frontend framework. When you have scaffolded the project with the @veams/cli, it will be automatically integrated into your project.

When you have scaffolded the project with the CLI you can skip the Installation and Usage section!

Table of Content

  1. Typical Use Cases for Veams
  2. Installation
  3. Basic Usage
  4. Advanced Usage
  5. Core
    • Options
    • Api
  6. Helpers
  7. Plugins
    • Usage of Plugins
    • Creation of Plugins
    • Available Plugins
  8. Common Classes & Services

Installation without @veams/cli

To install VEAMS as framework you have to work with the core library.

NPM

npm install @veams/core --save

Yarn

yarn add @veams/core 

Usage

Basic Usage

To use VEAMS as framework just install and import the library:

JavaScript

import Veams from '@veams/core';

This imports a starter kit which initialize the core.

SCSS

// Reset (veams-reset or veams-normalize)
@import "./node_modules/veams/scss/veams-reset";
@import "./node_modules/veams/scss/veams";

That’s it. The framework is integrated.

Advanced Usage

You can also create your own instance of the core by using the Core class.

import Core from '@veams/core/lib/core';

let app = new Core({
    namespace: 'App',
    addToGlobal: false
});

VEAMS Core

The core of VEAMS is nothing more than a simple object (Veams). In general VEAMS comes with some empty and predefined objects and a basic API.

Veams Core Options

  • namespace {String} ['Veams'] - Add your custom namespace.
  • addToGlobal {Boolean} [false] - Add your previously defined namespace to the global window object.

VEAMS Core API

Veams.addHelper(‘name’, helperFunction)

  • @param {String} name - Helper name which will be used in the registration process.
  • @param {Function} helperFunction - The helper function.

The method allows the registration of provided or custom helpers.

Veams.use(plugin)

  • @param {Object} plugin - Plugin object which extends the VEAMS object.

This method provides the possibility to register a plugin, see section Creation of plugins.

Veams Core Object

Veams.EVENTS {Object}

The events object can be used to communicate between modules. It can be extended with further custom events. Just see @veams/plugin-vent.

Veams.base.version {String}

Display the current VEAMS version.

Veams.dectections {Object}

The detections object contains the current width and height, as well as if you are on a touch device or not.

The detections object will be updated when you use @veams/plugin-media-query-handler.

Veams.helpers {Object}

VEAMS has some helpers which you can use. But you should use @veams/helpers for usage.

Veams.Plugins {Object}

All named plugins will be saved in this object. In the beginning it is empty.

If you've spotted a typo or a mistake, or wish to add something on, you could write about this on Github | Gitter | © Made in Berlin with love