A CSS GUIDELINE - 2024 – Flowfactory

A CSS GUIDELINE - 2024
Written by
Josefine Kihlström & Lisa Pousette Blomé

with additional help from

Hamiat Nalwanga

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Chapters

Why should I customize a customer application?
The CSS I'm applying isn't working, what am I doing wrong?
The declaration of !important
Targeting different elements that share the same class
Dialog buttons
Message box buttons
Button controls
Grid buttons
Search report button
Grid - general styling
Sidebar navigation
Top bar with tabs
Input fields
Checkboxes
Toast message
Fonts
Repeater
Groups
Scrollbar
Overlay background
Message box & Dialog
Login Page
Signup Page
General

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Why should I customize a customer application?

Customizing the look and feel of an application for a customer can really make it stand out. It's like giving your application its own unique personality that users can connect with.

By adding special styling you're not just making your application look pretty, you're making it feel like it was made just for them. This helps users feel more attached to the application and keeps them coming back for more.

However, two things to keep in mind when customizing an application:

It's the customers application, it's not yours, so make sure it matches their graphic profile and what they represent.
Never choose style over substance. The application must be user friendly and often needs to meet requirements for accessibility. If something looks good but is not user friendly don't use it.

Please note!

The code examples below do not necessarily represent what is shown in the images. The pictures only show what is possible to do.

For more information on how to style your elements, see the following links:

https://www.w3schools.com/css/default.asp

The CSS I'm applying isn't working, what am I doing wrong?

There could be several reasons why the CSS you're applying isn't working:

Syntax Errors: Double-check your CSS syntax for any typos, missing semicolons, or curly braces.
Selectors: Ensure that your CSS selectors are correctly targeting the elements you want to style.
Specificity: Make sure your CSS rules have sufficient specificity to override any conflicting styles.
Cascade: Verify that there are no other CSS rules overriding the styles you're applying.
File Path: Check that your CSS file is linked as the Active CSS in the Studio.
Browser Compatibility: Confirm that the CSS properties you're using are supported by the browsers you're testing in.
Cache: Clear your browser cache to ensure you're viewing the most recent version of your CSS.
Inspect Element: Use your browser's developer tools to inspect the element and see which styles are being applied or overridden.

By methodically checking these possibilities, you should be able to identify why your CSS isn't working as expected.

The declaration of !important

In CSS, the !important declaration is used to give a specific style rule the highest priority, overriding any other styles applied to the same element. When you use !important after a CSS property value, it tells the browser to prioritize that rule above all other conflicting rules, regardless of their specificity or order of declaration.

Here's how it works:

.example {
  color: blue !important;
}

In this example, the text color of elements with the class example will always be blue, even if there are other conflicting styles targeting the same element.

While !important can be helpful for quick fixes or overriding styles from third-party libraries, it's generally recommended to use it sparingly because it can lead to unexpected behavior and make CSS harder to maintain. Overusing !important can also make it challenging to debug and modify styles later on. It's better to rely on CSS specificity and cascade principles to manage styles whenever possible.

Targeting different elements that share the same class

To target different elements like <p>, <h1>, and <span> with different styling, all of which share the same class of 'CLASSNAME', you can utilize CSS selectors combined with the shared class name. Here's how you can do it:

.CLASSNAME p {
  color: red;
}

.CLASSNAME h1 {
  color: blue;
}

.CLASSNAME span {
  color: green;
}

In this example, .CLASSNAME is the shared class applied to elements of <p>, <h1>, and <span>. By appending the specific element selectors (p, h1, span) after .CLASSNAME, you can target each type of element individually and apply different styling as needed.

This approach allows you to maintain consistency by styling elements with the same class name differently based on their tag types, providing flexibility in design while still adhering to a unified class structure.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Dialog buttons

OK button:

body .FlowDialog .dx-toolbar-button:first-child>.dx-toolbar-item-content>.dx-button {
    background-color: #9400d5!important;
    border-radius:50px;
}

/* On hover */
body .FlowDialog .dx-toolbar-button:first-child>.dx-toolbar-item-content>.dx-button:hover {
    background-color: #5731b9!important;
}

Cancel button:

body .FlowDialog .dx-toolbar-button:last-child>.dx-toolbar-item-content>.dx-button {
    background-color: #9400d5!important;
    border-radius:50px;
}

/* On hover */
body .FlowDialog .dx-toolbar-button:last-child>.dx-toolbar-item-content>.dx-button:hover {
    background-color: #5731b9!important;
}

