18-ads18-allowed18-area18-arrow-down-base18-baloon-text18-bell18-boxes-plus18-boxes18-calculator18-calendar18-camera18-caretb18-caretl18-caretr18-carett18-chain18-chart-bars18-clock18-code18-compare18-connected-circles18-cross18-dollar18-dot-arrows18-dots18-duplicate18-enter18-exclamationmark18-exit18-eye-striked18-eye18-facebook18-file-exclamationmark18-file-table18-file-text18-file18-folder18-forbidden18-gear18-google18-group18-handshake18-info18-instagram18-label18-linkedin18-locked18-magnifier18-minus18-move18-negative-em18-negative18-neutral18-new18-note-plus18-note18-padlock18-pause18-pencil18-people18-photo-album18-photo18-pin18-plane18-play18-plus18-positive-em18-positive18-puzzle18-questionmark18-quote18-reload18-rotate18-star18-suitcase18-text18-thin-arrow-down18-thin-arrow-right18-thin-arrow-up18-tick18-tower18-trash18-twitter18-unlocked18-user-arrow18-user-card18-user-check18-user-mail18-user-plus18-video-camera18-youtube18-zendesk16-ads16-allowed16-area16-arrow-down-base16-baloon-text16-bell16-boxes-plus16-boxes16-calculator16-calendar16-camera16-caretb16-caretl16-caretr16-carett16-chain16-chart-bars16-clock16-code16-compare16-connected-circles16-cross16-dollar16-dot-arrows16-dots16-duplicate16-enter16-exclamationmark16-exit16-eye-striked16-eye16-facebook16-file-exclamationmark16-file-table16-file-text16-file16-folder16-forbidden16-gear16-google16-group16-handshake16-info16-instagram16-label16-linkedin16-locked16-magnifier16-minus16-move16-negative-em16-negative16-neutral16-new16-note-plus16-note16-padlock16-pause16-pencil16-people16-photo-album16-photo16-pin16-plane16-play16-plus16-positive-em16-positive16-puzzle16-questionmark16-quote16-reload16-rotate16-star16-suitcase16-text16-thin-arrow-down16-thin-arrow-right16-thin-arrow-up16-tick16-tower16-trash16-twitter16-unlocked16-user-arrow16-user-card16-user-check16-user-mail16-user-plus16-video-camera16-youtube16-zendesk12-ads12-allowed12-area12-arrow-down-base12-baloon-text12-bell12-boxes-plus12-boxes12-calculator12-calendar12-camera12-caretb12-caretl12-caretr12-carett12-chain12-chart-bars12-clock12-code12-compare12-connected-circles12-cross12-dollar12-dot-arrows12-dots12-duplicate12-enter12-exclamationmark12-exit12-eye-striked12-eye12-facebook12-file-exclamationmark12-file-table12-file-text12-file12-folder12-forbidden12-gear12-google12-group12-handshake12-info12-instagram12-label12-linkedin12-locked12-magnifier12-minus12-move12-negative-em12-negative12-neutral12-new12-note-plus12-note12-padlock12-pause12-pencil12-people12-photo-album12-photo12-pin12-plane12-play12-plus12-positive-em12-positive12-puzzle12-questionmark12-quote12-reload12-rotate12-star12-suitcase12-text12-thin-arrow-down12-thin-arrow-right12-thin-arrow-up12-tick12-tower12-trash12-twitter12-unlocked12-user-arrow12-user-card12-user-check12-user-mail12-user-plus12-video-camera12-youtube12-zendesk advertiseaudiencebrokenempty-boxfailed-publishinglaptop-crossmobile-crossno-audienceno-resultsno-statisticsno-teamrefine-filterssent-for-publishingstatisticssuccesstask-completedteamwaiting-for-preview arrow-speedometercheck-mark-circlecheck-markclockdollarexclamation-markflagfolder-emptyfolderhatchinfoletter-e-circleletter-i-circlenewpendingquestionmarkvideotape angryhahalikelovesadwow 32-fb32-gp32-ig32-li32-lip32-tw32-yt16-fb16-gp16-ig16-li16-lip16-tw16-yt12-fb12-gp12-ig12-li12-lip12-tw12-yt

