Styleanweisungen
Verwenden von UIKit-Klassen in den Templatedateien
Prinzipiell sollten bereits in den .hbs zur allgemeinen Formatierung die UIKit-Klassen verwendet werden. Durch die Kompressionsalgorithmen von Ember werden die .hbs-Dateien automatisch mit Short-Codes der Klassen versehen. Die Verwendung identischer Klassen verursacht also wenig Speicherbedarf.
Besonderheiten bei der Verwendung von UIKit-Klassen
Da UIKit zum Beispiel die uk-grid Klasse erst durch Javascript über das Attribut berechnet und automatisch hinzufügt, ist es notwendig für das Aussehen statischer Seiten, dass die Klasse trotzdem aktiv gesetzt wird:
<div uk-grid>
<div class="uk-grid" uk-grid>
Für eine Reihe weiterer UIKit-Klassen wurden fehlende Definitionen (z.B. Rendern von a-tags als Blockelement) in der app.less ergänzt.
Verwenden von LESS-Variablen
Für viele Elemente wurden Variablen definiert, die sich in der variables.less befinden und zusätzlich in der app.less.
Diese Variablen sollten für eine schnelle Farb- oder Dimensionsanpassung der Elemente in der eigenen LESS-Datei überschrieben werden.
// Global variables // ======================================================================== // // Typography // @global-font-family: Source, -apple-system... @global-font-size: 15px; @global-xxlarge-font-size: 38px; @global-xlarge-font-size: 30px; @global-large-font-size: 24px; @global-medium-font-size: 20px; @global-small-font-size: 14px; @global-emphasis-color: #222; @global-line-height: 18px; // // Base // @base-code-font-family: 'Roboto Mono', monospace; @base-code-font-size: 12px; @base-heading-font-weight: 300; @base-pre-font-size: 12px; @base-pre-padding: 25px; @base-pre-background: @global-muted-background; @base-pre-border-width: 0; @base-pre-border-radius: 0; .hook-base-body() { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } // // Container // @container-max-width: 1380px; @container-small-max-width: 650px; // // Navbar // @inverse-navbar-nav-item-color: @inverse-global-color; @inverse-navbar-nav-item-hover-color: @inverse-global-emphasis-color; @header-height: 80px; // // Nav // @nav-header-font-size: 12px; // // Subnav // @inverse-subnav-item-color: @inverse-global-color; @inverse-subnav-item-hover-color: @inverse-global-emphasis-color; // // Tab // @tab-item-padding-horizontal: 20px; @tab-item-padding-vertical: 9px; @tab-item-border-width: 2px; @tab-item-font-size: 12px; .hook-tab-item() { line-height: 20px; } // // Table // @table-header-cell-font-size: 12px; // // Label // @label-font-size: 12px; // // Text // .hook-text-lead() { font-weight: 300; } .hook-text-large() { font-weight: 300; } // // Utility // @inverse-logo-color: @inverse-global-emphasis-color; @inverse-logo-hover-color: @inverse-global-emphasis-color; // // Off-canvas // @offcanvas-bar-background: #fff; @offcanvas-bar-color-mode: dark; // // Inverse // @inverse-global-color: fade(@global-inverse-color, 80%); @inverse-global-muted-color: fade(@global-inverse-color, 60%); // // Colors // @global-color: #666; @global-emphasis-color: #333; @global-muted-color: #999; @global-link-color: #1e87f0; @global-link-hover-color: #0f6ecd; @global-inverse-color: #fff; @global-primary-color: #1e87f0; @global-secondary-color: #999; @primary-color: rgb(220,0,0); @primary-color-light: rgba(200,0,0,0.3); @primary-link-color: rgb(150,0,0); @primary-hover-color: rgb(200,0,0); @primary-background-color: rgb(160,0,0); @primary-color-active: rgb(255, 80, 80); // // Backgrounds // @global-background: #fff; @global-muted-background: #f8f8f8; @global-primary-background: #1e87f0; @global-primary-dark-background: #0f6ecd; @global-secondary-background: #222; @global-success-background: #32d296; @global-warning-background: #faa05a; @global-danger-background: #f0506e; // // Borders // @global-border-width: 1px; @global-border: #e5e5e5; // // Box-Shadows // @global-small-box-shadow: 0 2px 8px rgba(0,0,0,0.08); @global-medium-box-shadow: 0 5px 15px rgba(0,0,0,0.08); @global-large-box-shadow: 0 14px 25px rgba(0,0,0,0.16); @global-xlarge-box-shadow: 0 28px 50px rgba(0,0,0,0.16); // // Spacings // // Used in margin, section, list @global-margin: 20px; @global-small-margin: 10px; @global-medium-margin: 40px; @global-large-margin: 70px; @global-xlarge-margin: 140px; // Used in grid, column, container, align, card, padding @global-gutter: 30px; @global-small-gutter: 15px; @global-medium-gutter: 40px; @global-large-gutter: 70px; // // Controls // @global-control-height: 40px; @global-control-small-height: 30px; @global-control-large-height: 55px; // // Z-index // @global-z-index: 1000; // // Sidebar // @sidebar-left-width: 240px; @sidebar-left-width-xl: 300px; @sidebar-right-width: 200px; @sidebar-right-left: 0px; @sidebar-right-left-xl: 60px; // // Form // @internal-form-checkbox-image: "/images/form-checkbox.svg";
Breakpoint-Klassen
UIKit verwendet @xl, @l, @m und @s als Klassenerweiterung für Breakpoints. Diese wurden unverändert beibehalten.
Für die Klassen uk-hidden@... und uk-visible@... wurde eine alte UIKit-Klasse aus UIKit2 zusätzlich definiert, um Elemente zum Beispiel nur für die Tabletansicht anzuzeigen.
Eigene Klassen- und Style-Definitionen
Die Klassen in der Standard-Webapp sind nicht nach BEM-Methodologie (Block Element Identifier) mit dem Doppel-"-" aufgebaut, folgen aber der Nomenklatur im Aufbau als Blockelemente → Elemente → "Modifier" (s. BEM Einführung ).
Das Blockelemente ohnehin aus HTML5 geerbt werden (und im Templateaufbau verwendet werden), Elemente in Ember mit Komponentenfunktionalität erkennbar sind und
Ember je nach Komponente eigene „Modifier“-Klassen ergänzt, kann auf BEM verzichtet werden, ohne an Übersichtlichkeit zu verlieren.
Es bleibt dem Designer frei, für seine eigene Notation der BEM-Methodik zu folgen.
Klassen im Standardtemplate
Die Gliederung im Template (Positionen) erfolgt mit abgekürzten Templateklassen (tm-), zum Beispiel tm-top oder tm-bottom.
Die Gliederung der Seite folgt den W3C-Empfehlungen zum Seitenaufbau.