HTML-Prototype der OTH-Regensburg

Settings

Colors

  • #000000

    primary-color-base

  • #191919

    primary-color-900

  • #707070

    neutral-color-700

  • #9D9D9C

    neutral-color-600

  • #D8D8D8

    neutral-color-300

  • #F6F6F6

    neutral-color-100

  • #FFFFFF

    neutral-color-inverted

  • #334155

    neutral-color-blue-base

  • #64748B

    neutral-color-blue-700

  • #94A3B8

    neutral-color-blue-500

  • #AFBFD1

    neutral-color-blue-450

  • #CBD5E1

    neutral-color-blue-400

  • #F1F5F9

    neutral-color-blue-100

Fonts

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>1.2-</insert-markup>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

em: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Strong: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Strong/em: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Markup: templates/output/01-settings/fonts.html 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p><em>em: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</em></p>
<p><strong>Strong: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</strong></p>
<p><strong><em>Strong/em: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</em></strong></p>
Source: assets/sass/01-settings/_settings.fonts.scss, line 13

Iconfont

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>1.3-</insert-markup>
icon-font
font
<insert-markup>1.3-0</insert-markup>
Markup: templates/output/01-settings/iconfont.html 
<i class="icon [modifier class]"></i>
Source: assets/sass/01-settings/_settings.iconfont.scss, line 5