Diagram

Dimple diagram to visualize the basic flow.

Commit

Measure

Report

<div class="diagram">
    <span class="arrow arrow--top"></span>
    <span class="arrow arrow--left"></span>
    <span class="arrow arrow--right"></span>
    <div class="clearfix">
        <div class="diagram__item diagram__item--left">
            <span class="diagram__icon icon-code"></span>
            <p class="diagram__text">Commit</p>
        </div>
        <div class="diagram__item diagram__item--right">
            <span class="diagram__icon icon-cogs"></span>
            <p class="diagram__text">Measure</p>
        </div>
    </div>
    <div class="diagram__item">
        <span class="diagram__icon icon-tasks"></span>
        <p class="diagram__text">Report</p>
    </div>
</div>

Features

List of supported features with icons.

Analyze different branches

No installation required

Project statistics

Code duplicity detection

Fully configurable

Detailed reports

<div class="features">
    <div class="feature">
        <span class="feature__icon icon-code-branch"></span>
        <p class="feature__text">Analyze different branches</p>
    </div>
    <div class="feature">
        <span class="feature__icon icon-cube"></span>
        <p class="feature__text">No installation required</p>
    </div>
    <div class="feature">
        <span class="feature__icon icon-tachometer-alt"></span>
        <p class="feature__text">Project statistics</p>
    </div>
    <div class="feature">
        <span class="feature__icon icon-copy"></span>
        <p class="feature__text">Code duplicity detection</p>
    </div>
    <div class="feature">
        <span class="feature__icon icon-sliders-v"></span>
        <p class="feature__text">Fully configurable</p>
    </div>
    <div class="feature">
        <span class="feature__icon icon-tasks"></span>
        <p class="feature__text">Detailed reports</p>
    </div>
</div>

Platforms

We are continuously working on supporting more platforms and languages. Use class .platform__logo--wip to put icon in shadow.

<div class="platforms">
    <div class="platform">
        <span class="platform__logo icon--js" title="JavaScript"></span>
    </div>
    <div class="platform">
        <span class="platform__logo icon--sass" title="Sass"></span>
    </div>
    <div class="platform">
        <span class="platform__logo icon--php" title="PHP"></span>
    </div>
    <div class="platform">
        <span class="platform__logo icon--typescript" title="TypeScript"></span>
    </div>
    <div class="platform">
        <span class="platform__logo icon--ruby" title="Ruby"></span>
    </div>
    <div class="platform">
        <span class="platform__logo icon--python platform__logo--wip" title="Python"></span>
    </div>
    <div class="platform">
        <span class="platform__logo icon--html5 platform__logo--wip" title="HTML 5"></span>
    </div>
    <div class="platform">
        <span class="platform__logo icon--css3 platform__logo--wip" title="CSS 3"></span>
    </div>
    <div class="platform">
        <span class="platform__logo icon--less platform__logo--wip" title="Less"></span>
    </div>
    <div class="platform">
        <span class="platform__logo icon--java platform__logo--wip" title="Java"></span>
    </div>
    <div class="platform">
        <span class="platform__logo icon--swift platform__logo--wip" title="Swift"></span>
    </div>
</div>

Tutorial

Simple steps explaining How it works.

Connect your Git repository: Setup CodeFlow to track every code change in your source control. It will take you only a few seconds.

<dl class="tutorial">
  <dt class="tutorial__title">Connect your Git repository</dt>
  <dd class="tutorial__content">
    <span class="tutorial__icon icon-git"></span>
    <p>Setup <strong>CodeFlow</strong> to track every code change in your source control.
      It will take you only a <strong>few seconds</strong>.</p>
  </dd>
</dl>

Menu Toggler

<a class="menu__toggler" href="#">
  <span class="toggler__icon"></span>
</a>

Base

<ul class="menu">
    <li class="menu__item"><a href="#">Get started</a></li>
    <li class="menu__item"><a href="#">Platforms</a></li>
    <li class="menu__item"><a href="#">Principle</a></li>
    <li class="menu__item"><a href="#">Features</a></li>
</ul>

Horizontal

Main menu in page header. It is still vertical on mobile.

<ul class="menu menu--horizontal">
    <li class="menu__item"><a href="#">Get started</a></li>
    <li class="menu__item"><a href="#">Platforms</a></li>
    <li class="menu__item"><a href="#">Principle</a></li>
    <li class="menu__item"><a href="#">Features</a></li>
</ul>

Vertical

<dl class="menu menu--vertical">
    <dt class="menu__item">
        <a href="#">Getting Started</a>
    </dt>
    <dt class="menu__item">
        <a href="#">Supported Languages</a>
    </dt>
    <dt class="menu__item">
        <a href="#">Security</a>
    </dt>
</dl>

Tip Box

Use for quick summaries and useful information.

Basic

CodeFlow is future-proof

As you add a multilingual project to CodeFlow we will analyse all source files that we support and produce a joint code quality report. As we keep adding support for more and more technologies you will start seeing more data about your project.

