Style guide

Please use the following as standard for a few common inline styling via WYSIWYG.
Some of them below can be accessed via WYSIWYG buttons (such as Styles or Gear buttons). However to customize more, you need to edit the HTML manually via its source by clicking "Disable rich text" button. And add needed relevant classes manually.
Only if trouble with stale assests, visit these URL, and press F5 or CMD (CTRL) + R. Or clear browser cache manually.

Grid:

To have different column/grid widths for inline boxes, use semantic grid classes:

one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve

Float:

float-left, float-right

Center:

centered, box--centered

Icons:

Using icons with icon-white icon-bg class can make icons have BG.

bg-green, bg-blue, bg-gold, bg-red, bg-dark
 
 
<div class="icon icon-flat icon-internal_external">&nbsp;</div>
<div class="icon icon-white icon-bg icon-jobs bg-green">&nbsp;</div>

hr:







<hr />
<hr class="hr hr--one" />
<hr class="hr hr--two" />
<hr class="hr hr--three" />
<hr class="hr hr--four" />
<hr class="hr hr--five" />

box--caption float-right:

mobileX AG ist bei Kununu als Top Company bewertet
Die mobileX AG ist bei kununu als Top Company bewertet.
» Mehr erfahren
<div class="box box--image box--caption four float-right">
  <div class="box__image"><a href="http://www.kununu.com/de/by/muenchen/it/mobilex1" target="_blank"><img alt="mobileX AG ist bei Kununu als Top Company bewertet" src="https://www.mobilexag.de/sites/default/files/kununu.png" /></a></div>

  <div class="box__content">Die mobileX AG ist bei kununu als Top Company bewertet.<br />
    <a href="http://www.kununu.com/de/by/muenchen/it/mobilex1" target="_blank">&raquo; Mehr erfahren</a></div>
</div>

box--caption float-left:

mobileX AG ist bei Kununu als Top Company bewertet
Die mobileX AG ist bei kununu als Top Company bewertet.
» Mehr erfahren
<div class="box box--image box--caption four float-left">
  <div class="box__image"><a href="http://www.kununu.com/de/by/muenchen/it/mobilex1" target="_blank"><img alt="mobileX AG ist bei Kununu als Top Company bewertet" src="https://www.mobilexag.de/sites/default/files/kununu.png" /></a></div>

  <div class="box__content">Die mobileX AG ist bei kununu als Top Company bewertet.<br />
    <a href="http://www.kununu.com/de/by/muenchen/it/mobilex1" target="_blank">&raquo; Mehr erfahren</a></div>
</div>

box--caption box--offset float-left:

mobileX AG ist bei Kununu als Top Company bewertet
Die mobileX AG ist bei kununu als Top Company bewertet.
» Mehr erfahren
<div class="box box--image box--caption six box--offset">
  <div class="box__image"><a href="http://www.kununu.com/de/by/muenchen/it/mobilex1" target="_blank"><img alt="mobileX AG ist bei Kununu als Top Company bewertet" src="https://www.mobilexag.de/sites/default/files/kununu.png" /></a></div>

  <div class="box__content">Die mobileX AG ist bei kununu als Top Company bewertet.<br />
    <a href="http://www.kununu.com/de/by/muenchen/it/mobilex1" target="_blank">&raquo; Mehr erfahren</a></div>
</div>

box--caption box--centered:

To make caption text centered, use text-center class.
To control the width, use the above mentioned Grid classes.

mobileX AG ist bei Kununu als Top Company bewertet
Die mobileX AG ist bei kununu als Top Company bewertet.
» Mehr erfahren
<div class="box box--image box--caption eight box--centered">
  <div class="box__image"><a href="http://www.kununu.com/de/by/muenchen/it/mobilex1" target="_blank"><img alt="mobileX AG ist bei Kununu als Top Company bewertet" src="https://www.mobilexag.de/sites/default/files/kununu.png" /></a></div>

  <div class="box__content">Die mobileX AG ist bei kununu als Top Company bewertet.<br />
    <a href="http://www.kununu.com/de/by/muenchen/it/mobilex1" target="_blank">&raquo; Mehr erfahren</a></div>
</div>

box--quote box--offset:

Use the provided "Insert box quote" for easy insertion.
To control the width, use the above mentioned Grid classes.

Die Planung der Servicetechniker mit Excel-Tabellen wäre in diesem Umfang gar nicht mehr möglich. Mit der Einführung von mobileX-Dispatch haben wir die Effizienz unserer Einsatzplanung auf jeden Fall gesteigert. Die zentrale Steuerung hat uns zudem ermöglicht, die Gebietsgrenzen nach Postleitzahlen aufzulösen und eine optimierte Routenplanung einzuführen. Unsere Servicetechniker können sich jetzt endlich auf ihre eigentlichen Aufgaben konzentrieren, nämlich die Wartung der Geräte beim Patienten.

<blockquote class="box box--quote box--offset box--full">
  <div class="box__image">
    <p><img width="126" height="159" src="https://www.mobilexag.de/sites/default/files/images/inline/stoltenberg_small.jpg" alt=""></p>
  </div>
  <div class="box__text">
    <p class="box__quote">Die Planung der Servicetechniker mit Excel-Tabellen wäre in diesem Umfang gar nicht mehr möglich. Mit der Einführung von mobileX-Dispatch haben wir die Effizienz unserer Einsatzplanung auf jeden Fall gesteigert. Die zentrale Steuerung hat uns zudem ermöglicht, die Gebietsgrenzen nach Postleitzahlen aufzulösen und eine optimierte Routenplanung einzuführen. Unsere Servicetechniker können sich jetzt endlich auf ihre eigentlichen Aufgaben konzentrieren, nämlich die Wartung der Geräte beim Patienten.</p>
    <p class="box__byline">&mdash; Imke Stoltenberg, Leiterin der IT-Systementwicklung bei der VitalAire GmbH</p>
  </div>
