SDI Design System

On this page you'll find all the Elements currently developed for this page. Header and Footer are not shown separately, just pick the code from them directly


Classnames / Variables

All classnames belonging to this design-system are prefixed, so we can mix it with another framework and distinguish just by looking at the class names. This might become handy. The default-prefix is sdi- and it is set in 1-settings/variables. Classnames of containers and wrappers can be set there too - but you should propably not change them here to be updateable. They are set with !default so they are acting as a fallback.

The CSS is structured using BEM and ITCSS - as you might have guessed. All variables are set using !default, to make copying the Code and customizing it easy. If your comfortable using scss it should be easy for you to overwrite the values with your own vlaues in an additonal file.

We are using classnames with numbers, to reflect percentage-values. e.g. sdi-layout__item--50 => this item has a width of 50%.

Breakpoints or variations depending on device-width are using calssnames like sdi-center--s. This means, the content is only centered on mobile devices (breakpointname is "s"). The breakpoints are defined in 1-settings/breakpoints and are using the exact same letters.

It's a work in progress - but I'll release it, as soon as possible.

Container

.sdi-container.sdi-container--wide (no max-width)
.sdi-container (max-width)
.sdi-container.sdi-container--narrow (narrow max-width)

Layout-Item

100%
100%
50%
50%
33%
33%
25%
25%

Headings

Heading 1 / .h1

Heading 2 / .h2

Heading 3 / .h3

Heading 4 / .h4

Heading 5 / .h5
Heading 6 / .h6

Paragraphs

My firstParagraph

Another Paragraph - Lorem ipsum dolor sit amet, consectetur, adipisci velit, …" ist ein Blindtext, der nichts bedeuten soll, sondern als Platzhalter im Layout verwendet wird, um einen Eindruck vom fertigen Dokument zu erhalten. Die Verteilung der Buchstaben und der Wortlängen des pseudo-lateinischen Textes entspricht in etwa der natürlichen lateinischen Sprache. Der Text ist absichtlich unverständlich, damit der Betrachter nicht durch den Inhalt abgelenkt wird.

Center Text

.sdi-center (always center)
.sdi-center (always center)
.sdi-center--s (center on mobile)
.sdi-center--s (center on mobile)

Links

a link

Buttons

a button

Standard List

  • List item
  • List item
  • List item
  • List item

UI-Lists

  • UI List item vertical
  • UI List item vertical
  • UI List item vertical
  • UI List item vertical

  • UI List item horizontal
  • UI List item horizontal
  • UI List item horizontal
  • UI List item horizontal

Figure / Figcaption

Figure
Figure with Figcaption

Media Object

Figure

The media-obejct is designed to align images and text.

Just layout the content as you want them to be displayed on mobile.

Figure

With .sdi-media--reversed you can change the orientation on dekstop, if there are are break-classes defined.

Mit der Entwicklung dieser Website habe ich begonnen, ein Design-System zu entwickeln, das mittels BEM und ITCSS strukturiert ist.
Wirf einen Blick darauf