Theme Styleguide
This guide provides an example of the base styles.
Establishing a solid base style for a website is crucial for its success. This is especially true for new websites, where a good foundation is necessary to ensure a smooth project progression.
The base style should encompass all the basic HTML elements and their variations that will be utilized throughout the website. Whether it's for standard formatted text or custom-designed layout components, the base style should have all the necessary elements.
The goal is to create a design that is abstract enough to be used in any context without requiring significant modifications. At the same time, it should be flexible enough to allow for custom adjustments when needed, without having to overwrite numerous CSS attributes.
To help you focus on the important elements, it's recommended to use a best practice starting point like the following markup. It's not necessary to include all HTML elements, as other elements will still work without customization, but this starting point will provide you with the essential components needed for a solid base style.
1. Colors #
Selecting the right colors is crucial for the success of any website. Using CSS color variables is an effective and efficient way to integrate color into your design while ensuring consistency throughout your website.
| Example | CSS variable | Usage |
|---|---|---|
| Color example | var(--color-primary) |
Primary Color |
| Color example | var(--color-accent) |
Highlight elements or draw attention (e.g. Links or Buttons) |
| Color example | var(--color-background) |
Element Backgrounds |
| Color example | var(--color-background-secondary) |
More contrasted Element Backgrounds (e.g. inside Table Rows) |
| Color example | var(--color-border) |
Element Borders (e.g. Tables or Cards) |
| Color example | var(--color-border-secondary) |
More contrasted Element Borders (e.g. inputs) |
| Color example | var(--color-text) |
Texts and Elements |
| Color example | var(--color-text-muted) |
Subtle Texts or Elements (e.g. Captions and Table Headers) |
| Color example | var(--color-error) |
Indicate errors (e.g. on inputs) |
2. Typography #
2.1. Headings #
Headings should be used to provide structure to the content. Use h1 for main headings, h2 for subheadings, and so on.
H1: Pack my box with five dozen liquor jugs.
H2: Pack my box with five dozen liquor jugs.
H3: Pack my box with five dozen liquor jugs.
H4: Pack my box with five dozen liquor jugs.
H5: Pack my box with five dozen liquor jugs.
H6: Pack my box with five dozen liquor jugs.
2.2. Paragraphs #
Paragraphs are used to group related sentences or phrases together. They should be separated by an empty line.
Paragraph Large text-lg — How vexingly quick daft zebras jump!.
Paragraph Default — How vexingly quick daft zebras jump!.
Paragraph Small text-sm — How vexingly quick daft zebras jump!.
A paragraph can contain links, like this one, and different inline elements like bold, small, italic, underline, strikethrough, subscript, superscript, abbr., highlighted, kbd, and code.
2.3. Blockquote #
Use the blockquote tag to indicate a section that is quoted from another source.
“Simple things should be simple, complex things should be possible.”
Alan Kay (Default WP)
“Simple things should be simple, complex things should be possible.”
Alan Kay (Without Class)
2.4. Lists #
Lists are a useful way to present information. Use ul for unordered lists and ol for ordered lists.
Ensure that you avoid resetting all list elements since doing so could be useful for styling other layout elements, while still preserving their intended purpose for formatted text.
What you need to consider?
- What are the default margin and padding for the list?
- What is the default list style type?
- Do you plan on using custom list style icons such as:
- stars
- checkmarks
- colored bullets or list numbers
- How will you style nested lists?
- Will you keep the browser default styling or create a custom style?
- If you choose to create a custom style, consider only styling the top-level list item to maintain browser defaults for nesting.
- Don't forget to test multiline list items.
- Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat.
Ordered List
- Item 1
- Item 2
- Nested Item 1
- Nested Item 2
- Item 3
2.5. Image #
Content Image With Blur Effect
3. Character Maps #
Browse the full range of characters available in our custom web font. This handy reference guide includes all numbers, uppercase and lowercase English letters, as well as popular symbols.
ES Build
Work Sans
4. Buttons and Links #
To enable the use of a <button> element as a semantic tag on various interface elements such as slider arrows, burger menus, or a closing ×, it's recommended to reset the styles for <button> elements without a class.
The use of anchor elements <a> as a button is widespread, especially for call-to-action prompts and regular Link are ubiquitous on the internet.
Buttons are a great way to make certain actions stand out on your website. Use the button tag to create buttons.
| Example | Type |
|---|---|
| |
default |
| |
primary |
| |
primary-small |
| |
secondary |
| |
link-arrow-left |
Default clean buttons:
Links are an essential part of any website. Use the a tag to create links.
| Example | Type |
|---|---|
| Link Label | Regular Content Link |
default |
|
primary |
|
primary-small |
|
secondary |
|
link-arrow-left |
A popular approach is to present buttons horizontally, which is frequently done using the .button-group class as a convenient tool.
4. Forms #
5.1. Default #
Form elements should be seamlessly integrated into a page without requiring additional classes or wrapping elements. Nonetheless, a <fieldset> element can be useful to group multiple form elements together.
The <fieldset> and <legend> elements are styled weirdly by default in user agent stylesheets. But, why not customize them to our needs?!
5.2. Gravity Form #
For Styleguide
5. Icons #
Our icon set is based on Icomoon. Icomoon is the icon font library. It provides a wide range of customizable icons that can be easily added using CSS classes.
Here are set for current project:
To use an icon, copy the corresponding HTML code from Icomoon's library and paste it into your HTML code. Be sure to include the necessary CSS and font files.
7. Helpers #
To achieve a consistent and well-structured layout across all pages and components, it is essential to use layout helper classes for specific tasks.
Keep in mind: A helper class should do one job and does it well.
.mst-spacing
Maintains a consistent spacing at the top and bottom of components..mst-container
Maintains consistent padding on the left and right, as well as a maximum website width..mst-post-container
Enhances readability of text content by optimizing the line length, which should be between 50 and 75 characters..mst-flow-content
Applies a margin-block-start to sibling child elements, promoting consistent flow rhythm between them. See this and this one..scrollable-table-wrapper
Using a container element with this class to wrap a table enables the table to be scrollable on smaller screen sizes..screen-reader-text
Hides an element from view, but makes it available to screen readers and other assistive technology.
Box Helpers
Box helpers are an effective way to ensure consistency in the appearance of your website's components. By using box helper classes alone or in combination, you can create a variety of card/box-style elements with ease.
.mst-box-border
Allows you to consistently add borders..mst-box-padding
Allows you to consistently style any content container as a responsive padding box..mst-box-shadow
Allows you to apply a uniform box shadow, resulting in a consistent visual appearance.