Folgende Stil-Optionen stehen zur Verfügung:
I. Page Class Suffixes
- slider
- Artikel mit 100% Breite; besonders für Seiten mit Galerien geeignet.
- header-img
- Header mit vollseitigem Bild > siehe optionen > header image; besonders für die Startseite geeignet.
- cards
- Seite mit 100% Breite; Artikel im Cards-Layout; nur für category-blog und featured Seiten.
- masonry
- Seite mit 100% Breite; Artikel im Masonry-Layout; nur für category-blog und featured Seiten.
II. Module Class Suffixes
1. Farben
- ohne suffix, white
- Standard, komplett weißer Hintergrund
- concrete
- Grauer Titel-Hintergrund
- jugfulda
- Titel-Hintergrund mit dem Jug-Fulda Blau
- primary
- Hintergrund komplett in der @primary Farbe
- accent
- Hintergrund komplett in der @accent Farbe
- primary-title
- Titel-Hintergrund in der @primary Farbe
- accent-title
- Titel-Hintergrund in der @accent Farbe
2. Transparenzen
- transparent
- Transparenter Hintergrund mit dunkler Text-Farbe; für helle Flächen geeignet.
- dark-body
- Transparenter Hintergrund mit heller Text-Farbe; für dunkle Flächen geeignet.
3. Extras
- search
- Module chrome des search Moduls; auf die Gestaltung der search Position abgestimmt.
- menu-style
- Flächige Menüs, mit den weiteren Modul-Farben kombinierbar.
- slider
- Für Module mit flickity slider in der slideshow position geeeignet.
- slider-dots
- Für Module mit flickity slider und dot navigation in der slideshow position geeeignet.
- flickity
- Für Module mit flickity slider in weiteren positionen (z.B. sidebar) geeeignet.
- flickity-dots
- Für Module mit flickity slider und dot navigation in weiteren positionen (z.B. sidebar) geeeignet.
III. Layouts
Module des Typs Eigener Inhalt können mit dem alternativen Layout imagecard gestaltet werden. Das Hintergrundbild des Moduls wird dann im Titel dargestellt.
IV. Variablen der Less Dateien
Farbvariablen
Die Farbanmutung und -wirkung der Seite wird besonders von dem Farbpaar @color-primary und @color-accent bestimmt. @color-primary wird in header, nav und footer verwendet. @color-accent wird für buttons, links und weitere, mit Aktionen verbundenen tags eingesetzt. Die gesamte Farbigkeit des templates kann über folgende Variablen der Less-Datei j-variables.less gestaltet werden:
// body and basic text colors
@color-body: @smoke;
@color-body-copy: @concrete-darker;
@color-heading: @concrete-dark;
@color-subheading: @concrete;
// alert boxes
// warning
@color-warning: @colorOrange500;
// error
@color-error: @colorRed500;
// success
@color-success: @colorLightGreen500;
// info
@color-info: @colorBlue500;
// primary- und accent-color ala material design
@color-primary: @colorIndigo500;
@color-accent: @colorAmber500;
// brand und accent text color je nach primary und accent color
@color-brand-text: @smoke;
@color-accent-text: @smoke;
// section colors
@color-slider-back: @colorBlueGrey50;
@color-top-row-back: @smoke;
@color-bottom-row-back: @colorBlueGrey100;
@color-aside-back: @smoke; // on desktop, on mobile > @primary-color
@color-breadcrumbs-back: @colorIndigo300;
Die hier verwendeten Farbvariablen sind in der Datei j-palette.less definiert. Es können natürlich auch eigene Farbwerte verwendet werden. Abschließend muss die Datei j-template.less neu kompiliert werden, damit die aktuellen Farbeinstellungen wirksam werden.
Headline Type Scale
// responsive type scale mixin
// 3 heading scale modes
@ratio-default: 1.20; // mobile scale
@ratio-medium: 1.25; // tablet and medium desktop scale
@ratio-large: 1.33; // large desktop scale
// font scale:
// 1.067 — Minor Second
// 1.125 — Major Second
// 1.200 — Minor Third
// 1.250 — Major Third
// 1.333 — Perfect Fourth
// 1.414 — Augmented Fourth
// 1.500 — Perfect Fifth
// 1.618 — Golden Ratio
Flex Grid
// flex grid mixin variables
// columns
@column-number: 12;
// gutters
@gutter: .5em; // not on mobile
@space: .5em; // always