Degeler Styleguide:

Hier sind alle bisherigen, Farben, Schriftarten, Schriftschnitte, Schriftgrößen, so wie die verwendetetn Formelemente, Icons und Jquery Ressourcen aufgeführt.

Bei der Erweiterung des Layouts wäre es gut, wenn darauf geachtet wird, dass nur neue styles hinzukommen wenn wirklich notwendig.

Der Styleguide ist noch nicht fertig, derzeit fehlt bspw. noch die Darstellung der vertikalen Abstände.

Farben:

Die Namen der Variablen und Klassen für die Hexwerte sind auf Name that color generiert worden. Klick hier.

color: #000000
class: black / bg-black

color: #151D25
class: mirage / bg-mirage

color: #2b3947
class: pickled-bluewood-dark / bg-pickled-bluewood-dark

color: #34485c
class: pickled-bluewood / bg-pickled-bluewood

color: #282828
class: mine-shaft / bg-mine-shaft

color: #383F45
class: bright-gray / bg-bright-gray

color: #787878
class: boulder / bg-boulder

color: #828282
class: gray / bg-gray

color: #969696
class: dusty-gray / bg-dusty-gray

color: #acb6b9
class: hit-gray / bg-hit-gray

color: #b4b4b4
class: nobel / bg-nobel

color: #dcddde
class: iron / bg-iron

color: #e0e5e1
class: gray-nurse-dark / bg-gray-nurse-dark

color: #eaefeb
class: gray-nurse / bg-gray-nurse

color: #fafafb
class: black-haze / bg-black-haze

color: #ffffff
class: white / bg-white

color: #ffed00
class: turbo / bg-turbo


Fonts:

Almost before we knew it, we had left the ground. fontstyle: termina
Font-size: fs(~18px)
font-weight: light

Almost before we knew it, we had left the ground. fontstyle: termina
Font-size: fs(~18px)
font-weight: regular

Almost before we knew it, we had left the ground. fontstyle: termina
Font-size: fs-l(~22px)
font-weight: light

Almost before we knew it, we had left the ground. fontstyle: termina
Font-size: fs-l(~22px)
font-weight: regular

Almost before we knew it, we had left the ground. fontstyle: termina
Font-size: fs-ll(~28px)
font-weight: light

Almost before we knew it, we had left the ground. fontstyle: termina
Font-size: fs-ll(~28px)
font-weight: regular

Almost before we knew it, we had left the ground. fontstyle: termina
Font-size: fs-xl(~36px)
font-weight: light

Almost before we knew it, we had left the ground. fontstyle: termina
Font-size: fs-xl(~36px)
font-weight: regular

Almost before we knew it, we had left the ground. fontstyle: termina
Font-size: fs-xxl(~50px)
font-weight: light

Almost before we knew it, we had left the ground. fontstyle: termina
Font-size: fs-xxl(~50px)
font-weight: regular

Almost before we knew it, we had left the ground. fontstyle: proximanova
Font-size: fs(~18px)
font-weight: light

Almost before we knew it, we had left the ground. fontstyle: proximanova
Font-size: fs(~18px)
font-weight: regular

Almost before we knew it, we had left the ground. fontstyle: proximanova
Font-size: fs(~18px)
font-weight: medium

Almost before we knew it, we had left the ground. fontstyle: proximanova
Font-size: fs(~18px)
font-weight: bold

Almost before we knew it, we had left the ground. fontstyle: proximanova
Font-size: fs(~18px)
font-weight: extrabold

Almost before we knew it, we had left the ground. fontstyle: proximanova
Font-size: fs-l(~22px)
font-weight: light

Almost before we knew it, we had left the ground. fontstyle: proximanova
Font-size: fs-l(~22px)
font-weight: regular

Almost before we knew it, we had left the ground. fontstyle: proximanova
Font-size: fs-l(~22px)
font-weight: medium

