Custom CSS
Last updated
Last updated
Custom CSS refers to the organization's standardized CSS styling of each component of a webpage belonging to an application.
Every page of an application consists of the same components as illustrated in the picture below:
This article covers the description of the different components and their respective styling.
The Page Container refers to the main section of a webpage which contains all other sections that are listed below which are: Page Title, Toolbar and Main Body. It does not include the toolbar of the system which remains the same for all webpages of an application.
The Page Container is styled using the following CSS classes:
The Page Title refers to the header section of Page Container that contains the title of the webpage.
It is identified by the following CSS class:
Every webpage needs to have a Page Title.
The title is usually the same as the path leading to the webpage using ">>" to illustrate the hierarchy.
The Toolbar refers to the section of Page Container that is positioned right below the Page Title. It usually contains Buttons, such as “Refresh”, “Save” or “Delete”.
It is identified by the following CSS class:
A webpage may or may not feature a Toolbar.
The Toolbar often contains Buttons that trigger different events. A Button is inserted into the Toolbar in the following way:
"XXX" denotes the name that will be displayed on the Button.
"xxx" denotes the part of the Button ID that is usually the same as the Button Name.
"yyy" denotes the part of the icon class that is derived from the fontawesome website (see previous article) to display a specific icon on the Button.
"btn-primary" is the default Button type, which is of blue color. "btn-secondary" is for less important Buttons coloring them grey. "btn-danger" colors the Button red and is only used for very important Buttons, where clicking on them may trigger an irreversible event, such as "Delete".
The Main Body refers to the main section of Page Container that contains the functionality of the respective webpage.
It is identified by the following CSS class:
Every webpage needs to have a Main Body.
The content of the Main Body can be divided into sub-sections by using Flexible Containers as explained below. In the following, the different possible components of the Main Body will be described:
To distinguish a container from the rest of the contents, one can use the following CSS class:
It will color the background of the container white contrasting it with the default blue background of the Page Container.
Many webpages contain forms that enable the users to input data. Each item of such a form usually consists of a Label (that describes the Input) and a Control Input (that enables you to insert the Input), for example:
A Label is a text that is found next to a Control Input and specifies what kind of Input is expected to be inserted by the user, for example "Name".
All Labels are styled using the same group of CSS classes that only differ in their width, which are:
The number that follows after "field" specifies the width in the unit px. For example, field100 will have a width of 100px.
A Control Input is a textbox, textarea or dropdown that enables the user to insert or select an Input.
All Control Inputs are styled using the same group of CSS classes that only differ in their width, which are:
The number that follows after "text" specifies the width in the unit %. For example, text100 will have a width of 100% relative to the parent container.
A Modal is a small window that pops up when clicking a specific button.
A Modal usually consists of a Modal Body and a Modal Footer.
The Modal Body refers to the main section of a Modal that contains the functionality of the Modal, for example a Form.
It is identified by the following CSS class:
The Modal Footer refers to the footer section of a Modal that may or may not contain Buttons, for example a Submit Button.
It is identified by the following CSS class:
Flexible Containers refer to sub-sections within the Main Body of a Page Container that stretch depending on the size of the window the application is run on. There are two types of Flexible Containers, “Horizontal” and “Vertical”, that differ in their direction of stretch. Horizontal and Vertical Flexible Containers can also be used in a nested way.
Horizontal Flexible Containers are stretchable horizontally (in x-direction), i.e. their height is fixed and their width adapts to the window size (unless specified otherwise).
To realize this feature, the parent container needs to include the following CSS classes:
And one of the children (i.e. the Horizontal Flexible Containers) needs to include the following CSS class:
The complete code of a parent containing 2 Horizontal Flexible Containers as children could look like this:
The following picture depicts an example of a page where the Main Body is a Vertical Flexible Container (content-body d-flex flex-row) and the two sub-sections, left and right, are Horizontal Flexible Containers:
Vertical Flexible Containers are stretchable vertically (in y-direction), i.e. their width is fixed and their height adapts to the window size (unless specified otherwise).
To realize this feature, the parent container needs to include the CSS classes:
And one of the children (i.e. the Vertical Flexible Containers) needs to include the following CSS class:
The complete code of a parent containing 2 Horizontal Flexible Container as children could look like this:
The following picture depicts an example of a page where a Horizontal Flexible Container (d-flex flex-col) has two sub-sections, top and bottom, that are Vertical Flexible Containers:
