Mangolian

A minimal design pattern library.

Introduction

The repository contains the Grana Style Guide, a library of components and styles that serves as a foundation for grana.com. Provides documentation on implementation for developers and designers with the goal of maintaining consistency.

Features

• Typography classes for extending
• Default colours
• Custom UI components
• Grana font iconography

Installation

Bower

Including the style guide into your grana dev environment requires Bower for handling dependencies.

1. Install Bower using npm:

   npm install -g bower

2. In the root project dir, login using your github token:

   bower login -t {TOKEN}

3. Install dependencies:

   bower install

npm

Add the following to your package.json dependencies

  "dependencies": {
    "mangolian-style-guide": "github:GRANA/style-guide"
  }

Project

1. Import Style Guide into the projects main.scss file:

   @import "dialectics/core/dialectics";

2. Include js files in dialectics/core/dialectics/js

Dependencies

• Jquery 1.11.1
• Sass 3.4.22
• Bourbon 4.2.2
• Neat 2.0.0

Sass

We follow modular methodology when writing our css. Please refer to our document on SMACSS

Sass formatting shall follow Thoughtbot's sass guide here.

Documentation

The documentation uses Jekyll static webpage builder hosted on Github pages. Viewing the doc locally requires installation of npm, Jekyll, and Gulp. It is recommended that contributors develop the core style guide using the documentation pages.

Local setup

1. Clone this repository into your directory:

   git clone git@github.com:GRANA/style.guide.git

2. While in the directory, run node package manager to install dependency modules:

  npm install

3. Run gulp to build project:

   gulp jekyll

4. Serve your freshly built project:

   jekyll serve

Alternatively, if you experience ruby gem issues, try

   bundle exec jekyll serve