@akwaba/graphene

Graphene Style Kit

Introduction

The Graphene Style Kit was developed for 3 reasons:

1. To give developers access to re-usable styles, modules, mixins and functions that will help them develop more consistent website experiences.
2. To maintain consistency between sites across the Akwaba ecosystem (akwabasystems.com, 1universityavenue, etc).
3. To support a living styleguide for Akwaba sites, which includes base typographic styles, a uniform color palette, and cool modules that should be used throughout the sites.

The Graphene Style Kit should not:

1. Limit developers to building "templated product sites". Each site should be free to tell its story, in its own way.
2. Limit developers' ability to develop new experiences.
3. Force itself entirely on developers. Modules should be "pick and choose", and customizable. Overhead and over-writing in projects should be avoided.

Usage

// First, add the required version of "@akwaba/graphene" as a dependency to your project. Add the following 
// to your package.json file:
"devDependencies": {
   "@akwaba/graphene": "1.0.0",
   ...
}

// Second, import the toolkit at the top of your main style file (i.e. app.scss)
// Note the "~" at the beginning of the URL; it instructs Webpack to treat the URL as absolute
@import '~@akwaba/graphene/src/scss/core';

// Finally, define all additional CSS declarations and/or imports

Development with Graphene

1. First, add @akwaba/graphene to your project as specified in the Usage section

2. Build your app (this code snippet assumes a production build)

   $ npm install
   $ npm run build

   1. If using Webpack Dev Server, run the following script: npm start

3. Create something cool!