Viewing: Objects

Objects are used to structure the content. They have no styling attached!

container

If container-max-width is set to none, it will occupy 100% of the available width.
This container is only available, if $container--narrow-max-width is NOT set to none
This container is only available, if $container--wide-max-width is NOT set to none
<!-- The default container -->
<div class="sdi-container">
	If container-max-width is set to none, it will occupy 100% of the available width.
</div>

<!-- A narrow container -->
<div class="sdi-container sdi-container--narrow">
	This container is only available, if $container--narrow-max-width is NOT set to none
</div>

<!-- A wide container -->
<div class="sdi-container sdi-container--wide">
	This container is only available, if $container--wide-max-width is NOT set to none
</div>

When to use

Containers are used to group content. Use the variations to narrow or widen the content. Use sdi-full-width to break out of a parent container.

Last modified: 17 Apr 2019

layout

50%
50%
100%
25%
75%
50%
50%
33%
33%
33%
<!-- evenly distributed layout -->
<div class="sdi-layout">
	<div class="sdi-layout__item">
		<div>50%</div>
	</div>
	<div class="sdi-layout__item">
		<div>50%</div>
	</div>
</div>

<!-- Variations -->
<div class="sdi-layout">
	<div class="sdi-layout__item sdi-layout__item--100">
		<div>100%</div>
	</div>

	<div class="sdi-layout__item sdi-layout__item--25">
		<div>25%</div>
	</div>
	<div class="sdi-layout__item sdi-layout__item--75">
		<div>75%</div>
	</div>

	<div class="sdi-layout__item sdi-layout__item--50">
		<div>50%</div>
	</div>
	<div class="sdi-layout__item sdi-layout__item--50">
		<div>50%</div>
	</div>

	<div class="sdi-layout__item sdi-layout__item--33">
		<div>33%</div>
	</div>
	<div class="sdi-layout__item sdi-layout__item--33">
		<div>33%</div>
	</div>
	<div class="sdi-layout__item sdi-layout__item--33">
		<div>33%</div>
	</div>
</div>

When to use

sdi-layout is just a replacement for the typical grid-classes (row & col). We're using sdi-layout because it's not a grid per se - although it can be used like one. The grid-gap is applied to layout__item (columns) as padding.

(!) Some tools rely heavily on bootstrap-grids, so if we'd like to we could change the classnames to match bootstrap-classnames. The classnames are defined in 1-settings/variables but we should set them here themes/1-settings/variables!

Last modified: 19 Apr 2019

media

our image
Some other content
Photo by Christopher Gower on Unsplash
Some other content
Photo by Christopher Gower on Unsplash
our image
our image

Nested media-objects are great for threads

our image
Some other content
Photo by Christopher Gower on Unsplash
<div class="sdi-media">
	<div class="sdi-media__object">
		<img src="/assets/images/figure.jpg" width="150" alt="our image"/>
	</div>
	<div class="sdi-media__content">
		Some other content<br/>
		Photo by Christopher Gower on <a href="https://unsplash.com/photos/m_HRfLhgABo">Unsplash</a>
	</div>
</div>

<!-- reverse direction and content is vertically centered -->
<div class="sdi-media sdi-media--reversed sdi-media--center-vertical">
	<div class="sdi-media__content">
		Some other content<br/>
		Photo by Christopher Gower on <a href="https://unsplash.com/photos/m_HRfLhgABo">Unsplash</a>
	</div>
	<div class="sdi-media__object">
		<img src="/assets/images/figure.jpg" width="150" alt="our image"/>
	</div>
</div>

<!-- nested media-objects -->
<div class="sdi-media">
	<div class="sdi-media__object">
		<img src="/assets/images/figure.jpg" width="150" alt="our image"/>
	</div>
	<div class="sdi-media__content">
		<p>Nested media-objects are great for threads</p>
		<div class="sdi-media">
			<div class="sdi-media__object">
				<img src="/assets/images/figure.jpg" width="150" alt="our image"/>
			</div>
			<div class="sdi-media__content">
				Some other content<br/>
				Photo by Christopher Gower on <a href="https://unsplash.com/photos/m_HRfLhgABo">Unsplash</a>
			</div>
		</div>
	</div>
</div>

When to use

The media object is designed to align text and images.

With sdi-media--reversed we can change the orientation on desktop. Keep in mind: Always lay the content as desired on mobile and reverse it on higher resolution with this class.

Last modified: 19 Apr 2019

ui-list

  • horizontal item 1
  • horizontal item 2
  • horizontal item 3
  • vertical item 1
  • vertical item 2
  • vertical item 3
<!-- horizontal -->
<ul class="sdi-ui-list">
	<li>horizontal item 1</li>
	<li>horizontal item 2</li>
	<li>horizontal item 3</li>
</ul>

<!-- vertical -->
<ul class="sdi-ui-list sdi-ui-list--vertical">
	<li>vertical item 1</li>
	<li>vertical item 2</li>
	<li>vertical item 3</li>
</ul>

When to use

sdi-ui-list is a useful wrapper for lists like navigation or breadcrumbs. The default list is layed out in horizontal direction. Add sdi-ui-list--vertical for vertical lists (like a navigation in a sidebar or a dropdown)

Last modified: 17 Apr 2019

wrapper

...
<div class="sdi-wrapper">
	...
</div>

When to use

Wraps the whole page in sdi-wrapper.

We can now change it's behavior in the setting modifying $page-max-width. When NOT set to none we can change the maximum width of all elements of the page. It automatically centers the content. The default is $page-max-width: none to make header and footer span the whole page. Otherwise it spans the entered width.

Last modified: 15 Apr 2019

⇧