Almost before we knew it, we had left the ground. fontstyle: proximanova
Font-size: fs-l(~22px)
font-weight: bold

Almost before we knew it, we had left the ground. fontstyle: proximanova
Font-size: fs-l(~22px)
font-weight: extrabold

Almost before we knew it, we had left the ground. fontstyle: proximanova
Font-size: fs-ll(~28px)
font-weight: light

Almost before we knew it, we had left the ground. fontstyle: proximanova
Font-size: fs-ll(~28px)
font-weight: regular

Almost before we knew it, we had left the ground. fontstyle: proximanova
Font-size: fs-ll(~28px)
font-weight: medium

Almost before we knew it, we had left the ground. fontstyle: proximanova
Font-size: fs-ll(~28px)
font-weight: bold

Almost before we knew it, we had left the ground. fontstyle: proximanova
Font-size: fs-ll(~28px)
font-weight: extrabold

Almost before we knew it, we had left the ground. fontstyle: proximanova
Font-size: fs-xl(~36px)
font-weight: light

Almost before we knew it, we had left the ground. fontstyle: proximanova
Font-size: fs-xl(~36px)
font-weight: regular

Almost before we knew it, we had left the ground. fontstyle: proximanova
Font-size: fs-xl(~36px)
font-weight: medium

Almost before we knew it, we had left the ground. fontstyle: proximanova
Font-size: fs-xl(~36px)
font-weight: bold

Almost before we knew it, we had left the ground. fontstyle: proximanova
Font-size: fs-xl(~36px)
font-weight: extrabold

Almost before we knew it, we had left the ground. fontstyle: proximanova
Font-size: fs-xxl(~50px)
font-weight: light

Almost before we knew it, we had left the ground. fontstyle: proximanova
Font-size: fs-xxl(~50px)
font-weight: regular

Almost before we knew it, we had left the ground. fontstyle: proximanova
Font-size: fs-xxl(~50px)
font-weight: medium

Almost before we knew it, we had left the ground. fontstyle: proximanova
Font-size: fs-xxl(~50px)
font-weight: bold

Almost before we knew it, we had left the ground. fontstyle: proximanova
Font-size: fs-xxl(~50px)
font-weight: extrabold


Bootstrap grid (Horizontale Abstände)

Three equal columns

Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

.col-md-4
.col-md-4
.col-md-4

Three unequal columns

Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.

.col-md-3
.col-md-6
.col-md-3

Two columns

Get two columns starting at desktops and scaling to large desktops.

.col-md-8
.col-md-4

Full width, single column

No grid classes are necessary for full-width elements.


Two columns with two nested columns

Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Mixed: mobile and desktop

The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Mixed: mobile, tablet, and desktop

.col-xs-12 .col-sm-6 .col-lg-8
.col-xs-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Column clearing

Clear floats at specific breakpoints to prevent awkward wrapping with uneven content.

.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset, push, and pull resets

Reset offsets, pushes, and pulls at specific breakpoints.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0

Vertikale Abstände

mtop-xs mbottom-xs
mtop-xs mbottom-xs ptop-xs pbottom-xs
mtop mbottom
mtop mbottom ptop pbottom
mtop-l mbottom-l
mtop-l mbottom-l ptop-l pbottom-l
mtop-ll mbottom-ll
mtop-ll mbottom-ll ptop-ll pbottom-ll
mtop-xl mbottom-xl
mtop-xl mbottom-xl ptop-xl pbottom-xl
mtop-xxl mbottom-xxl
mtop-xxl mbottom-xxl ptop-xxl pbottom-xxl
mtop-xs-x4 mbottom-xs-x4
mtop-xs-x4 mbottom-xs-x4 ptop-xs-x4 pbottom-xs-x4
mtop-x4 mbottom-x4
mtop-x4 mbottom-x4 ptop-x4 pbottom-x4
mtop-l-x4 mbottom-l-x4
mtop-l-x4 mbottom-l-x4 ptop-l-x4 pbottom-l-x4
mtop-ll-x4 mbottom-ll-x4
mtop-ll-x4 mbottom-ll-x4 ptop-ll-x4 pbottom-ll-x4
mtop-xl-x4 mbottom-xl-x4
mtop-xl-x4 mbottom-xl-x4 ptop-xl-x4 pbottom-xl-x4
mtop-xxl-x4 mbottom-xxl-x4
mtop-xxl-x4 mbottom-xxl-x4 ptop-xxl-x4 pbottom-xxl-x4
mtop-80 mbottom-80
mtop-80 mbottom-80 ptop-80 pbottom-80
mtop-120 mbottom-120
mtop-120 mbottom-120 ptop-120 pbottom-120

