@arckinteractive/noah-ui

NoahUI

Vue.js framework for web-artisans brought to you by Arck Interactive.

NoahUi was conceptualized and brought to life by Ismayil Khayredinov

This project is work in progress. Please abstain from using it in production environments until it reaches maturity

We welcome contributions. Tests are incomplete and there are still some components that need work. We have started building out the framework with a number of big ideas and we weren't entirely sure, what would be possible, hence the framework underwent many iterations - tests would have kept us back, so we have incurred this technical debt consciously and will work on rolling in the tests as time allows. This started off as a passion project and we've been working on it in our free time. Given the extracurricular nature of it, please be gentle with criticism: constructive criticism is good, bashing is not acceptable.

Initial Configuration

Project setup

yarn install

Compiles and hot-reloads for development

yarn run dev

Compiles the docs

Build docs for deployment to gh-pages

yarn run build

Build docs for local testing

yarn run build:local

Lints and fixes files

yarn run lint

Run your unit tests

yarn run test:unit

Detailed Installation

yarn add @arckinteractive/noah-ui

Integrate

Noah UI has been built in a way that does not lock you into using our theme and styles. Components have been written without scoped CSS and the element selectors are not hard coded - you can bring in your own favorite CSS framework or customize ours.

Using Noah CSS

To use our styles, simply import them, when you initialize your app:

import Vue from 'vue';
import NoahUI from '@arckinteractive/noah-ui';

import '@arckinteractive/noah-ui/src/styles/fonts.scss';
import '@arckinteractive/noah-ui/src/styles/all.scss';

Vue.use(NoahUI);

Noah UI uses CSS custom properties, which are easy to work with and customize. Take a look at ./src/styles/_root.scss to see the full list of used CSS variables. You can customize any of these variables anywhere in your project's CSS.

/** Override globally **/ 
:root {
    --hsl-danger: 4, 46%, 44%;
}

/** Override in a specific scope **/
.my-red-button {
    --hsl-danger: 4, 46%, 44%;
}

If you are planning to support older browsers, you will need to setup your project to use PostCSS custom properties plugin.

Using your own CSS

Noah UI allows you to use your own CSS framework, by giving you a wide range of control via config object. See ./src/noah.config.js for a full list of components and options. Let's say you are using Bootstrap as your CSS framework:

import Vue from 'vue';
import NoahUI from '@arckinteractive/noah-ui';
import config from '@arckinteractive/noah-ui/src/noah.config.js';

config.components.Button = {
    baseClass: 'btn',
    modifierPrefix: 'btn-',
}

Vue.use(NoahUI, config);

Now your buttons will have the btn btn-* CSS selectors, instead of n-button --*.

Components