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>
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>
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>
Simple steps explaining How it works.
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>
<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>
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>
<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>
Use for quick summaries and useful information.
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>
Add class .tip-box--info
to highlight some information.
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 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>
You can use ini
, yaml
or xml
coloring.
--- 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>
<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 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>
"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>