Form Elements

Buttons:

Inputs:

die vertikalen Abstände bspw. im Onestepcheckout werden nicht über die Wrapper Klasse .input-box erzeugt, da im Falle des OSC sonst zu schwierig wird, die Anordnung zu generieren.


Icon-fonts

Diese Icons sind als Font eingebunden und können per font-size, color, font-weight etc. verändert werden.

class: ticon-degree value: e90a
class: ticon-icons_facebook value: e915
class: ticon-icons_pfeil-runter value: e90c
class: ticon-circle-world value: e90e
class: ticon-world value: e9018
class: ticon-europe value: e90b
class: ticon-icons_pfeil-rauf value: e90d
class: ticon-twitter value: e90f
class: ticon-instagram value: e910
class: ticon-Vektor-Smartobjekt2.ai value: e911
class: ticon-pinterest value: e912
class: ticon-icons_pfeil-weiter_stroke value: e904
class: ticon-icons_pfeil-zurueck_stroke value: e905
class: ticon-icons_pfeil-zurueck2 value: e908
class: ticon-icons_pfeil-weiter2 value: e909
class: ticon-icons_klammer value: e901
class: ticon-icons_play value: e906
class: ticon-icons_cart value: e900
class: ticon-icons_pfeil-dropdown_dunkel value: e902
class: ticon-icons_pfeil-dropdown_hell value: e903

jQuery Javascript Resources

Select or Die

To style the select Boxes

Exsamples Git Repro

Swiper

For Slideshows and Carousells

Exsamples Api Git Repro

Standard element Styles

Hier ist eine Sammlung der Wichtigsten HTML Elemente. Diese sind alle komplett resettet. D.h. ein Html Element ansicht trägt keinen Style mit sich.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Headings with Text

Heading 1

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 2

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 3

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 4

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 5

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 6

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.


Block Elements

Paragraphs and Images

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

Blockquote

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

"This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl."

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Note: the Figure-Figcaption and Details-Summary elements are not currently supported in markdown.


Text Elements

The a element and external a element examples

The abbr element and an abbr element with title examples

The ACRONYM element example

The b element example

The cite element example

The code element example

The data element example

The del element example

The dfn element and dfn element with title examples

The em element example

The i element example

The ins element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The s element example

The samp element example

The small element example

The span element example

The strong element example

The sub element example

The sup element example

The time element example

The u element example

The var element example


Monospace / Preformatted

Code block wrapped in "pre" and "code" tags:

// Loop through Divs using Javascript.
var divs = document.querySelectorAll('div'), i;

for (i = 0; i < divs.length; ++i) {
  divs[i].style.color = "green";
}

Monospace Text wrapped in "pre" tags:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

List Types

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3
    1. List Item 3.1
    2. List Item 3.2
      1. List Item 3.2.1
      2. List Item 3.2 2
    3. List Item 3.3
  4. List Item 4

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3
    • List Item 3.1
    • List Item 3.2
      • List Item 3.2.1
      • List Item 3.2 2
    • List Item 3.3
  • List Item 4

Definition List

Definition Term 1
Definition Description 1
Definition Term 2
Definition Description 2

Tables

Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3

Media and Form Elements