d_ Design System

The d_ Design System is based on Twitter Bootstrap 4.+ extended with our own advanced features. For in depth detail information always refer to Twitter Bootstrap. The idea behind the +WD Design System is to uniform our frontend code and make it modular to creater faster any needed element.

Code guidelines

The majority of the styleguide is built using single-purpose classes. Single-purpose classes are CSS classes which declare a single value for a single style property, therefore performing a single purpose. The primary benefit here is that when you see a single-purpose class in HTML, you know exactly how it affects that markup but more importantly, you can change it without affecting any other views.

You can use these single-purpose CSS classes anywhere you wish and as often as you wish, whether that means inside a component or directly in a view template.

These single-purpose classes make up about 80% of the syleguide codebase. The rest is made up of a set of reusable utility classes for performing common tasks and inline styles, for non reusable, view specific styles.

File naming

All folder names should be plural. All component filenames should be singular.

			  
				  /* Do */
				  @import  'button.scss';
				  @import  'font-size.scss';

				  /* Don't */
				  @import  'buttons.scss';
				  @import  'font-sizes.scss';

Class naming

Each of our CSS classes adhere to a strict naming convention. Once you take a few minutes to understand the naming convention, you will be able to guess any CSS class name easily.

			  
				  /* stylePropertyName-valueName */
				  .float-left           { float: left; }
				  .textAlign-center     { text-align: center; }
				  .verticalAlign-middle { vertical-align: middle; }

Scales

Style properties which accept custom values often adhere to a scale. There are 3 types of scale: size scale, lightness scale and fixed scale.

			  
				  /* Size scale */
				  .fontSize-xl   { font-size: 40px; }
				  .fontSize-l    { font-size: 32px; }
				  .fontSize-m    { font-size: 16px; }
				  .fontSize-s    { font-size: 14px; }
				  .fontSize-xs   { font-size: 12px; }

				  /* Lightness scale */
				  .color-blue-xd { color: ExtraDarkBlue; }
				  .color-blue-d  { color: DarkBlue; }
				  .color-blue    { color: blue; }
				  .color-blue-l  { color: LightBlue; }
				  .color-blue-xl { color: ExtraLightBlue; }

				  /* Fixed scale */
				  .fontWeight-1  { font-weight: 100; }
				  .fontWeight-2  { font-weight: 200; }
				  .fontWeight-3  { font-weight: 300; }
				  .fontWeight-4  { font-weight: 400; }
				  .fontWeight-5  { font-weight: 500; }
				  .fontWeight-6  { font-weight: 600; }
				  .fontWeight-7  { font-weight: 700; }
				  .fontWeight-8  { font-weight: 800; }
				  .fontWeight-9  { font-weight: 900; }

Plugins

Bootstrap Datepicker

https://bootstrap-datepicker.readthedocs.io/en/latest/

Chart.js

http://www.chartjs.org/

Count up

https://inorganik.github.io/countUp.js/

AOS - Animate on Scroll

https://michalsnik.github.io/aos/

Parallax Scrolling

https://github.com/nk-o/jarallax

Smooth Scrolling

https://github.com/cferdinandi/smooth-scroll

Typed JS

https://github.com/mattboldt/typed.js/

Select

https://developer.snapappointments.com/bootstrap-select/

Image Popup

https://github.com/dimsemenov/Magnific-Popup

Autoresize Textfields

https://github.com/jackmoore/autosize

Dragable

https://github.com/Shopify/draggable

Dropzone Upload

https://www.dropzonejs.com/

List filtering, sorting

https://listjs.com/

Steps wizard

https://github.com/techlab/SmartWizard/

Steps wizard

http://manos.malihu.gr/jquery-custom-content-scroller/

Slider

https://github.com/seiyria/bootstrap-slider

Structure

Page

Grid

12col Grid

col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1

4col Grid

col-3
col-3
col-3
col-3

Sections

wd-section-xl
wd-section-l
wd-section-m
d-section-s
wd-section-xs

Colors

wd-bg-blue-100
200
300
400
500
600
700
800
900
wd-bg-green-100
200
300
400
500
600
700
800
900
wd-bg-red-100
200
300
400
500
600
700
800
900
wd-bg-orange-100
200
300
400
500
600
700
800
900
wd-bg-gray-100
200
300
400
500
600
700
800
900
100
200
300
400
500
600
700
800
900

