Klassen & Elemente

Klassen & Elemente

für Artikel:

  • .article--full
  • .article-[viewport]-[cols] – z.B. .article-md-8 oder .article-xl-6: Mit den Klassen .article-xs-1 - .article-xl-12 können Artikel auf eine prozentuale Breite beschränkt werden, um so beispielsweise zu verhindern, dass Texte eine zu große Laufweite haben. Achtung, Text wird mittig ausgerichtet - das müsste geändert werden!
  • .band
  • .band--dark
  • .band--highlight
  • .band--tint

Hero:
Artikel, Bild + Text
Artikel, Video + Text

  • .hero – Bild erstreckt sich über die gesamte Breite (Hero-Klassen können überall verwendet werden, nicht nur am Anfang der Seite!)
  • .hero--full – Bild füllt den gesamten Viewport: min-height: calc(100vh - #{2 * $base-spacing-unit–lg});
  • .hero--small – Bild erstreckt sich über 50% der Viewport-Höhe: &–small { min-height: 50vh; }

für Inhaltselemente:

Slider:

  • .slider – Klasse für Umschlag - Anfang
  • .slider--hero – Fullscreen Slider in Kombination mit .mod_article.hero

Bilder:

  • .image--left
  • .image--right

Portfolio:

  • .portfolio – Klasse für Bildelement
  • .portfolio--hover

Testimonial:

  • .testimonial – Klasse für Bildelement

Navigation:

  • .nav entfernt Abstände und Listensymbole
  • .nav--horizontal ordnet Punkte nebeneinander an
  • .nav--right ordnet Punkte rechts an
  • .nav--main explizite Anweisungen für die Hauptnavi
  • .nav--meta Footernavigation
  • .nav--mobile aktiviert die Navi für Einblendung mit Toggle-Button
  • .nav--mobile--active
  • .nav-toggler
  • .nav-toggler__button
  • .menu-icon
  • .menu-icon__inner

News:

  • .mod-newslist .news-grid
  • .mod_newslist .news-list (.news-list--hero)
  • .mod_newsmenu .news-menu

Templates:

  • news_latest--hero
  • news_latest--grid
  • news_full--hero

Formulare:

  • widget-radio--list – Radio-Buttons in Listenform (Nutshell!!!) (default: einzeilig)
  • widget-checkbox--list – Checkboxen in Listenform (Nutshell!!!) (default: einzeilig)

Elemente (Klassen für .ce_image, .ce_text, …)

  • .hero__image
  • .hero__text
  • .hero__text--left
  • .hero__text--right
  • .hero__text--top
  • .hero__text--bottom

Überschriften

  • .heading--1, .heading--2, …
  • %h1 extend!!

Buttons

  • .btn
  • .btn--primary (farbiger Hintergrund)
  • .btn--secondary (nur Rahmen)

Hilfsklassen

  • /trumps/helper.scss werden am Ende geladen und haben daher eine höhere Priorität

Abstände

  • .m-t-0 – .m-t-5 und .p-t-0 – .p-b-0 schafft einen Abstand nach oben auf Basis der $base-spacing-unit
  • .m-b-0 – .m-b-5 und .p-b-0 – .p-b-0 schafft einen Abstand nach unten auf Basis der $base-spacing-unit Breiten

Text

  • .text--inverted – gibt dem Text die Farbe aus $color-text--inverted

Rahmen

  • .border-top – fügt dem Element einen Rahmen im Stil von $base-border zu
  • .border-bottom – fügt dem Element einen Rahmen im Stil von $base-border zu

Block

  • .block--center – zentriert das Element horizontal mittig

Grid

  • .show-grid – macht die Gridklassen sichtbar
  • .align-bottom