Giter Club home page Giter Club logo

axiom's Introduction

Axiom - Pattern Library

Build Status npm version

A consumable library of Brandwatch UI & UX patterns.

Installation

yarn add bw-axiom

Features

  • Materials (colors, sizing) to create custom components while following patterns.
  • Components to encapsulate templates, styles and behaviour.
  • Composites for larger reusable multi component solutions.
  • Utilities to apply UX patterns (like date and number formatting).
  • Light and Dark themes at a global level.

Getting Started

Using just the CSS

The React components provide an abstraction of the templates and CSS, which greatly reduces any needed maintenance when CSS classes or the HTML structure to a component changes. They also encapsulate the behaviour of more interactive components, so components that do require Javascript will not work and will require you to plumb it all together.

The compiled CSS file is stored on the Brandwatch Google Cloud Platform CDN or target individual CSS files from the node_module.

http://axiom.bwcom.io/axiom-{THEME}.{VERSION}.min.css

Template and CSS changes are not classed as breaking changes and are not specified in the release notes

Developing in the Style Guide

git clone [email protected]:BrandwatchLtd/axiom.git
cd axiom
yarn install
yarn start

Testing within an application

Npm/yarn link won't work out of the box as the main directory specified in package.json is lib. To populate this directory with your local changes, run yarn build:local. You can then run npm link as normal, and then npm link bw-axiom from your application directory.

axiom's People

Contributors

ahume avatar hhogg avatar lpoulter avatar pmsorhaindo avatar siggysamson avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.