Viewing: Components

These are the items we`ll use most often. Thee are the main ingredients to our website. Typical components are buttons or cards.

avatar

<img src="/assets/images/figure.jpg" width="100" height="100" class="sdi-avatar"/>

When to use

An Avatar is used to display ourself on the interwebs.

For round avatars we'll use a square image and set the border-radius to 99rem;

Last modified: 19 Apr 2019

buttons

a button sdi-button--75 
<!-- default buttons -->
<a href="#" class="sdi-button">a button</a>
<button class="sdi-button sdi-button--secondary">secondary button</button>

<!-- downsized buttons -->
<a href="#" class="sdi-button sdi-button--75">sdi-button--75</a>
<button class="sdi-button sdi-button--secondary sdi-button--75">sdi-button--75</button>

When to use

buttons come as primary and secondary buttons

For scaled buttons we'll add a modifier-class like sdi-button--75. We are useing percentage-values for scaling, so we can easily add buttons between these ranges.

Last modified: 17 Apr 2019

card

card__header
card__main
card__footer
card__main
card__main
<!-- the defult card -->
<div class="sdi-card">
	<div class="sdi-card__header">
		card__header
	</div>
	<div class="sdi-card__main">
		card__main
	</div>
	<div class="sdi-card__footer">
		card__footer
	</div>
</div>

<!-- card lit and content only-->
<div class="sdi-card sdi-card--lit">
	<div class="sdi-card__main">
		card__main
	</div>
</div>

<!-- card lit and borderless-->
<div class="sdi-card sdi-card--lit sdi-card--border-0">
	<div class="sdi-card__main">
		card__main
	</div>
</div>

When to use

Cards are useful containers to group content. Cards can be used to build login boxes too.

Last modified: 19 Apr 2019

hero

SDI Design System

This is a design system documentation powered by eleventy
It is structured using ITCSS and uses BEM for the styling.

<div class="sdi-hero">
	<div class="sdi-hero__content">
		<div class="sdi-hero__title">SDI Design System</div>
		<p class="sdi-hero__text">This is a design system documentation powered by eleventy<br/>
		It is structured using ITCSS and uses BEM for the styling.</p>
	</div>
</div>

When to use

Hero-containers are useful for site-headings. Group them with the class sdi-full-width to increase the effect.

Last modified: 19 Apr 2019

promo

Mit der Entwicklung dieser Website habe ich begonnen, ein Design-System zu entwickeln, das mittels BEM und ITCSS strukturiert ist.
Mit der Entwicklung dieser Website habe ich begonnen, ein Design-System zu entwickeln, das mittels BEM und ITCSS strukturiert ist.
Wirf einen Blick darauf
<!-- default promo -->
<div class="sdi-promo">
	Mit der Entwicklung dieser Website habe ich begonnen, ein
		Design-System zu entwickeln, das mittels BEM und ITCSS strukturiert ist.
</div>

<!-- promo is lit and content is centered and narrowed -->
<div class="sdi-promo sdi-promo--lit sdi-center">
	<div class="sdi-container sdi-container--narrow">Mit der Entwicklung dieser Website habe ich begonnen, ein
		Design-System zu entwickeln, das mittels BEM und ITCSS strukturiert ist.<br><a href="/design-system">Wirf einen
			Blick darauf</a>
	</div>
</div>

When to use

The promo is a container to promote content. Group it with sdi-center and use sdi-promo--lit to increase the effect.

Last modified: 14 Apr 2019

scroll-top

⇧
<a href="#" class="sdi-scroll-top">
	<span class="sdi-scroll-top__icon">⇧</span>
</a>

When to use

We're using scroll-top to let the user easily access the top of the page. Per default it is just an anchor that doesn't exist on the page, so the browser scrolls to top. The best place for this is at the bottom of the page, so the user can reach this function with his thumbs instead of reaching for the top of the screen.

We can easily toggle the visibility with some JavaScript and listening for the scroll depth.

Last modified: 19 Apr 2019

⇧