Background Colors

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent

Shadows

No shadow
Small shadow
Regular shadow
Larger shadow

Opacity

Borders

Basic

Radius

... ... ... ... ... ... ... ...

Fonts

Headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

Page Heading

Edit Bootstrap heading

Fancy display heading With faded secondary text

Divided Header

Divider heading

Background Header

Music. Live.

Live recordings of your favorite artists before
their hit albums drop.

Display Headings

Display 1

Display 2

Display 3

Display 4

Lead

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Text highlight

Whether consumers or developers, the end users of software are human beings who care about what's in the software. When the software changes, people want to know why and how.

Whether consumers or developers, the end users of software are human beings who care about what's in the software. When the software changes, people want to know why and how.

Whether consumers or developers, the end users of software are human beings who care about what's in the software. When the software changes, people want to know why and how.

Whether consumers or developers, the end users of software are human beings who care about what's in the software. When the software changes, people want to know why and how.

Whether consumers or developers, the end users of software are human beings who care about what's in the software. When the software changes, people want to know why and how.

Content

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Colors

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

Color schemes

.wd-text-blue-100

.wd-text-blue-200

.wd-text-blue-300

.wd-text-blue-400

.wd-text-blue-500

.wd-text-blue-600

.wd-text-blue-700

.wd-text-blue-800

.wd-text-blue-900

.wd-text-green-500

.wd-text-red-500

.wd-text-orange-500

.wd-text-gray-500

Link Colors

Primary link

Secondary link

Success link

Danger link

Warning link

Info link

Light link

Dark link

Muted link

White link

More Link

Read more

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Body content

Header 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Header 2

Header 3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Header 3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Header 4

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Header 5

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Lists

Unstyled

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Inline

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

Meta list

Numbered list

  1. Change your password as soon as possible. Avoid using your name, username, mobile number, birthday, or any other personal information in your new password. If you have used the same password for other services, we encourage you to change those passwords to something unique as well.
  2. Verify that the email address and mobile number associated with your account are accurate on your Profile page. You can request that a password reset link be sent to you via email by clicking Forgot password? on the sign in screen.

Images

Responsive images

alt-text

Image thumbnails Square

alt-text

Image thumbnails Round

alt-text

Avatar

...
...
...
...
...
...
...
...
...
...
...
...

Avatar Status Indicator

Add an online or offline status indicator to show users availability.

...
...

Avatar Initials

You wont always have an image for every user, so easily use initials instead.

CF
CF
CF
CF
CF
CF

Avatar Group

Easily group avatars of any size, shape and content with a single component. Each avatar can also use an to link to the corresponding profile.

...
...
...
...
...
...
...
...
...
...

Image Caption

A generic square placeholder image with rounded corners in a figure.
A caption for the above image.
A generic square placeholder image with rounded corners in a figure.
A caption for the above image.

Image Ratio

Ratio 16:9
Ratio 3:2
Ratio 4:3
Ratio 1:1

Image Overlay

Dark Overlay
Light Overlay
Gradient Overlay
Color Overlay

Image Overlay

Image
This element has an bg-image

Video Image Overlay

Image

Cover

Sets the background-image property to cover.

Device

Easily wrap your screenshots in iPhone X or Macbook device frames or create combos of both. iPhone X screenshot should be 720 x 450px or of the same ratio. Macbook screenshot should be 500 x 1080px or of the same ratio.

... ...
... ...
... ...

Tables

Basic

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped rows

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Hoverable rows

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Small table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Meta list

Address
Street/No Konradstrasse 17
ZIP/City Zurich
Country Switzerland

Alerts

Basic

Additional content

Intext alert

Note: If you didn’t receive your confirmation code, try these troubleshooting tips or send us a note so we can help!

Important: If you didn’t receive your confirmation code, try these troubleshooting tips or send us a note so we can help!

Remember: If you didn’t receive your confirmation code, try these troubleshooting tips or send us a note so we can help!

Badges

Pill badges

Primary Secondary Success Danger Warning Info Light Dark

Pill badges soft

Primary Secondary Success Danger Warning Info Light Dark

Links

Primary Secondary Success Danger Warning Info Light Dark

Circle Numbers

