Lessons Learned:
Styling Kendo UI
Alex Gyoshev
@agyoshev
A little context
SASS themes
Summary
Problem
Solution
Lesson
Problem
Solution
Lesson
Problem
Solution
Lesson
Problem:
Use Theme Colors in JS
Case Study:
Styling Charts
How do you encode data in CSS to be read by JS?
In-depth study: Encoding Data in CSS
Modern Solution:
CSS Custom Properties
Great, but... IE
// Encoded in CSS
:root {
--accent-bg: #f11f11;
--border-radius: 2px;
--opacity: 0.2;
}
// Read in JS
const styles = getComputedStyle(document.documentElement);
const accentBg = styles.getPropertyValue('--accent-bg');Solution: JSON-in-CSS
Take that, CSS-in-JS!
// Encoded in CSS
#variable-info::after {
display: none;
content: '{
"accent-bg": "#f11f11",
"border-radius": "2px",
"chart-opacity": 0.2
}';
}
// Read in JS (excuse my jQuery)
const element = $("<div id='variable-info' />").appendTo("body");
const content = window.getComputedStyle(element, '::after').content;
const variables = JSON.parse(JSON.parse(content));Lesson Learned
Aim for a single source of truth
Easy for developers, internally and externally:
"Style charts like all other components"
Problem:
Dependencies
Case Study:
Prune styles for unused components
Possible Solution:
CSS Modules
Great for some use cases, but...
- requires overhaul of older systems
- limits availability of workarounds
CSS
Modules
Solution:
SASS Modules
// grid.scss
@import "button";
@import "dropdown";
// `only-once` mixin outputs content only once
@include only-once('grid') {
.grid {
// styles
}
}
// user code
@import "grid"Lesson Learned
Get inspired from other solutions
...and don't be afraid to build your own
Problem:
Regressions
:(
Solution:
Code Reviews
Let's us be wrong together
Solution:
Custom lint rules
Automated nitpicking
Solution:
Custom lint rules
$foo: 100%;
$bar: 10px;
calc( $foo - $bar )
-> calc( 90px )
calc( #{ $foo } - #{ $bar } )
-> calc( 100% - 10px)
Solution:
Visual Tests
Before
After
Great support in Github/Gitlab
Solution:
Visual Tests
Developer
CI
Reviewer
commits screenshots
gives feedback
commits code
Solution:
Visual Tests
Beneficial side effect:
"blessed" rendering
(platform-agnostic)
Lesson Learned
Use short feedback loops
-CSS can be tested, too
-Automate verification
Lessons Learned
Use a single source of truth
Get inspired by other solutions
Use short feedback loops
CSS is code, too
Same same, but different
Thank you!
Alex Gyoshev
@agyoshev
slides.com/gyoshev/styling-kendo-ui
Lessons Learned: Styling Kendo UI
By Alex Gyoshev
