Doodle's Base Elements

Page banner

A page banner that is displayed once only. It sets a cookie and doesn't show if the cookie is set.
Set your banner text here.
Set your banner link here.

Insert the following snippet into a page to create a banner. The id parameter is optional. Condition can be any expression that evaluates to a boolean.

<ui:include src="pageBanner.xml">
    <ui:param name="id" value="setAnOptionalDOMIdHere"/>
    <ui:param name="cookieName" value="setYourCookieNameHere"/>
    <ui:param name="condition" value="true"/>
    <ui:param name="text" value="Set your banner text here."/>
    <ui:param name="link" value="Set your banner link here."/>
    <ui:param name="ok" value="Set your ok text here."/>
</ui:include>

Tooltip

Tooltip to show additional information
Show me on top
Show me slim on the right
Show me on the bottom
Show me on the left

Popover

Popover for even more information.
This section is not included in baseElements.css - Import it seperately

Show a popover...
with the tick on north west.
Show a popover...
with the tick on south east.

Forms

Forms with multiple input fields and a button section at the end
This field is shorter => col-xs-3
Optional fields work only on inputs from col-xs-3-col-xs-6
optional

A longer block of help text that breaks onto a new line and may extend beyond one line. If it is really needed... cumbersome isn't it?

Outsch... it all wen't wrong - You should fix it

Something wonderful has happened! Let's all have a party
I'm in front
I'm in the back
On the front
and on the back
  • Item 1
  • Item 2
  • Item 1
  • Item 2
  1. Item 1
  2. Item 2
Max: 200 x 100

Lists

Doodle provides the following types of lists

This is an ordered List

  1. First Item
  2. Second Item
  3. We can also embed
    1. Third sub item
    2. Forth sub item

This is an unstyled List

  • First Item
  • Second Item

This is an unorderd triangle-styled List

  • First Item
  • Second Item
  • We can also embed
    • Third sub item
    • Forth sub item

Grid

The grid seperates the content of doodle (basically 836px wide) into 6 columns of 111px each.
Spacings: left & right 30px, between the columns: 20px
46
46
46
46
46
46
46
46
46
46
46
46
112
112
112
112
112
112
178
178
178
178
244
244
244
310
310
112
376
376
442
310
508
244
574
178
640
112
706
46
772

Buttons

Doodle Provides different buttons for different purposes. Only those buttons should be used for any user interactions. The only exception: Links.


Test








If they are busy they look like this:
jQuery-Plugin:
"loading"
Usage:
$("sth").loading() || $("sth").unloading()



Test (1. ist input => fallback)





Alerts

If we want to nag the user about something (errors, warnings, info)
Holy Quacamouleee
Change a few things up and try submitting again.
You successfully read this important alert message.
This alert needs your attention, but it's not super important.

Navigation - Sidebar

All the navigation for manage & about pages
Normal Menu Items here





SubMenus - normally not visible if not active parent, but can be



Again a normal menu item

Here are external Links... with these links you leave this menu





Menus can have icons in them...

Headings

h1 up to h3 are defined as headings. Use them only in these cases:

  • h1 a HERO title, maximal once per page.
  • h2 section title
  • h3 section subtitle
  • h4 Small Header for a paragraph

Hero Title

Section Title

Subtitle of a Section

Small Header for a paragraph


This is the page Title

This is some additional text can contain html (e.g. links)

This is a title of a navigation tab

I am some additinal information, not important but still here Ablenkung - Sag isch nö

This is a title of a navigation tab (optional for example)

I am some additinal information, not important but still here Ablenkung - Sag isch nö

This is a title of a navigation tab

Colors

All the doodle colors on one sight
$dark-blue
$dark-red
$dark-green
$blue
$red
$green
$light-blue
$light-red
$light-green
$lighter-blue
$lighter-red
$lighter-green
$lightest-blue
$lightest-red
$lightest-green


$black
$orange
$dark-grey
$light-orange
$grey
$lighter-orange
$light-grey
$lighter-grey
$lightest-grey
$dirty-white
$white

Tabs

Tabs to show different content
This section is not included in baseElements.css - Import it seperately
  • First Tab
  • Important Tab
  • Active Tab
  • Deactivated Tab
  • Last Tab
  • other stuff

Icons

All Doodle Components are represented by an icon. Here are those icons in different sizes.

12 x 12



15 x 15



16 x 16



18 x 18



20 x 20

Badges

Doodle Logos for some products and features
This section is not included in baseElements.css - Import it separately (in your *.scss via @import "elements/badges")

120 x 120

Loading Indicators

Some Indicators that show ajax activity
Default:


TimeZone selector

Our very own jquery-based timezone-selector
This section is not included in baseElements.css - Import it seperately

Expander

This is a closed expander This is an open expander

This is a BIG closed expander

This is a BIG and open expander

This is a medium closed expander

This is a medium and open expander

This is a small closed expander
This is a small and open expander