1 2 3 4 5 6 7 8 9 10

1 2 3 4 5 6 7 8 9 10

1 2 3 4 5 6 7 8 9 10

Chip

Contact Person John Doe
Contact Person Anna Smith
Contact Person Lara Lim

Breadcrumb

Basic

Buttons

Basic

Outline

Sizes

Rounded

Round Button

Social Button

States

Cards

Basic

Card image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Go somewhere
Card image cap
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Go somewhere
Card image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Go somewhere
Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
2 days ago
Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card’s content.

Card link Another link
This is some text within a card body.
This is some text within a card body.
Account
12 Articles

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.

How do I get started with +WoundDesk?

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.

Whitepaper - Security at +WoundDesk
University of Geneva, Switzerland
25 pages, PDF, 2.1MB

Reliability and accuracy of wound surface measurement using mobile technology.

Download
Whitepaper - Security at +WoundDesk
The cabinet of the future @ Palexpo

Geneva/Switzerland, 03:55:01

View

Card deck

User Guides

Tips and tricks for beginners
and experts alike.

Updates

Our latest added features
and bug fixes.

Roadmap

What are we working at the moment and what is planed for the future.

No Data

Basic

There is no data yet.

Create first a new patient.

Collapes

Accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Dropdown

Basic

Action Another action Something else here
Action Another action Something else here
Action Another action Something else here

Link

Action Another action Something else here

Menu

Dropdown item text Action Another action Disabled link
Dropdown header
Something else here

Forms

Basic

We’ll never share your email with anyone else.
$
%
Please enter the details of your request. A member of our support staff will respond as soon as possible. Please include steps to reproduce your issue. This will help our agents answer your question more quickly.
Sample Data, screenshots etc. that might help us resolve your request. We only accept one file attachment per request. The maximum file size is 3MB. If you wish to attach multiple files, please attach a ZIP file containing the necessary files.

Sizes

Input Group

Action Another action Something else here Separated link

Material Input

Search

Others

Radio cards

Switch

Number stepper

Jumbotron

Basic

Fluid jumbotron

This is a modified jumbotron that occupies the entire horizontal space of its parent.

It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

Background image

Fluid jumbotron

This is a modified jumbotron that occupies the entire horizontal space of its parent.

It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

Media object

Basic

...
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media list

  • ...
    List-based media object
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  • ...
    List-based media object
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media header

Edit Dr Peter Muller

Dept. Woundcare, Station A11

Media User

Edit Dr Peter Muller

Dept. Woundcare, Station A11

Modal

Basic

Feature

Navs

Basic

Right aligned

Nav Bordered

Nav Bordered Stacked

Tabs

First data set
Second data set
Third data set
Forth data set

Pills

Vertical pills

First data set
Second data set
Third data set
Forth data set

Navbar

Basic

Color schemes

Header Banner

Basic

 Take part in the +WoundDesk Ignition program and get a 35% discount for under 50 monthly active users!

Pagination

Basic

Icons

Popovers

Info

This is a normal sentence with a glossary word who needs more in depth information.

Progress

Basic

Marketing

33%

25%

Tooltips

Basic

Procent List

Basic

  • List average 61.7%
  • Industry average61.7%

Basic

Basic

Take a moment to review and agree to the Froala’s Privacy Policy.

Support

Basic

Print page

Share

			  
				  
			  
		  
			  
				  // JavaScript Code
				  function shareOnFacebook(url){
					  window.open('https://www.facebook.com/sharer/sharer.php?u='+url, 'facebook_share', 'height=320, width=640, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no');
				  }
				  function shareOnLinkedin(url, title){
					  window.open('https://www.linkedin.com/shareArticle?mini=true&url='+url+'&title='+title, 'linkedin_share', 'height=320, width=640, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no');
				  }
				  function shareOnTwitter(url, title, via){
					  window.open('https://twitter.com/intent/tweet?text='+title+'&url='+url+'&via='+via, 'twitterk_share', 'height=320, width=640, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no');
				  }
				  function shareOnMail(subject, body){
					  window.location.href = 'mailto:?&subject='+subject+'&body='+body;
				  }

Template

Basic
©2023 Verband Musikschulen Thurgau, Zeughausstrasse 14a, 8500 Frauenfeld — 052 720 85 53 — info@musikthurgau.ch