diff options
-rw-r--r-- | doc/design_guidelines | 52 |
1 files changed, 33 insertions, 19 deletions
diff --git a/doc/design_guidelines b/doc/design_guidelines index e74fe942..defc626c 100644 --- a/doc/design_guidelines +++ b/doc/design_guidelines @@ -1,33 +1,47 @@ Design Guidelines ================= -Buttons generell rechts wenn möglich. +Buttons on the right-hand side if possible. -Reihenfolge von links nach rechts: erst Nebenfunktion (cancel etc) dann Hauptfunktion ganz rechts (save etc) +Button order from left to right: secondary action (cancel etc), primary action (save etc) -Einzelne Buttons: normale Größe, glyphicon (außer bei Nebenfunktion), Text +Single buttons: normal size, glyphicon and text +Multiple buttons with the same action (e.g. in a table): btn-sm, glyphicon only, no text -mehrere Buttons mit selber gleicher Funktion (zB. in Tabelle): btn-sm, nur glyphicon ohne Text - -Button Farben: - Aktionen mit irreversiblen Folgen (zB. Delete) = Rot - Hauptfunktion (zB. Save) = Blau - Hinzufügen = Grün - Sonderfunktionen (zB. send test mail) = Gelb - Nebenfunktion (zB. cancel) = Weiß +Button colors: + Action with irreversible consequences (e.g. delete) = red (btn-danger) + Primary action (e.g. save) = blue (btn-primary) + Add/Create = green (btn-success) + speciel actions (e.g. send test mail) = yellow (btn-warning) + Secondary action (e.g. cancel) = white (btn-default) + +Prefered glyphicons: + add (create) = glyphicon-plus + add (assign) = glyphicon-share-alt + delete = glyphicon-trash + remove = glyphicon-remove + save = glyphicon-floppy-disk + edit = glyphicon-edit + cancel = no glyphicon + reset = glyphicon-refresh + help = glyphicon-question-sign + download = glyphicon-download-alt + settings = glyphicon-cog -Tabellen sortierbar machen mit Stupidtable-Plugin (wenn sinnvoll) +Tables should be sortable if it makes sense (using the stupidtable-plugin). +Every column should have a heading. + +Bootstrap styled checkboxes and radiobuttons -Checkboxen und Radio Buttons im Bootstrap Style +Modals with an action should have a cancel button. +Info-modals without an action: no buttons in footer. only x-button in the top right corner to close the modal. -Titel des Moduls immer ganz oben +Modals instead of confirm() -Modals mit Aktion haben cancel Button (“cancel | save”) +Module heading in the top left corner -Info-Modals ohne Aktion haben keine Buttons unten und stattdessen nur ein x oben rechts +Subheadings in panels -Modals statt confirm() +Saving changes only after using the save button -Unterüberschriften in Panels für schönere Gliederung -Speichern erst mit Klick auf Save Button |