INNOQ Styleguide

Welcome

This is the official INNOQ style guide. In here, we develop and document all frontend components of our current corporate design. You can see them in use at innoq.com.

Methodologies

When developing our components we try to adhere to Atomic Design. As a consequence, components are organized into

  • 01-pages
  • 02-layouts
  • 03-organisms
  • 04-molecules
  • 05-atoms

We also use BEM syntax for naming of our CSS classes.

Technology

We deeply believe in the web, so all of our components are developed according to the ROCA principles and Progressive Enhancement. There aren’t any React components or Angular monstrosities in here just for the sake of it.

Installation

Using npm:

    npm install innoq-styleguide --save(-dev)

Using yarn:

    yarn add innoq-styleguide (--dev)

Usage

Sass components

You can import the whole slaw of components:

    @import "innoq-styleguide/dist/sass/index";

…or just the stuff you need:

    @import "innoq-styleguide/dist/components/01-atoms/form/button/button";

JavaScript components

Some of our frontend components are enhanced with JavaScript. They are written in ESNext and are based on JavaScript Custom Elements

After installation, you can import and register them:

    import CheckToToggle from 'innoq-styleguide/dist/js/components/05-atoms/togglers/check-to-toggle/check-to-toggle.js'
    customElements.define('check-to-toggle', CheckToToggle)

Bootstrap Theme

There’s a branded Bootstrap 4 theme available here.

Development

The source repository can be found on GitHub.