KERN UX Cheatsheet

Zielgruppe: Menschen, die schon HMTL können und nur schnell wissen wollen, welche Klasse wohin gehört.

Zur Verwendung mit dem Stylesheet aus dem KERN - Plain-CSS-HTML-Kit.

Sortiert nach Basics first und am Ende die größeren zusammengesetzten Komponenten.

Read the source

Stylesheet kern.css

Design Tokens am Ende der Datei

Breakpoints

xs: bis 576px
sm: ab 576px
md: ab 768px
lg: ab 992px
xl: ab 1200px
xxl: ab 1600px

Utils

Screenreader only

kern-sr-only
kern-sr-only-mobile (nur bis 767px)

Grid

Code Doku

12-Spalten-Grid
kern-container, kern-row, kern-col

Container

kern-container wird maximal 1600px breit
kern-container-fluid hat keine Begrenzung der Breite

Breite (kern-col)

kern-col- + Breakpoint + 1 - 12, z.B. kern-col-sm-8

Offset (kern-col)

kern-col- + Breakpoint + offset- + 1 - 12, z.B. kern-col-sm-offset-2

Vertikale Ausrichtung (kern-row)

oben: kern-align-items-start
mittig: kern-align-items-center
unten: kern-align-items-end

Horizontale Ausrichtung (kern-row)

links: kern-justify-content-start
mittig: kern-justify-content-center
rechts: kern-justify-content-end

gleichmäßge Verteilung

gleicher Abstand um jede Spalte: kern-justify-content-around
maximaler Abstand zwischen den Spalten: kern-justify-content-between
gleicher Abstand zwischen und um jede Spalte: kern-justify-content-evenly

Ausrichtung überschreiben (kern-col)

Vertikale Ausrichtung

oben: kern-align-self-start
mittig: kern-align-self-center
unten: kern-align-self-end

Typografisches

Klasse	Beispiel
kern-heading-display	Lorem ipsum
kern-heading-x-large	Lorem ipsum
kern-heading-large	Lorem ipsum
kern-heading-medium	Lorem ipsum
kern-heading-small	Lorem ipsum
kern-title	Lorem ipsum
kern-title kern-title--large	Lorem ipsum
kern-title kern-title--small	Lorem ipsum
kern-preline	Lorem ipsum
kern-preline kern-preline--large	Lorem ipsum
kern-preline kern-preline--small	Lorem ipsum
kern-subline	Lorem ipsum
kern-subline kern-subline--large	Lorem ipsum
kern-subline kern-subline--small	Lorem ipsum
kern-label	Lorem ipsum
kern-label kern-label--large	Lorem ipsum
kern-label kern-label--small	Lorem ipsum
kern-body	Lorem ipsum
kern-body kern-body--large	Lorem ipsum
kern-body kern-body--small	Lorem ipsum
kern-body kern-body--bold	Lorem ipsum
kern-body kern-body--muted	Lorem ipsum

Icons

span element
Basisklasse kern-icon
aria-hidden="true" hinzufügen
Beispiel: <span class="kern-icon kern-icon--arrow-forward kern-icon--small" aria-hidden="true"></span>

Größe

Klasse(n)	Beispiel
kern-icon
kern-icon kern-icon--x-large
kern-icon kern-icon--large
kern-icon kern-icon--small

Motiv

im KERN Stylesheet enthalten

kern-icon--home
kern-icon--arrow-up
kern-icon--arrow-down
kern-icon--arrow-forward
kern-icon--arrow-back
kern-icon--info
kern-icon--success
kern-icon--warning
kern-icon--danger
kern-icon--open-in-new
kern-icon--download
kern-icon--logout
kern-icon--checklist
kern-icon--mail
kern-icon--edit
kern-icon--sign-language
kern-icon--easy-language
kern-icon--autorenew
kern-icon--add
kern-icon--close
kern-icon--delete
kern-icon--search
kern-icon--question-mark
kern-icon--more-vert
kern-icon--content-copy
kern-icon--visibility
kern-icon--visibility-off
kern-icon--check
kern-icon--drive-folder-upload
kern-icon--chevron-left
kern-icon--chevron-right
kern-icon--keyboard-double-arrow-left
kern-icon--keyboard-double-arrow-right

weitere Material UI Icons

Checkbox & Radio `<input type=checkbox>`, `<input type=radio>`

wrapper div: kern-form-check
checkbox: kern-form-check__checkbox
radio: kern-form-check__radio

Checkbox

Radio

Form Inputs `<Input>`, `<textarea>`

wrapper div: kern-form-input

Fehler

kern-form-input kern-form-input--error

Text, Tel, Number, Password, File, E-Mail, Url, Textarea

input: kern-form-input__input

Fehler

kern-form-input__input kern-form-input__input--error

Select `<select>`

weiterer wrapper um das select-Element kern-form-input__select-wrapper
select: kern-form-input__select

Fehler

kern-form-input__select kern-form-input__select--error

Date

mehrere kurze Textfelder in einem Fieldset
2 Zeichen: kern-form-input__input kern-form-input__input--width-2
4 Zeichen: kern-form-input__input kern-form-input__input--width-4

Error message

kern-error

Number

kern-number

Button `<button>`, `<a>`

Mit button oder a oder z.B. react-router's Link kombinieren.

den Text mit einem <span class="kern-label"></span> umschließen
Icons davor oder danach einfügen

Varianten

kern-btn kern-btn--primary
kern-btn kern-btn--secondary
kern-btn kern-btn--tertiary

100% Breite / Block

kern-btn--block

Link `<a>`

Basisklasse: kern-link
Icons vor oder nach dem Text einfügen

small

kern-link kern-link--small

Fieldset `<fieldset>` + `<legend>`

kern-fieldset auf das fieldset-Element
für das legend-Element siehe Labels
der Inhalt unterhalb der legend wird in ein div mit der Klasse kern-fieldset__body gesetzt

Body

kern-fieldset__body: Inhalte untereinander
kern-fieldset__body kern-fieldset__body--horizontal: Inhalte nebeneinander

Fehler

kern-fieldset kern-fieldset--error

Table `<table>`

normale HTML-Tabellenstruktur, Elemente bekommen Klassen:
table: kern-table
thead: kern-table__head
tbody: kern-table__body
tfoot: kern-table__footer
tr: kern-table__row
th: kern-table__header
td: kern-table__cell

Varianten

gestreift: kern-table kern-table--striped
klein: kern-table kern-table--small

numerische Felder

th: kern_table__header kern_table__header--numeric
td: kern_table__cell kern_table__cell--numeric

Überschrift

<caption class="kern-title">Überschrift</caption>

Divider `<hr>`

nur visuell

<hr class="kern-divider" aria-hidden="true" />

mit inhaltlicher Bedeutung (vom Screenreader vorgelesen)

<hr class="kern-divider" />

Description List `<dl>`

<dl class="kern-description-list">
  <div class="kern-description-list-item">
    <dt class="kern-description-list-item__key">KEY</dt>
    <dd class="kern-description-list-item__value">VALUE</dd>
  </div>
</dl>

Column-Variante: kern-description-list kern-description-list--col

Accordion `<details>` + `<summary>`

details: kern-accordion
summary: kern-accordion__header
innerhalb des details unterhalb des summary-Elements ein Element mit der Klasse kern-accordion__body
in die summary kommt ein <span class="kern-title">...</span>

mehrere Einträge

die details-Elemente mit einem <div class="kern-accordion-group">...</div> umschließen

Progress `<progress>`

<div class="kern-progress">
<label class="kern-label" for="progress1">Schritt 2 von 5</label> 
<progress id="progress1" value="2" max="5"></progress>
</div>

label kann auch unter dem progress stehen oder ganz weggelassen werden

Dialog `<dialog>`

dialog-HTML-Element

<dialog id="modal1" class="kern-dialog" aria-labelledby="modal1_heading" open>
    <header class="kern-dialog__header">
      <h2 class="kern-title kern-title--large" id="modal1_heading">Frage?</h2>
      <button class="kern-btn kern-btn--tertiary">
        <span class="kern-icon kern-icon--close" aria-hidden="true"></span>
        <span class="kern-sr-only">Schließen</span>
      </button>
    </header>

    <section class="kern-dialog__body">
        ... z.B. Fließtext ...
    </section>

    <footer class="kern-dialog__footer">
        ... z.B. Buttons ...
    </footer>
</dialog>

Loader

<div class="kern-loader kern-loader--visible" role="status">
    <span class="kern-sr-only">Wird geladen...</span>
</div>

Alert

<div class="kern-alert kern-alert--info" role="alert">
    <div class="kern-alert__header">
      <span class="kern-icon kern-icon--info" aria-hidden="true"></span>
      <span class="kern-title">Information</span>  
    </div>

    <div class="kern-alert__body">
      <p class="kern-body">Die Beschreibung liefert mehr Kontext und sollte auch Handlungsoptionen aufzeigen, falls nötig.</p>
      <a href="#" class="kern-link">
        <span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
        Linktext
      </a>
    </div>
</div>

kern-alert__body ist optional

Varianten

info
success
warning
danger

Badge

<span class="kern-badge kern-badge--info">
    <span class="kern-icon kern-icon--info" aria-hidden="true"></span>
    <span class="kern-label kern-label--small">Information</span>
</span>

icon ist optional

Varianten

info
success
warning
danger

Kopfzeile

<div class="kern-kopfzeile">
<div class="kern-container">
  <div class="kern-kopfzeile__content">
    <span class="kern-kopfzeile__flagge" aria-hidden="true">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 16">
        <path fill="#000" d="M0 .5h24v5.333H0z" />
        <path fill="red" d="M0 5.833h24v5.333H0z" />
        <path fill="#FACA2C" d="M0 11.167h24V16.5H0z" />
      </svg>
    </span>
    <span class="kern-kopfzeile__label">
      Offizielle Website – Bundesrepublik Deutschland
    </span>
  </div>
</div>
</div>

Fluide? Dann kern-container gegen kern-container-fluid austauschen

Card

Code Doku

Layout-Komponente in verschiedenen visuellen Varianten und Größen

Beispiel:

<article class="kern-card">
  <div class="kern-card__media">
    <img src="/img/kern-img-media.png" alt="ALT Text">
  </div>

  <div class="kern-card__container">
    <header class="kern-card__header">
      <p class="kern-preline">Vorzeile</p>
      <h2 class="kern-title">Default</h2>
      <h3 class="kern-subline">Unterzeile</h3>
    </header>

    <section class="kern-card__body">
      <p class="kern-body">Hier werden soviele Informationen zur Verfügung gestellt, wie benötigt und nicht mehr. Ein Maximum von 150 characters empfohlen.</p>
    </section>

    <footer class="kern-card__footer">
      <button class="kern-btn kern-btn--primary">
        <span class="kern-label">Primäraktion</span>
      </button>
      <button class="kern-btn kern-btn--secondary">
        <span class="kern-label">Aktion</span>
      </button>
    </footer>
  </div>
</article>

Summary

Doku

Zusammenfassung von Formulareingaben: Nummerierter Titel + Description List + Bearbeiten-Button

<div class="kern-summary">
  <div class="kern-summary__header">
    <span class="kern-number">1</span>
    <h3 class="kern-title kern-title--small" id="title">
	  Angaben zur Person
    </h3>
  </div>

  <div class="kern-summary__body">
    <dl class="kern-description-list">
      ... Description List ...
    </dl>

    <div class="kern-summary__actions">
      <a href="#" class="kern-link" aria-describedby="title">
        <span class="kern-icon kern-icon--edit" aria-hidden="true"></span>
        Bearbeiten
      </a>
    </div>
  </div>
</div>

Task List

Doku

Aufgabenliste mit Status: Nummer + Titel + Badge

<div class="kern-task-list">
<div class="kern-task-list__header">
  <h2 class="kern-heading-medium">Persönliche Daten</h2>
</div>

<ul class="kern-task-list__list">
<li class="kern-task-list__item">
	<span class="kern-number">1</span>
	<div class="kern-task-list__title" id="task1-title">
		<a href="#" class="kern-link kern-link--stretched" aria-describedby="task1-status">
			Angaben zur Person machen
		</a>
		<div class="kern-task-list__status" id="task1-status">
            BADGE
		</div>
	</div>
</li>
</ul>
</div>

Tabs

noch nicht veröffentlicht

Tokens

Beispiel:

als CSS Variable: border-radius: var(--kern-metric-border-radius-default);
mit Tailwind: <div class="rounded-kern-default">

CSS	Tailwind	Modifier	Wert
--kern-typography-font-family-fira-	font-kern-	sans	Fira Sans
--kern-typography-font-family-fira-		mono	Fira Mono
--kern-typography-font-family-		default	Fira Sans
--kern-font-size-	text-kern-	12	12px
		16	16px
		18	18px
		20	20px
		21	21px
		24	24px
		26	26px
		32	32px
		40	40px
		48	48px
		56	56px
		72	72px
		80	80px
--kern-typography-font-size-static- & --kern-typography-line-height-static-	text-kern-static-	small	16px
		medium	18px/24px
		large	21px/32px
--kern-typography-font-size-adaptive- & --kern-typography-line-height-adaptive-	text-kern-adaptive-	medium	21px/24px (24px/32px)
		large	26px/32px (32px/40px)
		x-large	32px/40px (48px/56px)
		2x-large	48px/56px (72px/80px)
--kern-	-kern-	0	0
		1	1px
		2	2px
		3	3px
		4	4px
		5	5px
		6	6px
		7	7px
		8	8px
		9	9px
		10	10px
		12	12px
		14	14px
		16	16px
		18	18px
		20	20px
		24	24px
		32	32px
		40	40px
		48	48px
		56	56px
		64	64px
		80	80px
		96	96px
		128	128px
		160	160px
		192	192px
		224	224px
		240	240px
		256	256px
		352	352px
		360	360px
		384	384px
		480	480px
		512	512px
		736	736px
		768	768px
		992	992px
		1024	1024px
		1140	1140px
		1248	1248px
		1280	1280px
		1504	1504px
		1536	1536px
		1600	1600px
		1920	1920px
--kern-metric-space-	-kern-space-	none	0
		2x-small	2px
		x-small	4px
		small	8px
		default	16px
		large	24px
		x-large	32px
--kern-metric-dimension-	-kern-dimension-	2x-small	8px
		x-small	16px
		small	20px
		default	24px
		large	32px
		x-large	48px
		2x-large	56px
		3x-large	64px
		4x-large	80px
		5x-large	96px
--kern-metric-dimension-media-	-kern-dimension-media-	small	96px (128px)
		default	160px (192px)
		large	240px (360px)
--kern-metric-screen-size	-kern-screen-size		360px (1920px)
--kern-metric-border-width-	-kern-border-	none	0
		light	1px
		default	2px
		bold	4px
		heavy	8px
--kern-metric-border-radius-	rounded-kern-	none	0
		small	2px
		default	4px
		large	8px
		circle	50%
--kern-darkblue- (!) (lightness, chroma, hue)	-kern-darkblue-	025
		050
		100
		150
		200
		250
		300
		350
		400
		450
		500
		550
		600
		650
		700
		750
		800
		850
		900
		950
--kern-lightblue- (!) (lightness, chroma, hue)	-kern-lightblue-	025
		050
		100
		150
		200
		250
		300
		350
		400
		450
		500
		550
		600
		650
		700
		750
		800
		850
		900
		950
--kern-turquoise- (!) (lightness, chroma, hue)	-kern-turquoise-	025
		050
		100
		150
		200
		250
		300
		350
		400
		450
		500
		550
		600
		650
		700
		750
		800
		850
		900
		950
--kern-green- (!) (lightness, chroma, hue)	-kern-green-	025
		050
		100
		150
		200
		250
		300
		350
		400
		450
		500
		550
		600
		650
		700
		750
		800
		850
		900
		950
--kern-limette- (!) (lightness, chroma, hue)	-kern-limette-	025
		050
		100
		150
		200
		250
		300
		350
		400
		450
		500
		550
		600
		650
		700
		750
		800
		850
		900
		950
