Rapid Apps
Styling documentation
Rapid Apps provides a lot of help for CSS styling to ensure apps can be made quickly, and look consistent.
Included stylesheets
There are some default stylesheets that are included with every webpage automatically. These stylesheets are stores in /resources/styles/ These stylesheets are as follows:
| CSS File | Purpose |
|---|---|
globals.css
|
Contains CSS variables that ensure styling is consistent across all Rapid Apps |
defaults.css
|
Removes most default CSS styles |
forms.css
|
Styles to help with making forms that use input elements |
header.css
|
Styles for the header element |
mobile.css
|
Styles to make webpages reactive on mobile |
popups.css
|
Styles for making popups |
utils.css
|
Quick classnames to use across the app for simple styling |
Layout
Laying out of html elements on webpages should be done using CSS flex. There are a number of default util classes to help with this.
The most important utility classes are:
| Class | Description |
|---|---|
.flex
|
Makes an element display: flex |
.flex-col
|
Makes an element flex-direction: column |
.gap-s
.gap-m
.gap-l
|
Spaces elements in a flex container at a small, medium and large distance respectively |