Target Dialog button with specific text:

/* Cancel button */
div [aria-label="Cancel"] .dx-button-content {
  background-color: pink!important;
}

/* On hover */
div [aria-label="Cancel"] .dx-button-content:hover {
  background-color: red!important;
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Message box buttons

OK button:

body .confirm-dialog .dx-toolbar-button:first-child>.dx-toolbar-item-content>.dx-button {
    background-color: #814c98!important;
}

/* On hover */
body .confirm-dialog .dx-toolbar-button:first-child>.dx-toolbar-item-content>.dx-button:hover {
    background-color: #5731b9!important;
}

Cancel button:

body .confirm-dialog .dx-toolbar-button:lasst-child>.dx-toolbar-item-content>.dx-button {
    background-color: #814c98!important;
}

/* On hover */
body .confirm-dialog .dx-toolbar-button:last-child>.dx-toolbar-item-content>.dx-button:hover {
    background-color: #5731b9!important;
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Button controls

If you want to target a specific button – use a class. Otherwise remove class and the styling will apply to all button controls.

Text:

.CLASSNAME span {
    font-size: 10px!important;
    text-transform: uppercase;
}

Button content:

.CLASSNAME .dx-button-has-text .dx-button-content {
    padding: 3px 3px 3px;
    width: fit-content!important;
}

If you have an image:

.CLASSNAME .dx-button-has-text .dx-button-content i {
    color: #f5f5f5!important;
    font-size: 10px; 
    margin: 0!important;
}

Button:

.CLASSNAME .dx-button-mode-contained { 
    border-radius: 4px!important: 
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Grid buttons

body app-default-grid > .grid-buttons-wrapper > .gridImageHover { 
    background-color: red!important; 
}

/* On hover */
body app-default-grid > .grid-buttons-wrapper > .gridImageHover:hover:not(label) { 
    background-color: #a0c519!important; 
    border-color: #a0c519!important; 
}

/* Inactive button */
.grid-buttons-wrapper .gridImageHover.disabled-button { 
    opacity: 0.5!important; 
    background-color: blue!important; 
}

Place the grid buttons under the grid:

Make sure to add empty white space under the grid control, otherwise the grid buttons will overlap with the content below it.

.CLASSNAME .dx-data-grid {
position: relative;
}

.CLASSNAME .grid-buttons-wrapper {
position: absolute;
top: 90%; /* Adjust this value to place it directly under the grid */
left: -4%;
width: 100%;
z-index: 1; /* Ensure it appears above or below other elements as needed */
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Search report button

.gridImageHover.reportCommand { 
    color: white; 
    font-weight: 700; 
    height: 30px!important; 
    text-transform: capitalize; 
    border-radius: 10px; 
    padding: 5px 14px!important; 
    background-color: #222226!important; 
}

/* On hover */
.gridImageHover.reportCommand:hover { 
     background-color:blue!important; 
}

/* Inactive button */
.gridImageHover.reportCommand.reportCommandDisabled { 
     background-color:red!important; 
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Grid - general styling

Line at top:

.dx-datagrid-rowsview { 
     border-top: 1px solid #1b48db; 
}

.dx-datagrid-headers {
    border-bottom: 1px solid #219b19;

}

.dx-datagrid-headers .dx-datagrid-table .dx-row > td {
    border-bottom: 1px solid #b417c3;
}

Alternating row color:

.dx-datagrid .dx-row-alt > td, .dx-datagrid .dx-row-alt > tr > td { 
    background-color: #f5f5f5; 
    border-top: 1px solid #f5f5f5; 
    border-bottom: 1px solid #f5f5f5; 
}

Selected row:

tr.dx-selection > td { 
     background-color:#dfdfdf!important; 
}

Hovering on a row in a grid:

.dx-datagrid-rowsview .dx-row:hover > td,
.dx-datagrid-rowsview .dx-row:hover > td:first-child, 
.dx-datagrid-rowsview .dx-row-alt.dx-row:not(.dx-row-focused):hover > td,
.dx-datagrid-rowsview .dx-row-alt.dx-row:not(.dx-row-focused):hover > td:first-child,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td , 
.dx-datagrid-rowsview .dx-selection.dx-row-alt.dx-row:not(.dx-row-focused) > td:first-child {
    background: #45457b !important;
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Sidebar navigation

/* Targets the group caption */
.group-caption {
   color: #fff7f7!important;
}

/* Targets the list items */
.command-list-item {
   background-color: #1d00ff!important;
}

.command-caption {
   color: #e6e6e6!important;
}

.sidebar .font_icon i {
   font-size: 16pt;
   color: #ffffff;
}

/* General styling, like background color */
.sidebar {
    background-color: #1d1c1c;
}

/* Targets list items when sidebar is expanded */
.active-sidebar a targets expanded sidebar
.active-sidebar .command-list-item {
    background-color: red!important;
}

Line between groups when sidebar is not expanded:

/* Targets the line breaks when sidebar is collapsed */
.sidebar hr  { 
    border: 1px solid red!important; 
}

Logos:

/* Expanded sidebar logo */
.sidebar .logo-medium {
    height: 40px!important; 
    margin-bottom: 30px; 
    margin-top: 30px; 
}

/* Collapsed sidebar logo */
.sidebar .logo-small { 
    width: 30px; 
    margin-top: 30px; 
}

Sidebar arrow (To expand and collapse the sidebar):

.fa-chevron-right:before { 
    color: #a0c519!important; 
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Top bar with tabs

General background top bar and tabs (also tabbed groups in views):

body .ui-tabview.ui-tabview-top>.ui-tabview-nav {
    background-color: #5c5555!important;
}

Tab borders:

body .dx-popup-wrapper>.dx-overlay-content, 
.ui-tabview.ui-tabview-top>.ui-tabview-nav>li.ui-state-active, body .ui-tabview.ui-tabview-top>.ui-tabview-nav>li {
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
}

Close tab x:

body .ui-tabview .ui-tabview-nav>li .ui-tabview-close {
    color: #ef2800!important;
}

body .ui-tabview .ui-tabview-nav>li:hover .ui-tabview-close {
    color: #4f00ef!important;
}

Background active tab:

body .ui-tabview.ui-tabview-top>.ui-tabview-nav>li.ui-state-active {
    background-color: #ffffff!important;
    padding-bottom: 1px!important;
}

Text on tab not active and active:

body .ui-tabview.ui-tabview-top>.ui-tabview-nav>li.ui-state-active a span {
    color: black!important;
}

body .ui-tabview .ui-tabview-nav>li:hover .ui-tabview-title{
    color: black!important;
}

Hover inactive tab:

body .ui-tabview.ui-tabview-top>.ui-tabview-nav>li:hover {
    background-color: #ffffff!important;
    padding-bottom: 1px!important;
    border: 1px solid #ffffff !important;
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Input fields

body :not(.dx-row).dx-state-focused {
    border-color: #a447d9!important;
}

body :not(.dx-row).dx-state-focused.dx-state-hover {
    border-color: #a447d9!important;
}

Readonly fields:

body .dx-texteditor.dx-state-readonly textarea,
body .dx-texteditor.dx-state-readonly input, 
body .dx-texteditor.dx-state-readonly div > div.dx-texteditor-input {
    background-color: #313131 !important;
}

NOTE! If you are using the ribbon menu these stylings might apply to them as well. We are working on finding an additional css-styling for this issue, so the text will be updated.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Checkboxes

body .dx-checkbox-checked .dx-checkbox-icon:hover {
    border-color: #915acf!important;
}

body .dx-checkbox-checked .dx-checkbox-icon::before {
    border-color: #915acf!important;
}

.dx-checkbox.dx-state-hover .dx-checkbox-icon {
    border: 1px solid #915acf;
}

.dx-checkbox.dx-state-focused .dx-checkbox-icon {
    border: 1px solid #915acf;
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Toast message


/* Toast Container */
body .ui-growl {
    width: 400px;
}

body .ui-growl>.ui-growl-item-container {
    width: 400px;
}

/* Box shadow */
body .ui-growl > .ui-growl-item-container.ui-shadow {
    box-shadow: 0px 0px 15px #9f9f9f;
}

body .ui-growl>.ui-growl-item-container.ui-growl-message-info {
background-color: white!important;
    padding: 20px!important;
}

/* Message */
body .ui-growl>.ui-growl-item-container.ui-growl-message-info p {
    color: #4d4d4d!important;
}

/* Header */
body .ui-growl>.ui-growl-item-container.ui-growl-message-info .ui-growl-title {
    color: #333!important;
}

/* i-icon */
body .ui-growl>.ui-growl-item-container.ui-growl-message-info .pi-info-circle {
    color: #50c878!important;
    font-size: 40px!important;
}

/* Close icon */
body .ui-growl>.ui-growl-item-container.ui-growl-message-info .pi-times {
    color: #50c878!important;
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Fonts

Using different fonts for your project can really make a difference in the appearance of your app. If you decide to import different font styles, make sure they are free to use.

You can find different fonts to use here:

https://fonts.google.com/

Inside the style sheet in the Studio import your fonts and apply to class/body/etc.

@import url('ADD FONT LINK HERE') /* Add this at the top of your CSS code */

Example:

/* Importing the font style */
@import url('https://fonts.googleapis.com/css?family=Poppins')
 
/* This targets the h2 element that has a class added to it */
.CLASSNAME h2 {
  font-family: Poppins;
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Repeater

Style repeater cards

Add a class to the repeater control and specify it in the CSS code below.

/* General card styling */
.CLASSNAME .card {
  background-color: #f5f5f5!important;
  border: 2px solid grey!important;
}

/*On hover */
.CLASSNAME .card:hover {
  border: 2px solid red!important;
}

Change direction of repeater layout

Add a class to the repeater control and specify it in the CSS code below.

.CLASSNAME {
    display: grid!important;
    grid-template-columns: auto auto auto auto;
    justify-content: center;
}

Add different colors to the cards
Add a class to the repeater control and specify it in the CSS code below. To add different colors to the cards, use :nthchild() as shown below.


/* Add different colors to the cards */
.CLASSNAME .card:nth-child(1) {
    background-color: red!important;
    border: 3px solid red!important;
}

.CLASSNAME .card:nth-child(2) {
  background-color: blue!important;
  border: 3px solid blue!important;
}

.CLASSNAME .card:nth-child(3) {
  background-color: yellow!important;
  border: 3px solid yellow!important;
}

.CLASSNAME .card:nth-child(4) {
  background-color: pink!important;
  border: 3px solid pink!important;
}

.CLASSNAME .card:nth-child(5) {
  background-color: green!important;
  border: 3px solid green!important;
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Groups

Add a class to the group and specify it in the CSS code below.

.CLASSNAME p-panel>div {
  background-color: red!important;
  border-color: #a2ecbb!important;
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Scrollbar

div.dx-scrollable-container::-webkit-scrollbar {
     width: 1em !important;
     background-color: transparent !important;
     border-radius: 5px !important;
}
div.dx-scrollable-container::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
     border-radius: 5px !important;
}
.dx-scrollbar-vertical.dx-scrollbar-hoverable .dx-scrollable-scroll 
.dx-scrollable-scroll-content, div.dx-scrollable-container::-webkit-scrollbar-thumb {
     background-color: #41516a !important;
     border-radius: 5px !important;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #1a1a3a;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #282a4d;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #45457b;
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Overlay background

/* Overlay background*/
.dx-overlay-wrapper {
    background-color: #ff00005e;
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Message box & Dialog

The buttons in the message box are styled in this chapter: Message box buttons

The buttons for the dialog are styled in this chapter: Dialog buttons

/* Pop up box */
.dx-popup-normal {
    background-color: white!important;
    padding: 0px!important;
}

/* The heading text */
.dx-popup-normal .dx-popup-title {
    color: #cdefcd!important;
    background-color: #5c7f5b;
    border-bottom: none!important;
}

/* The bottom of the message box */
.dx-popup-normal .dx-popup-bottom {
    color: #cdefcd!important;
    background-color: #ffffff;
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Login page

Styling of your login page is done in the Studio. In the studio go to the UI-tab and choose "Login Css"

If you are using the old GO the styling is done in GO under the "Themes" tab.

Here you can upload a logo and choose accent colors. Common practice to manage colors are done in the Css and not by setting accent colors.

By using the inspector tool you can see all class names of the components of the login page. Use these ihn the style sheet to change the styling of your login page.

Background image:

To change the background image you need to have an imaga saved to your computer and use the code url(../manual/*your image name*);

.image {
 background-image: url(../manual/intressepolitiska.jpg);
background-size: cover;
border: none!important;
width: 70%!important;
}

Example of Login Page:

The CSS for the login page above:

.main_area {
    background: #ffffff!important;
} 

.image {
  background-image: url(../manual/intressepolitiska.jpg);
  background-size: cover;
  border: none!important;
  width: 70%!important;
}

.flow_logo {
    position: fixed;
    bottom: 10px;
    right: 10px;
    height: 20px;
}

.login-page-logo {
    width: 300px;
    margin-top: 48px;
    margin-bottom: 20px!important;
}

.intro {
    display: none;
}

.username-label {
      position: absolute;  
      visibility: hidden;
}

.username-label:before {
      content: "Mejladress";
      visibility: visible;
      display: block;
      position: absolute;
      top: -30px;
}

.form-group.no-bottom-margin > label {
      position: relative;  
      visibility: hidden;
}

.form-group.no-bottom-margin > label:before {
      content: "Lösenord";
      visibility: visible;
      display: block;
      position: absolute;
}

#forgotPassword {
      position: relative;  
      visibility: hidden;
}

#forgotPassword:before {
      content: "Återställ lösenordet";
      visibility: visible;
      display: block;
      position: relative;
}

.form-group.no-bottom-margin .row:after {
      content: "Logga in";
      color: white;
      font-weight: bold;
      position: absolute;
      top: 230px;
      left: 312px;
      pointer-events: none;
}

.app-version {
    position: relative;
    text-align: center;
    margin: 0px;
    top: 250px !important;
}

.app-name {
    display: none;
}

#next {
    visibility: hidden;
    position: relative;
}

#next:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "Logga in";
    background-color: #002D5A!important;
    color: #fff;
    outline-color: #002D5A!important;
    width: 320px!important;
    padding: 5px 10px!important;
    border-radius: 7px!important;
    font-weight: bold;
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Signup page

Styling of your signup page is done in the Studio. In the studio go to the UI-tab and choose "Login Css"

This version of the signup page is only available in Go2Flow.

By using the inspector tool you can see all class names of the components of the signup page. Use these in the style sheet to change the styling of your login page.

Example of Signup page:

Css for Signup page above:

.top-logo-wrapper {
position: unset!important;
text-align: left!important;
padding-bottom: 10px!important;
}

.page-title {
margin: 0px 0px 15px 0px!important;
}

.page-title h1 {
margin-top: 0px!important;
}

.top-logo-wrapper .flow-logo {
width: 240px!important;
}

.jumbotron p {
text-wrap: wrap!important;
}

.form-horizontal .control-label {
text-align: left!important;
}

.btn-primary {
color: #fff!important;
background-color: #b51963!important;
border-color: #b51963!important;
font-weight: bold!important;
text-transform: uppercase!important;
letter-spacing: 1px!important;
}

.btn-primary:hover {
color: #fff!important;
background-color: #930047 !important;
border-color: #930047!important;
font-weight: bold!important;
text-transform: uppercase!important;
letter-spacing: 1px!important;
}

.btn-default {
color: #333!important;
background-color: #fff;
border-color: #ccc!important;
font-weight: bold!important;
letter-spacing: 1px!important;
text-transform: uppercase!important;
}

footer {
border-top: solid 6px #b51963!important;
background-color: #b51963!important;
width: 100vw!important;
text-align: center!important;
position: fixed!important;
bottom: 0!important;
height: 120px!important;
color: #fff!important;
padding: 8px!important;
font-size: 17px!important;
}

.footer-contact {
margin: 0px!important;
}

.row {
text-wrap: nowrap!important;
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

General

If you feel that something is missing from this guide or if you have other feedback to give, please contact us and we will make ongoing additions to keep the content as up-to-date as possible.

A CSS GUIDELINE - 2024Written byJosefine Kihlström & Lisa Pousette Blomé

Chapters

Why should I customize a customer application?

Please note!

The CSS I'm applying isn't working, what am I doing wrong?

The declaration of !important

Targeting different elements that share the same class

Dialog buttons

OK button:

Cancel button:

Target Dialog button with specific text:

Message box buttons

OK button:

Cancel button:

Button controls

Text:

Button content:

If you have an image:

Button:

Grid buttons

Search report button

Grid - general styling

Line at top:

Alternating row color:

Selected row:

Hovering on a row in a grid:

Sidebar navigation

Line between groups when sidebar is not expanded:

Logos:

Sidebar arrow (To expand and collapse the sidebar):

Top bar with tabs

General background top bar and tabs (also tabbed groups in views):

Tab borders:

Close tab x:

Background active tab:

Text on tab not active and active:

Hover inactive tab:

Input fields

Readonly fields:

Checkboxes

Toast message

Fonts

Repeater

Groups

Scrollbar

Overlay background

Message box & Dialog

Login page

Background image:

Example of Login Page:

Signup page

Example of Signup page:

General

Related articles

A CSS GUIDELINE - 2024
Written by
Josefine Kihlström & Lisa Pousette Blomé