BEFORE STARTING ANY CONTRIBUTION TO THE PROJECT, PLEASE MAKE SURE YOU HAVE CAREFULLY READ THE README DOCUMENTATION AND THIS DOCUMENTATION AS WELL AND YOU ARE FAMILIAR ENOUGH WITH THE KOMFO UI PROJECT.

IF YOU HAVE QUESTIONS REGARDING THE FOLLOWING CONTRIBUTING GUIDELINES, OR NOT EXACTLY SURE HOW TO DEAL WITH SOME OF THEM, PLEASE CONTACT THE OWNER OF THE PROJECT FOR HELP.


Introduction

Technologies

Code

This projects is based on the following external projects:

All UI developers must be familiar with those libraries in order to contribute to the project.

Styles

Stylesheets are product of Sass and Compass preprocessors tools.

Scripts

Scripts are written in pure JavaScript with the help of jQuery.

Documentation

All documentation pages are product of Hologram - a Ruby gem that parses comments (written in Markdown syntax) and helps you turn them into a beautiful style guide.

Task Runner

Komfo UI uses Grunt as a task runner and product builder.

Branches

There are two main branches with an infinite lifetime: master and production.

Note: Komfo UI is being developed under a git branching model similar to the one described in a popular article called A successful Git branching model. Check it out for more information.

Master branch

origin/master is the main branch where the source code of HEAD always reflects a state with the latest delivered development changes for the next release.

Production branch

origin/production is the main branch where the source code of HEAD always reflects a production-ready state. When the source code in origin/master branch reaches a stable point and it's ready to be released, all of the changes should be merged into origin/production, and then tagged with a release version. How this happens is described in a Releases section below.

Terms and conditions

Code conventions

Styles

Sass style sheets are being checked by scss-lint every time when there's a change during a development process.

Scripts

Scripts are being checked by JSHint every time when there's a change during a development process.

Commit messages

Komfo UI uses conventional-changelog to write all updates in a CHANGELOG.md file every time a new version is being released. That requires a strict form of commit messages. The preset that is used is angular.

Feature branch

Every new feature must be developed in a so called feature branch. It must be branched off from master at the beginning and when it's done - merged back into it. While branching off is a process that can be done with a single git command, merging back is required to be done with the predefined Grunt task called merge_feature. Once started it will expect to write a commit message that describes the feature. When written, it will do the rest.

Daily pushes

Every contributor must push its daily work to the central repo at the end of the day.

Merge requests

Every contributor must create a merge request when there are updates that needs to go into origin/master.

Installation

Requirements: Komfo UI project depends on Nodejs, npm, Grunt, Ruby and Bundler packages. Make sure you have all of them installed on your local machine before cloning the project.

To setup the development environment of Komfo UI and run the documentation locally, complete the next steps.

Clone the repo

At first make sure you have access to the insight GitLab environment.

If so, you may clone the project from one of the following Git URLs, depending on the secure connection you are going to use.

SSH

$ git clone git@gitlab.komfo.net:ui/komfo-ui.git
    

HTTPS

$ git clone https://gitlab.komfo.net/ui/komfo-ui.git
    

Fetch, Build & Serve

Now that you have the project locally, go to its root directory through the command line and trigger the next command:

$ npm start
    

This will:

  • fetch all dependencies (npm install / bundle install)
  • build the project (grunt build)
  • serve the doc pages in the browser (grunt serve)

Note: If an error occurs for some reason, try to run every single command in the brackets above, one at a time, in the order they are written. If there's still an error, please contact the current DevOps goalkeeper.

Development

Dev (default)

Grunt task: dev

Build

Grunt task: build

Serve

Grunt task: serve

Assets

Fonts

Modify

Add

Icons

Glyphs

Social networks

Reactions

Miscellaneous

Images

Core

Elements

Components

Platform

Releases

Grunt task: prepare_release

Development release

Grunt task: release_snapshot

Production release

Grunt tasks: release_patch, release_minor, release_major