Skip to content

Design Standard

Jump to bottom
Hannes Kohlsaat edited this page Nov 23, 2018 · 2 revisions

Design Standard

For the HART project we choose to use the bootstrap front-end framework. It is imported automatically as a ruby gem. A little bit of documentation for usage in rails applications can be found in the README of the bootstrap-rubygem project. Documentation for bootstrap in general can of course be found on the official bootstrap website.

For simplicity, we just stick with most of the bootstrap defaults. Many statements of this guide are written as if they are fixed forever. But everybody is allowed to change the design of the application as long as they update this document also.

Color Palette

We use the default color settings of bootstrap. Colors can be changed by setting new values to the corresponding SASS-variables. An extensive list of all available variables can be found here. According to this document, the default colors are set as follows:

$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;

Font

We use bootstrap's default fonts. Again, the defaults can be found in the variables document of the bootstrap-rubygem project.

// Fonts
$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base:            $font-family-sans-serif !default;

Text

Every piece of text should be enclosed by a descriptive HTML-tag, so the appearance can be changed for the whole site in one place. Therefor here are a few rules for adding text to the application:

  • Page headings: h1, e.g. <h1>Design Standart</h1>
  • Headings in general: h2, e.g. <h2>Text</h2>
  • Intermediary headings: h3, e.g. paragraph headings
  • Captions: h3, e.g. above diagrams
  • Text: p, e.g. <p>Every non-special piece of text should go in here.</p>

Icons

Buttons

When it comes to buttons, we use buttons as provided by bootstrap. There's a whole well written page in the bootstrap documentation dedicated to buttons only. For quick reference a little bit of HTML describing buttons is reproduced here. Please look at the buttons' documentation linked to above for a glance of the look.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

If you have more than one button and your buttons are logically associated, have a look at the button group documentation. Again, for quick reference a small example:

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

Links

Links should work just fine with bootstrap.

<a href="some/url">link text</a>

There is nothing special to care about.

Menus and other components

For menus you might want to look at bootstrap's dropdowns, modals (overlaying dialogs), navs, or any other component bootstrap offers.

Clone this wiki locally