Real-world component libraries at scale

Real-world component
libraries at scale
ngVikings 2019
@ddprrt @Ka_TriN_F

Slide about usKatrin Freihofner 
@Ka_TriN_F
barista.dynatrace.com

Slide about usStefan Baumgartner 
@ddprrt
scriptconf.org

Barista Design System
Angular components

A collection of reusable components,
patterns, and styles.

Single source of truth
…in code

The appearance of a component is
coupled to its behaviour and can’t be
separated.

Okay…
Let’s look at Material

Component infrastructure and
Material Design components for Angular
https://github.com/angular/components

Straightforward APIs that don't confuse
developers
https://github.com/angular/components

$white: #ffffff;
$turquoise-100: #e1f7f9;
$turquoise-200: #aeebf0;
$turquoise-300: #74dee6;
$turquoise-400: #4fd5e0;
$turquoise-500: #00b9cc;
$turquoise-600: #00a1b2;
$turquoise-700: #00848e;
$turquoise-800: #006d75;
$turquoise-900: #005559;
$green-100: #e8f9dc;
$green-200: #d2efbe;
$green-300: #bee5a3;
$green-400: #9cd575;
$green-500: #7dc540;
$green-600: #5ead35;
$green-700: #3f962a;
$green-800: #1f7e1e;
$green-900: #006613;
$blue-100: #e0f4fc;
$blue-200: #b4e5f9;
$blue-300: #74cff7;
$blue-400: #2ab6f4;
$blue-500: #14a8f5;
$blue-600: #008cdb;

900: $yellow-900,
),
'shamrockgreen': (
100: $shamrockgreen-100,
),
'gray': (
100: $gray-100,
200: $gray-200,
300: $gray-300,
400: $gray-400,
500: $gray-500,
600: $gray-600,
700: $gray-700,
800: $gray-800,
900: $gray-900,
),
);
@function get-color($color, $shade) {
@return map-get(map-get($full-color-palette, $color), $shade);
}

Work in any context. Any environment.

Layout defines structure
Components are fluid

width: auto;
max-width: 100%;
text-overflow: ellipsis;
Intrinsic width
constrained by layout

width: 100%;
Set width
constrained by layout

.dt-button {
@include main-font(30px);
box-sizing: border-box;
position: relative;
// Reset browser <button> styles.
@include dt-interactive-reset();
// Make anchors render like buttons.
display: inline-block;
white-space: nowrap;
text-decoration: none;
text-align: center;
overflow: hidden;
vertical-align: middle;
height: 32px;
border-style: solid;
border-radius: 3px;
border-width: 1px;
padding-top: 0;
padding-bottom: 0;
padding-left: 15px;
padding-right: 15px;
line-height: -moz-block-height;
background: transparent;
}

.dt-button {
box-sizing: border-box;
position: relative;
// Reset browser <button> styles.
// Make anchors render like buttons.
display: inline-block;
white-space: nowrap;
text-decoration: none;
text-align: center;
overflow: hidden;
vertical-align: middle;
height: 32px;
border-style: solid;
border-radius: 3px;
border-width: 1px;
padding-top: 0;
padding-bottom: 0;
padding-left: 15px;
padding-right: 15px;
line-height: -moz-block-height;
background: transparent;
}
@include main-font(30px);
@include dt-interactive-reset();

Re-define inheritable properties per
component

<dt-card headline=“It is beautiful”>
</dt-card>

</dt-card>
Cool! Can you make it bold?

</dt-card>
.headline {
font-weight: bold
}

</dt-card>
.headline {
font-weight: bold
}
No, I meant: Can you
make  
it bold?

<dt-card>
<dt-headline>
<strong>It is bold</strong>
</dt-headline>
</dt-card>
<div class="dt-card-header">
<div class="dt-card-heading">
<ng-content select=“dt-headline"></ng-content>
</div>
<ng-content></ng-content>
</div>

Content projection is your friend

It's "just" a string - Learnings from building a component library

Barista
Design System
UX + design Angular
component lib

Design vs. Code-first
…it depends

Behaviour and style go together

Katrin Freihofner 
@Ka_TriN_F
Stefan Baumgartner 
@ddprrt
Office hours 
14:15

Real-world component libraries at scale

More Related Content

Similar to Real-world component libraries at scale

More from Stefan Baumgartner

Recently uploaded

Real-world component libraries at scale