<div class="tip-box">
    <h3 class="tip-box__heading">CodeFlow is future-proof</h3>
    <p class="tip-box__content">
        As you add a multilingual project to CodeFlow we will analyse all source files that we support
        and produce a joint code quality report. As we keep adding support for more and more technologies
        you will start seeing more data about your project.
    </p>
</div>

Info

Add class .tip-box--info to highlight some information.

CodeFlow is future-proof

<div class="tip-box tip-box--info">
    <h3 class="tip-box__heading">CodeFlow is future-proof</h3>
    <p class="tip-box__content">
        As you add a multilingual project to CodeFlow we will analyse all source files that we support
        and produce a joint code quality report. As we keep adding support for more and more technologies
        you will start seeing more data about your project.
    </p>
</div>

Code Block

You can use yaml or xml coloring.

  .eslintrc.yml
  ---
envs:
  - browser
  - mocha
extends:
  - "eslint:recommended"
ignorePattern:
  - "vendor/*"
rules:
  brace-style:
    - warn
    - 1tbs
  camelcase: warn
  comma-dangle:
    - warn
    - always-multiline
  comma-style:
    - error
    - last
  complexity: error
  curly: warn
  eol-last:
    - error
    - always
  id-length: error
  max-lines: error
  max-params:
    - error
    - 4
  no-duplicate-imports: error
  no-eq-null: error
  no-eval: error
  no-implied-eval: error
  no-invalid-this: error
  no-shadow: error
  no-undefined: error
  no-warning-comments:
    - warn
    - location: anywhere
      terms:
        - todo
        - fixme
  prefer-promise-reject-errors: error
  semi: error

<div class="code-block">
  <h3 class="code-block__heading">.eslintrc.yml</h3>
  <pre class="code-block__code yaml">
---
<span class="yaml__key">envs</span>:
  - browser
  - mocha
<span class="yaml__key">extends</span>:
  - <span class="yaml__string">"eslint:recommended"</span>
<span class="yaml__key">ignorePattern</span>:
  - <span class="yaml__string">"vendor/*"</span>
<span class="yaml__key">rules</span>:
  <span class="yaml__key">brace-style</span>:
    - warn
    - 1tbs
  <span class="yaml__key">camelcase</span>: warn
  <span class="yaml__key">comma-dangle</span>:
    - warn
    - always-multiline
  <span class="yaml__key">comma-style</span>:
    - error
    - last
  <span class="yaml__key">complexity</span>: error
  <span class="yaml__key">curly</span>: warn
  <span class="yaml__key">eol-last</span>:
    - error
    - always
  <span class="yaml__key">id-length</span>: error
  <span class="yaml__key">max-lines</span>: error
  <span class="yaml__key">max-params</span>:
    - error
    - <span class="yaml__number">4</span>
  <span class="yaml__key">no-duplicate-imports</span>: error
  <span class="yaml__key">no-eq-null</span>: error
  <span class="yaml__key">no-eval</span>: error
  <span class="yaml__key">no-implied-eval</span>: error
  <span class="yaml__key">no-invalid-this</span>: error
  <span class="yaml__key">no-shadow</span>: error
  <span class="yaml__key">no-undefined</span>: error
  <span class="yaml__key">no-warning-comments</span>:
    - warn
    - <span class="yaml__key">location</span>: anywhere
      <span class="yaml__key">terms</span>:
        - todo
        - fixme
  <span class="yaml__key">prefer-promise-reject-errors</span>: error
  <span class="yaml__key">semi</span>: error</pre>
</div>

Breadcrumbs

Basic

<ol class="breadcrumb" aria-label="breadcrumb">
  <li class="breadcrumb-item"><a href="#">CodeFlow</a></li>
  <li class="breadcrumb-item"><a href="#">Docs</a></li>
  <li class="breadcrumb-item active" aria-current="page">Getting started</li>
</ol>

Light

Light breadcrumbs for documentation.

<ol class="breadcrumb breadcrumb--light" aria-label="breadcrumb">
  <li class="breadcrumb-item"><a href="#">CodeFlow</a></li>
  <li class="breadcrumb-item"><a href="#">Docs</a></li>
  <li class="breadcrumb-item active" aria-current="page">Getting started</li>
</ol>

References

"Chytrá myšlenka MSK" logo and text is adjusting according to the ideal space in the page.

The project is supported by "Chystrá Myšlenka MSK" program, implemented by the Hub for Change and financially supported by the Moravian-Silesian Region.

<div class="references">
  <div class="supported">
    <div class="supported__image-box">
      <img class="img-fluid" alt="Chytrá Myšlenka MSK"
           src="../images/myslenka.png"
           srcset="../images/myslenka.png 1x,
                   ../images/myslenka@2x.png 2x,
                   ../images/myslenka@3x.png 3x">
    </div>
    <p class="supported__text">
      The project is supported by "Chystrá Myšlenka MSK" program,
      implemented by the Hub for Change and financially supported by the Moravian-Silesian Region.
    </p>
  </div>
</div>