UI elements audit
Last modified by Vincent Massol on 2024/11/19 16:15
Adina MilicaDescription
- What is an element, actually?
- Small elements
- Medium Elements
- Edit & create button
- Dropdown Toggle & Options Button
- Search bar
- Breadcrumb
- Comment Avatar Image
- Text fields
- Search bar from Global Adminstration
- Administration Categories Panels
- Icon for Administration categories Panels
- Panel
- Info, warning, success, error box
- Notifications settings
- Notification Action indicator icon
- Large elements
- Color variables
- Themes comments & issues
What is an element, actually?
An element, or at least an element that is considered to be added to this audit, is one that:
- provides important information to the user
- is used as it is by any user that doesn't add custom code to it
- has its general look the same for any user that doesn't add custom code to it
- enables an action to the user
- has a certain shape or structure
- is not a simple text or link
Small elements
| Name or use | Look in Iceberg 150% zoom
| Color variables that affect it | Classes that affect it | Comments |
|---|---|---|---|---|
Like button |  | |||
Tags list, tag &... Add tag button |  | |||
Edit paragraph button |  | |||
Comment Tools buttons |  | |||
Previous and Next Page icon |  | |||
Nav Bar Icons |  | |||
Navigation tree Current Page |  125% zoom | |||
Rating stars |  | |||
Seen notification button |  | |||
See details on notification button |  |
Medium Elements
| Name or use | Look in Iceberg 150% zoom | Color variables that affect it | Classes that affect it | Comments |
|---|---|---|---|---|
Edit & create button |
| #contentmenu, pull-right, actionmenu, btn-group, btn, btn-default, fa fa-pencil, | ||
In Content Menu - Dropdown Toggle & Options Button |  | #contentmenu, pull-right, actionmenu,, btn-group, btn, btn-default, dropdown-toggle, | ||
Search barin nav bar, next to the search button |  | different from the search bar in Global Administration | ||
Breadcrumb |  | |||
Comment Avatar Image |  | |||
Text fields |  | |||
Search bar from Global Adminstration |  | different from the search bar from the navbar | ||
Administration Categories Panels | normal: clicked:
| |||
Icon for Administration categories Panels |  | |||
Panel |  | |||
Info, warning, success, error box |  |
Special case: While they can definitely stretch much more than the bounds defined in the beginning of this section, their usual use case is signaling something important. This is usually pretty short.
| ||
Notifications settings |  | |||
Notification Action indicator icon |  |
Large elements
| Name or use | Look in Iceberg 100% zoom | Color variables that affect it | Classes that affect it | Important dimensions | Comments |
|---|---|---|---|---|---|
Main content Area | anything you write | ||||
Document Footer |  | ||||
Doc Extra Section (for example Comments) |
the yellow outline is what |
Color variables
Usage for less obvious variables
@body-bg - side columns background color
@xwiki-page-content-bg - main content's background color
@brand-primary
@brand-success
@brand-info
@brand-warning
@brand-danger
@font-family-base
@font-family-sans-serif
@font-family-serif
@font-family-monospace
@font-size-base
@table-bg
@table-bg-hover
@table-border-color
Values on themes
| Iceberg | Cerulean | Charcoal | Cosmo | Cyborg | Darkly | Flatly | Garden | Journal | Kitty | Lumen | Marina | Paper | Sandstone | readable | Simplex | Slate | SpaceLab | Yeti | ||
| @text-color | #333333 | |||||||||||||||||||
| @body-bg | #fafafa | |||||||||||||||||||
| @xwiki-page-content-bg | #ffffff | |||||||||||||||||||
| @link-color | #3173b5 | |||||||||||||||||||
| @brand-primary | ||||||||||||||||||||
| @brand-success | #56b881 | |||||||||||||||||||
| @brand-info | #3bb2d0 | |||||||||||||||||||
| @brand-warning | ||||||||||||||||||||
| @brand-danger | ||||||||||||||||||||
| @headings-color | #333333 | |||||||||||||||||||
| @component-active-color | @list-group-link-hover-color | |||||||||||||||||||
| @component-active-bg | @list-group-hover-bg | |||||||||||||||||||
@font-family-base | Open Sans, sans-serif | |||||||||||||||||||
| @font-family-sans-serif | ||||||||||||||||||||
| @font-family-serif | ||||||||||||||||||||
| @font-family-monospace | ||||||||||||||||||||
| @font-size-base | ||||||||||||||||||||
| @table-bg | ||||||||||||||||||||
| @table-bg-hover | ||||||||||||||||||||
| @table-border-color | ||||||||||||||||||||
| @btn-font-weight | ||||||||||||||||||||
| @btn-default-color | ||||||||||||||||||||
| @btn-default-bg | ||||||||||||||||||||
| @btn-primary-color | ||||||||||||||||||||
| @btn-primary-bg |
Themes comments & issues
| Iceberg | Cerulean | Charcoal | Cosmo | Cyborg | Darkly | Flatly | Garden | Journal | Kitty | Lumen | Marina | Paper | Readable | Sandstone | Simplex | Slate | SpaceLab | United | Yeti | |
| main | very nice | some elements are too white for how dark it is | very nice | nice, but needs more contrast | very nice | pretty okay | some elements are too white for how dark it is | pretty okay | pretty okay |
