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

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

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

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">