</blockquote>

box--quote box--quote-vertical:

To have a vertical blockquote, use class box--quote-vertical without box--offset.
To control widths, use the above mentioned grid classes.
To float the boxes, use Float classes above.

Die Arbeitsatmosphäre ist bei uns wirklich sehr angenehm. Auch in stressigen Zeiten ist der Umgang mit den Kollegen immer freundlich und respektvoll. Neue Kollegen werden herzlich aufgenommen und in die Welt der mobileX AG eingeführt.

Die Arbeitsatmosphäre ist bei uns wirklich sehr angenehm. Auch in stressigen Zeiten ist der Umgang mit den Kollegen immer freundlich und respektvoll. Neue Kollegen werden herzlich aufgenommen und in die Welt der mobileX AG eingeführt.

<blockquote class="box box--quote box--quote-vertical six float-right">
  <div class="box__image">
    <p><img width="126" height="159" src="https://www.mobilexag.de/sites/default/files/images/inline/stoltenberg_small.jpg" alt=""></p>
  </div>
  <div class="box__text">
    <p class="box__quote">Die Arbeitsatmosphäre ist bei uns wirklich sehr angenehm. Auch in stressigen Zeiten ist der Umgang mit den Kollegen immer freundlich und respektvoll. Neue Kollegen werden herzlich aufgenommen und in die Welt der mobileX AG eingeführt</p>
    <p class="box__byline">&mdash; Manuela Lillich, Office Managerin</p>
  </div>
</blockquote>

box--quote box--quote-vertical reversed:

To position text, simply change the order.

Die Arbeitsatmosphäre ist bei uns wirklich sehr angenehm. Auch in stressigen Zeiten ist der Umgang mit den Kollegen immer freundlich und respektvoll.

Die Arbeitsatmosphäre ist bei uns wirklich sehr angenehm. Auch in stressigen Zeiten ist der Umgang mit den Kollegen immer freundlich und respektvoll. Neue Kollegen werden herzlich aufgenommen und in die Welt der mobileX AG eingeführt.

<blockquote class="box box--quote box--quote-vertical six float-left">
  <div class="box__text">
    <p class="box__quote">Die Arbeitsatmosphäre ist bei uns wirklich sehr angenehm. Auch in stressigen Zeiten ist der Umgang mit den Kollegen immer freundlich und respektvoll. Neue Kollegen werden herzlich aufgenommen und in die Welt der mobileX AG eingeführt</p>
    <p class="box__byline">&mdash; Manuela Lillich, Office Managerin</p>
  </div>
  <div class="box__image">
    <p><img width="126" height="159" src="https://www.mobilexag.de/sites/default/files/images/inline/stoltenberg_small.jpg" alt=""></p>
  </div>
</blockquote>

box--caption within block-grid:

To make inline multiple responsive boxes, use block-grid classes with UL element:
You can do the same for other revelant boxes, such as box--quote.
To reduce too large left and right spacing, use block-grid--wide class.
If the large- version should have the same amount as medium- version, simply remove large- because the grid uses min-width, it will work progressively.
Important! Do not add the above mentioned Grid classes (one, two, three) to the boxes since the width is now controlled by block-grid class.

block-grid medium-block-grid-2 large-block-grid-3

Note the number: "-2", "-3" (can be 1 to 12). They defines the number of columns for either small, medium or large devices.

  • Kartendarstellung durch Integration von Bing Maps in mobileX-Dispatch
  • Equipment Ein- und Ausbau im mobilen Client mobileX-MIP for Field Service
  • Anzeige von Vorgänger-Nachfolgerbeziehungen in mobileX-Dispatch
<ul class="list block-grid block-grid--wide medium-block-grid-2">
  <li>
    <div class="box box--image box--caption box--centered">
      <div class="box__image"><a href="https://www.mobilexag.de/sites/default/files/images/inline/bing-maps_2.png" target="_blank"><img alt="" class="inline-image" src="https://www.mobilexag.de/sites/default/files/images/inline/bing-maps_2.png" /></a></div>
      <div class="box__content">Kartendarstellung durch Integration von Bing Maps in mobileX-Dispatch</div>
    </div>
  </li>
  <li>
    <div class="box box--image box--caption box--centered">
      <div class="box__image"><a href="https://www.mobilexag.de/sites/default/files/images/inline/equipment_ausbau_high_res.png" target="_blank"><img alt="" class="inline-image" src="https://www.mobilexag.de/sites/default/files/images/inline/equipment_ausbau_high_res.png" /></a></div>
      <div class="box__content">Equipment Ein- und Ausbau im mobilen Client mobileX-MIP for Field Service</div>
  </div>
  </li>
  <li>
    <div class="box box--image box--caption box--centered">
      <div class="box__image"><a href="https://www.mobilexag.de/sites/default/files/images/inline/dispatch-beziehungen_2.png" target="_blank"><img alt="" class="inline-image" src="https://www.mobilexag.de/sites/default/files/images/inline/dispatch-beziehungen_2.png" /></a></div>
      <div class="box__content">Anzeige von Vorgänger-Nachfolgerbeziehungen in mobileX-Dispatch</div>
    </div>
  </li>
</ul>