Titles
A page should always only have a single title, and this one is very likely generated by wordpress. But here you can see its style and all other headers. You can also reuse these styles if needed in another place with the classes h[1..6].
Main page title
Secondary title
H3
H4
H5
H6
Pagination should be done with the following arrows: ❮❯ and again in plain text: ❮ text ❯
Links
Always make sure they use a relative location for the local testing. If you want them to open in a new tab use target="_blank".
A link in situ:A link
But separate also exists once in a whileButtons
Buttons can be made either with a <button> or <a class="button"> elements. The <button> is strongly preferred, the <a class="button"> can only be used if the button has to send the user to another page as a link would normally do. They can be adjusted to your situation with the modifier classes rounded and secondary, and buttons can be disabled (only actual buttons) with the html attribute disabled. If you are using a button on a var(--color-primary) background you can use the class inverted.
It should also work for the wp buttons:
Horizontal rulers
Horizontal rules can be used in many places to separate two distinct sections on a page. You could also take the freedom to remodel some object in your case to have the same style, but this is the preferred style.
The second ruler is a bit intense but maybe we find a nice place for it somewhere ;-).
Forms
These are tricky to fully standardise, but the basic layout should be provided. Use the col-2 and col-4 classes to change the layout from 1 to 2 and 4 columns respectively, based on the screen size these will automatically fall back to a reasonable column number.
You can show required elements when using the class show-required, but you can only use this on forms where there are elements that are not required, otherwise it will just add visual clutter. Also you can make individual items the width of the whole page by applying the class wide, its label will also automatically be the same width.
Note however that this requires the
:hasselector, which is not at the time of writing supported by firefox. So there the not required inputs will be shown with a grey border instead.
You can also limit the width of a form or fieldset to 500px with the following class: small
Lists
Lists do occur once in a while:
- One
- Two
- Three
- On no this was an unordered one
- Something
- Something else
- Something entirely different
Table
If you want to have the below styling you can use the thead and tfoot blocks.
| One | Two | Three | Four | Five |
|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 |
| 11 | 12 | 13 | 14 | 15 |
| 21 | 22 | 23 | 24 | 25 |
| f1 | f2 | f3 | f4 | f5 |
But a solution with less levels of elements also works.
| One | Two | Three | Four | Five |
|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 |
| 11 | 12 | 13 | 14 | 15 |
| 21 | 22 | 23 | 24 | 25 |
And if you want to create a scrollable table you will have to use a wrapper <div class="widetable-wrapper">.
| 1 | 2 | 3 | 4 | 5 |
| 11 | 12 | WIDE | 14 | 15 |
| 21 | 22 | 23 | 24 | 25 |
Text blocks
You can show quotes, ‘raw’ text, and code in a nice way!
Here is a nice quote from someone you know! Here is the source
Preformatted text Supposed to show in a nice monospaced font -> arrow
// code display
// for displaying 'proper' languages only (not any one that helps you write bugs (uchm python/julia))
fn main() -> f64 {
let x = 8.0;
(x * x * x).sqrt().saturating_sub(4)
}
You can even you the <code> element inside normal text. In that case it will also be very easy to copy for users.
Notifications
You can easily create notifications on the frontend and admin backend with the following php class.
DisplayNotification::success(
"Blocked",
"You are blocked from making transactions",
array(
"url" => "https://google.com",
"url-text" => "Google"
)
);
DisplayNotification::warning(
"Blocked",
"You are blocked from making transactions"
);
DisplayNotification::error(
"Blocked",
"You are blocked from making transactions"
);
DisplayNotification::information(
"Blocked",
"You are blocked from making transactions"
);
Progressbar
There is a native html element for this <progress>. If it has no max or value attribute is is on undetermined style as you can see in the first example. The second example is 50% of the way there.