Erfahrungen & Bewertungen zu Rocky Mputu

Gestaltungsrichtlinie

Dies ist der zentrale Ort aller Komponenten. (EN)

Classes

Es gibt einige Kernklassen, die das Layout und das Design definieren. Sie sind global und nicht an ein bestimmtes Modul gebunden.

Alignment Beschreibung
.center Add this class to center content.
.center-mobile Center content on mobile devices only.
.center-tablet Center content on tablets and mobile devices.
.middle Align content vertically when height is unknown.
Backgrounds Beschreibung
.bg-dark Solid background where "dark" can be replaced with "light", "primary"...
.bg-gradient-blue Gradient background where "blue" can be replaced with "cyan", "green"...
.bg-image-01 Image-based backgrounds where "01" can be replaced with "02", "03"...
.bg-pattern-01 Pattern-based backgrounds with SVG where "01" can be replaced with "02", "03"...
.overlay Adds an overlay with opacity on top of image-based backgrounds.
Sizes Beschreibung
.full-screen Adding this class will make sure the module goes full screen.
.full-width This class will make sure the element goes full width.
.full-width-mobile Useful if you'd like an element to go full width only on mobile.
.full-width-tablet Useful if you'd like an element to go full width on tablets and mobile devices.
.max-width-s Set a small maximum width of an element.
.max-width-m Set a medium maximum width of an element.
.max-width-l Set a large maximum width of an element.
Spacing Beschreibung
.padding This is the main inner spacing of a module.
.margin-bottom Add spacing below an element inside a module.
.margin-top Add spacing above an element inside a module.

Grid

Das folgende einfache Raster basiert auf 5 Spalten. Sie können als Klasse "no-gutter" hinzufügen, um den Abstand zwischen den Spalten zu entfernen.

Beispiel: <div class="row">
  <div class="col-one-third"></div>
  <div class="col-one-third"></div>
  <div class="col-one-third"></div>
</div>

Sie können auch ungleiche Spalten haben.

Beispiel: <div class="row">
  <div class="col-two-thirds"></div>
  <div class="col-one-third"></div>
</div>

Colors

Das Farbschema soll einfach sein, ohne zu viele Variationen. Wird in HEX und einer Produktionsvariablen (VAR) angezeigt.

Color Hex Var
#5966d2 $color-primary
#63ce63 $color-green
#ffbf2f $color-orange
#e52b20 $color-red
#24263a $color-text
#f6f6f9 $color-gray-light
#ececee $color-gray-medium
#ccced0 $color-gray-dark

Eine Sammlung subtiler Farbverläufe ist ebenfalls verfügbar.

Gradient Class
.bg-gradient-blue
.bg-gradient-cyan
.bg-gradient-green
.bg-gradient-indigo
.bg-gradient-olive
.bg-gradient-pink
.bg-gradient-sienna
.bg-gradient-violet

Icons

Die einfach zu bedienenden Materialicons von Google eignen sich hervorragend für Webprojekte. Basierend auf dem 8-Punkte-Raster werden sie vorzugsweise mit einem Vielfachen von 24px angezeigt.

Beispiel: <i class="material-icons">face</i>

Typography

Wir nutzen Lato als Primärschrift. Nachfolgend sind alle Standardstile für Überschriften aufgeführt.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lead

Der Hauptzweck des Lead-Stils besteht darin, Überschriften als Untertitel zu unterstützen.

Beispiel: <p class="lead"></p>

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.

Paragraph

With an increased font-size and line-height, the paragraph style is great for readability.

Beispiel: <p class="paragraph"></p>

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."

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Lists

Below is the default style for unordered lists.

  • List item one.
  • List item two.
  • List item three.
  1. List item one.
  2. List item two.
  3. List item three.

Sie können auch die Klasse "Inline" hinzufügen, um horizontale Listen zu erstellen.

Buttons

Buttons are divided into types: primary, secondary and other states such as disabled.

Beispiel: <a href="#" class="button button-primary" role="button">Primary</a>
<a href="#" class="button button-secondary" role="button">Secondary</a>
<a href="#" class="button button-disabled" role="button">Disabled</a>

Um die Größe zu ändern, können Sie die Klasse "button-l" für einen großen Knopf hinzufügen. Es gibt vier vordefinierte Größen: Groß, Standard, Mittel und Klein.

Forms

Eingabefelder sind in Typen und Zustände unterteilt. Der folgende Code erstellt zwei Spalten mit einer Beschriftung links und einer Eingabe rechts.

Beispiel: <form>
  <div class="form-group">
    <label for="name">Your Name:</label>
    <input id="name" type="text" name="name">
  </div>
</form>
Maximal 500 Zeichen

Alerts

Verwenden Sie Warnungen, um Benutzern schnelles Feedback zu ausgeführten Aufgaben zu geben.

Beispiel: <div class="alert alert-success" role="alert">Great! This is awesome.</div>

Tables

Eine aus Überschriften und Zeilen bestehende Tabelle ist nützlich, um viele Elemente oder Inhalte mit messbaren Daten anzuzeigen.

Name Modified Size
Documentation Today 12.7 MB
Gestaltungsrichtlinie Yesterday 2.4 MB
Templates Yesterday 4.5 MB

Cards

Eine Karte ist ein großartiger Inhaltsbehälter.

Beispiel: <div class="card card-content">
  <h5>Card Title</h5>
  <p class="paragraph">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
</div>
Card Title

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.

Dark Mode

Wenn Sie ein Modul dunkel schalten möchten, fügen Sie dem Abschnitt die Klasse .dark hinzu.

Beispiel: <section class="bg-dark dark"></section>
Card Title

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.

Kundenbewertungen & Erfahrungen zu Rocky Mputu. Mehr Infos anzeigen.