Guidelines
    Overview
  • Welcome to RamBase Guidelines
  • Applications and components
  • RamBase client overview
    Design guidelines
  • Colors & borders
  • Layout
    • Standard layouts
  • RamBase Application overview
    • Context menu
    • Expanders
    • Splitter
    • Tab controller
    Development guidelines
  • Setup environment
  • Creating applications
    • Creating your first application
    • AppEditor
    • Context menu
  • Creating components
    • Creating your first component
    • Component layout
    • Component data service
    • Keyboard handling
  • APIs
    UI Elements
  • Alertbox
  • Button
  • Checkbox
  • Complex dropdown
  • Date
  • Datetime
  • Dropdown
  • Email
  • Grid
  • Icons
  • Navigate
  • Number
  • Password
  • Popover
  • Popup
  • Progressbar
  • Radiobutton
  • Textarea
  • Textfield
  • Toastr
  • Treeview

Colors and borders

RamBase offers a full color palette for each theme available in the solution. The colors are suited to work harmoniously with colors defined across themes too.

There is a set of colors for each theme, and these should be used to assure that colors are always optimized to follow the selected theme.


Background colors

A background class can be used to highlight or differentiate content.

When using the background CSS classes, only the property background is set.


Background CSS class Preview
Dark .dark_bg
Light .light_bg

Notification colors

Colors used when showing notification. These color will change based on theme, and you should NOT assume that the color will be the same.

When using the notification CSS classes, the properties background-color and color is set.


Notification CSS class Preview
Information .rb-info
Success .rb-success
Warning .rb-warning
Error .rb-error

General colors

Colors used to distinguish elements. These color will change based on theme, and you should NOT assume that the color will be the same.

When using the status CSS classes, the properties background-color and color is set.


Color CSS class Preview
Color 1 .color-1
Color 2 .color-2
Color 3 .color-3
Color 4 .color-4
Color 5 .color-5
Color 6 .color-6
Color 7 .color-7
Color 8 .color-8
Color 9 .color-9
Color 10 .color-10

Status colors

Many of the RamBase objects is presented with a status. The status usually describes where in the flow it is.

When using the status CSS class, the properties background-color, color and border is set.


Status CSS class Preview
Status 0 .status0
0
Status 1 .status1
1
Status 2 .status2
2
Status 3 .status3
3
Status 4 .status4
4
Status 5 .status5
5
Status 6 .status6
6
Status 7 .status7
7
Status 8 .status8
8
Status 9 .status9
9
Status D .statusD
D

Borders

You can use class to get border around your content. make sure to have a container for content. if you need a border only to a side Ex: border bottom. we have four different class to get that.

When using the border CSS classes, the properties border-style, border-color and border-width is set.


Border CSS class Preview
All border .rb-border
Top border .rb-border-top
Right border .rb-border-right
Bottom border .rb-border-bottom
Left border .rb-border-left