FTI Portal Styleguide

Styleguide based on Pattern Lab for FTI portal

This demo page will show all implemented parts of the latest version (master branch) of this package. It creates asset files, style.css and bundle.js, which will be implemented into our portals.

Usage

There are different ways to use the Styleguide:

Link the source - CDN at Google Cloud Storage (GCS)

You can put the following snippet into the head of your HTML document. Use the version (Semver) for production, to have more control.

<link rel="stylesheet" href="https://assets.gcloud.fti-group.com/fti-portal-styleguide/<VERSION>/css/style.css">

Use "latest" for internal test purposes.

<link rel="stylesheet" href="https://assets.gcloud.fti-group.com/fti-portal-styleguide/latest/css/style.css">

Note: Some portals use an individual way to implement the Styleguide. Read their instructions.

Or NPM:

$ npm install @tourstream/fti-portal-styleguide --save

Install

It requires Node 10 or higher.

npm install

Development

Pattern Lab is based on Atomic Design. Start with atoms and work your way up to templates and pages. The SCSS files are component based. Use mixins, functions and placeholders to avoid duplicated code and keep the styles on the components for high readability. Component's own mixins come at the top of each component's file. We code mobile-first.

We handle our Javascript files component based, which will be automatically bundled in one exported bundle file.

Serve and Watch

npm run serve

Build

npm run build

You can find the files styles.css and styles.min.css at ./dist-master/fti-portal-styleguide/latest/css. Take that to test the styles inside your portal locally by replacing the old styles.

CSS Lint (Test)

npm run lint

Debug mode

The Styleguide turns on debug mode per default using a cookie. You can turn on debug mode on your portal by creating a cookie manually with debug=1 or by adding ?debug=1 to your url parameters. Follow the instructions inside the error handling.

Changelog

Changelog

Deployment

Staging

For feature branch deployment use Bamboo (Plan: FTI Styleguide / Styleguide). A branch is available on Bamboo after the branch is created on Github. https://assets.gcloud.fti-group.com/fti-portal-styleguide/staging/<BRANCH-NAME>/index.html

Production

After merge to master on master run

npm version <major|minor|patch|specific Semver version>

It requires ssh connection to Github. It will deploy to NPM and GCS using our Travis configuration.

Usage on your portal

Setup a build with Semver versioning to have control over your styles.

Styling Pattern Lab

Use ./source/css/pattern-scaffolding.css to customize Pattern Lab.

Pattern States

1. inprogress: Element is in in progress on the developer side.
2. inreview: Element is in review on the developer side.
3. undefined: Element is complete and usable, but element on Invision is not defined or isn't set as complete.
4. complete: Element is set as complete in styleguide and in Invision.

Structure and Documentation

SassDoc Documentation

• Document your contribution
• use media queries inside the classes, to increase documentation and readability

npm run docs

Look up the ./docs/ pages.

Debrecated: Visit Confluence to read more about the technical details of the styleguide.