--kern-yellow- (!) (lightness, chroma, hue)	-kern-yellow-	025
		050
		100
		150
		200
		250
		300
		350
		400
		450
		500
		550
		600
		650
		700
		750
		800
		850
		900
		950
--kern-orange- (!) (lightness, chroma, hue)	-kern-orange-	025
		050
		100
		150
		200
		250
		300
		350
		400
		450
		500
		550
		600
		650
		700
		750
		800
		850
		900
		950
--kern-red- (!) (lightness, chroma, hue)	-kern-red-	025
		050
		100
		150
		200
		250
		300
		350
		400
		450
		500
		550
		600
		650
		700
		750
		800
		850
		900
		950
--kern-violet- (!) (lightness, chroma, hue)	-kern-violet-	025
		050
		100
		150
		200
		250
		300
		350
		400
		450
		500
		550
		600
		650
		700
		750
		800
		850
		900
		950
--kern-neutral- (!) (lightness, chroma, hue)	-kern-neutral-	000
		025
		050
		100
		150
		200
		250
		300
		350
		400
		450
		500
		550
		600
		650
		700
		750
		800
		850
		900
		950
		1000
--kern-dataport-red- (!) (lightness, chroma, hue)	-kern-dataport-red-	025
		050
		100
		150
		200
		250
		300
		350
		400
		450
		500
		550
		600
		650
		700
		750
		800
		850
		900
		950
--kern-gray- (!) (lightness, chroma, hue)	-kern-gray-	025
--kern-grey- (!) (lightness, chroma, hue)	-kern-grey-	050
		100
		150
		200
		250
		300
		350
		400
		450
		500
		550
		600
		650
		700
		750
		800
		850
		900
		950
--kern-color-action-	-kern-action-	default
		on-default
		visited
		focus-background
		focus-border-inside
		focus-border-outside
--kern-color-action-state-indicator-	-kern-action-state-indicator-	default
		shade
		shade-hover
		shade-active
		tint
		tint-hover
		tint-active
--kern-color-feedback-	-kern-feedback-	danger
		danger-background
		info
		info-background
		success
		success-background
		warning
		warning-background
		loader
		loader-background
--kern-color-form-input-	-kern-form-input-	background
		background-inverted
		border
--kern-color-layout-	-kern-layout-	border
		text-default
		text-inverse
		text-muted
		background-default
		background-hued
		background-overlay
		background-inverted

KERN UX Cheatsheet

Read the source

Breakpoints

Utils

Screenreader only

Grid

Container

Breite (kern-col)

Offset (kern-col)

Vertikale Ausrichtung (kern-row)

Horizontale Ausrichtung (kern-row)

gleichmäßge Verteilung

Ausrichtung überschreiben (kern-col)

Vertikale Ausrichtung

Typografisches

Icons

Größe

Motiv

im KERN Stylesheet enthalten

Checkbox & Radio <input type=checkbox>, <input type=radio>

Form Inputs <Input>, <textarea>

Fehler

Text, Tel, Number, Password, File, E-Mail, Url, Textarea

Fehler

Select <select>

Fehler

Date

Error message

Number

Button <button>, <a>

Varianten

100% Breite / Block

Link <a>

small

Fieldset <fieldset> + <legend>

Body

Fehler

Table <table>

Varianten

numerische Felder

Überschrift

Divider <hr>

nur visuell

mit inhaltlicher Bedeutung (vom Screenreader vorgelesen)

Description List <dl>

Accordion <details> + <summary>

mehrere Einträge

Progress <progress>

Dialog <dialog>

Loader

Alert

Varianten

Badge

Varianten

Kopfzeile

Card

Summary

Task List

Tabs

Tokens

Checkbox & Radio `<input type=checkbox>`, `<input type=radio>`

Form Inputs `<Input>`, `<textarea>`

Select `<select>`

Button `<button>`, `<a>`

Link `<a>`

Fieldset `<fieldset>` + `<legend>`

Table `<table>`

Divider `<hr>`

Description List `<dl>`

Accordion `<details>` + `<summary>`

Progress `<progress>`

Dialog `<dialog>`