The Developer's Guide to
Kendo UI Themes

CSS
IS
AWESOME

Outline

  • Themes design goals
  • Themes monorepo
  • Fixing bugs, adding features
  • Changing rendering

Design Goals

Themes work for
all Kendo UI flavors

  • Allows customers to switch / mix frameworks
  • Allows us to reuse front-end efforts:
    CSS fixes, HTML structure, deployment, ThemeBuilder, customization variables
  • Requires careful handling of rendering changes

Design Goals

Easy customization & upgrades

npm update @progress/kendo-theme-default
$accent: #B4D455;
$checkbox-size: 24px;

@import "~@progress/kendo-theme-default/scss/all";
@import "~@progress/kendo-theme-default/scss/grid";
@import "~@progress/kendo-theme-default/scss/scheduler";

Customize colors & sizes

Use only needed styles

Upgrade like any other package

Themes Monorepo

All theme packages
in one git repo

Themes Monorepo

Allows us to:

  • Work across themes at the same time
  • Share code between themes
  • Share infrastructure (build, tests)

Themes Monorepo

<- build scripts
<- contains NPM packages (Lerna convention)
<- @progress/kendo-theme-bootstrap (!)
<- @progress/kendo-theme-default (!)
<- @progress/kendo-theme-material (!)
<- build tasks, SCSS -> CSS
<- surprisingly, this contains tests
<- dimension tests
<- screenshot tests (!)

Structure

Themes Monorepo

Structure

Wait. Tests for CSS?
Yes. Visual tests, manual verification.

Themes Monorepo

How do visual tests work?

Themes Monorepo

Developer

CI

Reviewer

commits screenshots

gives feedback

commits code

(Travis)

How do visual tests work?

Themes Monorepo

<- "blessed" HTML

<- screenshot
<- screenshot
<- screenshot

Files involved

The blessed HTML shows
the agreed upon rendering between Kendo UI flavors

How do visual tests work?

Themes Monorepo

Github review screen, helps reviewers

Fixing bugs,
adding features

Workflow

  1. Create a test, whenever possible
    (e.g. in tests/visual/scheduler.html)
  2. Push the branch to make a "red" screenshot
  3. Destroy the bug
  4. Push the fix, assign reviewer
  5. Reviewer verifies the "green" screenshot
  6. Merge! 🍺

Let's fix a bug!

Workflow

telerik/kendo-themes#247

Let's fix a bug: Verification

Workflow

Demo doesn't show any selection at all.
But at least the classes are in place!

Let's fix a bug: Add a test

Workflow

Where?

tests/visual/scheduler.html

Try it out!

# a quick way to host the folder
npm install -g http-server
http-server

# http://localhost:8080/tests/visual/scheduler.html

Let's fix a bug: Add a test

Workflow

Let's fix a bug: Push the test

Workflow

No screenshot change, since styles don't changed

Let's fix a bug: Destroy the Bug

Workflow

Build a CSS selector that is just right:

  • not too broad (may target other components)
    .k-scheduler .k-state-selected
  • not too specific (enforces structure)
    div.k-scheduler table.k-scheduler-table td.k-state-selected
  • just right 😌
    .k-scheduler-layout td.k-state-selected

Let's fix a bug: Destroy the Bug

Workflow

Which file?

Color => _theme

Let's fix a bug: Destroy the Bug

Workflow

Don't hard-code colors!

.k-scheduler-layout td.k-state-selected {     
    background-color: rgba($selected-bg, .25);
}

Even the wrong variable is better than hard-coding
(it will mostly work in the ThemeBuilder)

If you don't know the color functions, use Cuttle

Let's fix a bug: Destroy the Bug

Workflow

Test other themes at
http://localhost:8080/tests/visual/scheduler.html?bootstrap
http://localhost:8080/tests/visual/scheduler.html?material

Let's fix a bug: Destroy the Bug

Workflow

Let's fix a bug: Check Screenshots

Workflow

Let's fix a bug: Merge!

Workflow

🍻

Changing Rendering

Themes work for
all Kendo UI flavors

Remember this?

Changing Rendering

Reusing themes across suites means that either:

  1. Rendering is changed in all suites at the same time
  2. Different rendering needs to co-exist for a while

 

Option 1 never happens.

Even if it does, customers may upgrade packages without upgrading themes.

Changing Rendering

Solution: feature flags

Changing the grid layout
from display: block
to display: flex

// before
.k-grid {
  display: block;
}

<div class="k-grid"></div>

// after
.k-grid-flex {
  display: flex;
}

<div class="k-grid k-grid-flex"></div>

vS

// before
.k-grid {
  display: block;
}

<div class="k-grid"></div>

// after
.k-grid {
  display: flex;
}

<div class="k-grid"></div>

Changing Rendering

Solution: feature flags

  • More CSS output, but happy customers
  • Might be forgotten - create issue and link it
  • Give plenty of overlap time for co-existence
// refactor when https://github.com/telerik/kendo-themes/issues/298 is done 
.k-notification-group .k-notification-wrap {                                
    padding-right: $notification-padding-x;                                 
}

TANKS!

slides @ slides.com/gyoshev/kendo-themes-dev-guide

guidelines @ telerik/kendo-themes/CONTRIBUTING.md

Made with Slides.com