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.
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.
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.
Using npm:
npm install innoq-styleguide --save(-dev)
Using yarn:
yarn add innoq-styleguide (--dev)
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";
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)
There’s a branded Bootstrap 4 theme available here.
The source repository can be found on GitHub.