Komfo UI
Introduction
Komfo UI is the official Komfo User Interface project.
It is split into two separate parts: Core and Platform.
Core
What is it?
Core is the so called UI framework. It is based on the Atomic Design methodology and it's some sort of Komfo's Bootstrap framework. It can be named a design system or a design language as well, but whatever you call it, it's the part of Komfo UI (with it's all scaffolding presets, CSS elements and components, fonts and icons systems) that gives the ability to develop wide range of responsive layouts and fulfill any interface needs.
What it includes?
- A set of scaffolding styles and scripts
- Predefined CSS utility classes
- Rich families of developed CSS elements
- Rich families of developed CSS components
- Fonts
- Glyph icons system
- Other icon packs
- Pack of images
- External libraries (for more info look at the next section "Dependencies")
What it depends on?
These are the external libraries that Core uses:
What's in the box?
When built, Core comes out with the following assets in a dist/komfo-ui directory:
css/komfo-ui.css(bundle of all styles)js/komfo-ui.js(bundle of all scripts)- fonts directory
- icons directory
- images directory
Platform
What is it?
Platform is completely dedicated to the Komfo Platform project. That's the place where the whole user interface of the platform is developed.
What it includes?
- Styles for a predefined custom-tailored markup
- Pack of images
- External libraries (for more info look at the next section "Dependencies")
What it depends on?
These are the external libraries that Platform uses:
What's in the box?
When built, Platform comes out with the following assets in a dist/komfo-ui directory:
css/komfo-platform.css(bundle of all platform styles)js/komfo-platform.js(bundle of all platform scripts)- images directory
Environments
There are two web environments where Komfo UI is being deployed:
- Test: https://web-tier.komfo.net/git/komfo-ui.master
- Production: https://web-tier.komfo.net/git/komfo-ui.production
Test
https://web-tier.komfo.net/git/komfo-ui represents the working copy of the UI documentation. That's the place where all programmers should be looking at when they develop new features and all QA engineers should compare interfaces from to those on Komfo Platform's test environment. These pages shows new UI features and items that are currently under development in order to fulfill any new interface needs for upcoming releases. When everything is done it's being released under a new Komfo UI version and being deployed to the Production platform as well.
Note: web-tier.komfo.net/git/komfo-ui is the same as web-tier.komfo.net/git/komfo-ui.master.
Production
https://ui.komfo.net represents the complete UI documentation for the latest official version release of Komfo UI. In other words: it's the guide reference on what UI content is developed so far. That's the place where all QA engineers should be looking at, when they need to make checks related to some design problems on Komfo Platform's production.
Note: ui.komfo.net redirects to web-tier.komfo.net/git/komfo-ui.production.
Repository
The central git repository is powered by GitLab and it's part of a UI group.
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.
Jenkins CI
There are two Komfo UI build tasks organized in a UI group. The tasks are hooked to the main central branches origin/master and origin/production.
Master
komfo-ui-master is the automated build task for the Test environment of Komfo UI that runs on every push to the origin/master branch.
After the build passes successfully it triggers the dedicated deploy task komfo-ui-master-deploy. Its role is to deploy the documentation pages to web-tier.komfo.net/git/komfo-ui.
Production
komfo-ui-production is the automated build task for the Production environment of Komfo UI that runs on every push to the origin/production branch.
After the build passes successfully it triggers the dedicated deploy task komfo-ui-production-deploy. Its role is to deploy the documentation pages to ui.komfo.net.
Themes
Note: A color theme can be set from the dropdown placed at the upper right area in any documentation page of Komfo UI.
There are five color themes + one graphite look which is the default base when no color theme is selected. The role of those themes is to provide a different color look to any individual section in Komfo Platform. The themes and their roles are listed below.
- Purple - default theme
- Cyclamen - dedicated to Publish
- Green - dedicated to Monitor
- Yellow - dedicated to Advertise
- Blue - dedicated to Measure
Sections
The documentation pages are organized in sections according to the two separated parts of Komfo UI: Core and Platform.
Core docs
Core docs are divided into the following four pages.
Scaffolding
This doc page shows what the essential preparations that comes with the framework are. It describes the scaffolding presets that are some sort of Komfo's insight reset styles.
That includes information on what the general layout, typography, colors and more would look like.
Utilities
Utilities page displays all kind of predefined classes organized in groups by the type of what their function is.
For example, there are examples of classes for handling text alignment, or spaces between objects, or different states of visibility etc.
Elements
This doc page lists a complete collection of all developed UI elements (atoms, according to Atomic Design).
Applied to web interfaces, Elements are our HTML tags, such as a form label, an input or a button. They can also be custom developed items, like badges, loaders, placeholders, tags, thumbnails and more.
Components
This doc page lists a complete collection of all developed UI components (molecules, according to Atomic Design).
Components are groups of elements bonded together and are the smallest fundamental units of a compound. These components take on their own properties and serve as the backbone of our design systems.
For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.
Building up to components from elements encourages a “do one thing and do it well” mentality. While components can be complex, as a rule of thumb they are relatively simple combinations of elements built for reuse.
Platform docs
Platform docs are divided into the following nine pages.
Layouts
This doc page shows collection of all types of possibly needed layouts in Komfo Platform. That includes examples of the grid system, column layouts and more.
Structures
Structures page displays some sort of components, specifically developed for the needs of Komfo Platform. That includes examples of Pagebar, Mainbar, Panels and more.
Modules
This doc page displays variety of use case examples of modules that are commonly used everywhere in Komfo Platform.
Publish
This doc page displays variety of use case examples of modules that are specifically developed for the Publish section in Komfo Platform.
Monitor
This doc page displays variety of use case examples of modules that are specifically developed for the Monitor section in Komfo Platform.
Advertise
This doc page displays variety of use case examples of modules that are specifically developed for the Advertise section in Komfo Platform.
Measure
This doc page displays variety of use case examples of modules that are specifically developed for the Measure section in Komfo Platform.
System
This doc page shows interfaces of Komfo Platform system modules like Authentication box and Reactivate channels.
Releases
Komfo UI goes with the classical SemVer system of tagging releases with a version. Creating versions is managed by the Grunt task grunt-bump, powered by npm.
Snapshot version
Every set of changes that is pushed to origin/master during a development process represents a prerelease, marked with a so called snapshot version.
The purpose of having snapshot versions is the ability of programmers to use Komfo UI as a dev dependency in Komfo Platform, by pointing to the latest released version to origin/master which includes UI changes, related to user stories that are currently under development.
Production version
Every official set of completed fixes and features pushed to origin/production represents a production release, marked with a certain semantic version, depending on the size and the type of changes included. According to SemVer, releases may vary between major, minor and patch.
Contributors
Martin Metodiev | owner
Nickolay Markov | master
Veselin Velichkov | master