Skip to content
Snippets Groups Projects
Verified Commit f13314fd authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

chore move style guide doc to style repos

parent fb475f18
No related branches found
No related tags found
No related merge requests found
# Style Guide
The style guide reflects the patterns and components that are the foundation of the Monster System.
These patterns provide a common language and a consistent look and feel when developing
applications and products within the Monster ecosystem.
## CSS Properties
Where possible, components should use global uniform CSS properties to create a consistent look and feel.
With the following script, you can see the list of all the CSS properties that are available
in the Monster UI Framework.
```bash
ag -o --nofilename 'var\(\-\-monster[^)]*\)' | grep var | cut -d"," -f1 | cut -d"(" -f2 | sort | uniq
```
Actually, the following CSS properties are in use:
```css
--monster-accent-color
--monster-bg-color
--monster-border-color
--monster-border-radius
--monster-border-radius)
--monster-border-width
--monster-btn-bg-color
--monster-btn-border-color
--monster-btn-color
--monster-color
--monster-color-activity
--monster-color-failed
--monster-color-successful
--monster-disabled-background-color
--monster-disabled-border-color
--monster-disabled-color
--monster-empty-state-background-color
--monster-empty-state-layout-padding-margin-bottom
--monster-empty-state-margin-top
--monster-empty-state-padding-bottom
--monster-empty-state-padding-left
--monster-empty-state-padding-right
--monster-empty-state-padding-top
--monster-font-family
--monster-hover-color
--monster-message-bg-color
--monster-message-border-color
--monster-message-border-radius
--monster-message-border-style
--monster-message-border-width
--monster-message-color
--monster-message-margin-bottom
--monster-message-margin-left
--monster-message-margin-right
--monster-message-margin-top
--monster-message-padding-bottom
--monster-message-padding-left
--monster-message-padding-right
--monster-message-padding-top
--monster-notify-duration
--monster-popper-witharrrow-distance
--monster-selected-color
```
### Colors
[black, white, red, yellow, grey, pink, green](https://coolors.co/0a0f0d-ffffff-b00020-f6aa1c-656176-ff69b4-003d00)
| Code | Description |
|-------------------------------------------|--------------|
| var(--monster-color, #0a0f0d) | black |
| var(--monster-color-activity, #656176) | grey |
| var(--monster-color-failed, #b00020) | red |
| var(--monster-color-successful, #003d00) | green |
| var(--monster-color-accent, #ff69b4) | pink |
| var(--monster-color-dark, #0a0f0d) | black |
| var(--monster-color-light, #ffffff) | white |
| var(--monster-color-hover, #ff69b4) | pink |
| var(--monster-color-highlight, f6aa1c) | yellow |
| var(--monster-color-selected, #0a0f0d) | black |
| var(--monster-color-disabled, #656176) | grey |
| var(--monster-bg-color, #ffffff) | white |
| var(--monster-bg-color-dark, #656176) | grey |
| var(--monster-bg-color-light, #ffffff) | white |
| var(--monster-bg-color-disabled, #656176) | grey |
| var(--monster-disabled-color) | (deprecated) |
| var(--monster-disabled-bg-color) | (deprecated) |
| var(--monster-hover-color) | (deprecated) |
| var(--monster-selected-color) | (deprecated) |
| var(--monster-accent-color) | (deprecated) |
| var(--monster-disabled-background-color) | (deprecated) |
### Fonts
```css
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw -
[minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
```
| Property | Description |
|-------------------------------------------------------------------------------------------------------------------------------------------------|-------------|
| var(--monster-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif) | |
| var(--monster-font-size, calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300))) | |
| var(--monster-font-weight | |
| var(--monster-font-weight-bold | |
| var(--monster-font-weight-light | |
| var(--monster-line-height, calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300))); | |
### Borders
| Property | Description |
|--------------------------------------|-------------|
| var(--monster-border-color, #0a0f0d) | black |
| var(--monster-border-radius, 0) | |
| var(--monster-border-style, solid) | |
| var(--monster-border-width, 2px) | |
### Shadows
| Property | Description |
|------------------------------------------------------------------------------------------------------------------------|-------------|
| var(--monster-text-shadow, none) | |
| var(--monster-box-shadow, box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;) | |
...@@ -17,9 +17,6 @@ ...@@ -17,9 +17,6 @@
"dom-based-templating-implementation": { "dom-based-templating-implementation": {
"title": "DOM-based templating implementation" "title": "DOM-based templating implementation"
}, },
"dom-style-guide": {
"title": "Monster Style Guide"
},
"how-to-write-a-customcontrol": { "how-to-write-a-customcontrol": {
"title": "How to write a CustomControl" "title": "How to write a CustomControl"
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment