adi-unni
commented
2 months ago Let's display this:
Many components in the design system have a parameter in their macro 'classes': ' ' that allows the service to input any additional modifiers like utility classes into the component. The utility classes can be split into different categories:
Colours - apply foreground and background colours.
- .ons-u-{colour}: apply foreground colour
- .ons-u-bg-{colour}: apply background colour
Display - hide elements when there is or isnt js
- .ons-u-ds-no-js_enabled: doesn't render component through
display:nonewhen js is enabled - .ons-u-ds-no-js_disabled: doesn't render component through
display:nonewhen js is disabled
Float - additional float settings:
- .ons-u-cf - clear float settings (override)
- .ons-u-fl - float left
- .ons-u-fr - float right
- .ons-u-f-no - no float
Grid - all the grid ones are documented in grid settings. Would be good to consolidate them with the rest of these. There are some utility classes that have been missed however:
-
.ons-grid--float - reduces letter spacing to 0
-
.ons-grid--center - this selector centers text outside of columns, individual columns will still be left aligned
-
.ons-grid--center-all - this will center the text in all objects in the grid
-
.ons-grid-vertical-align - aligns content vertically in the middle of its containing cell
-
.ons-grid-stagger-align - allign the content in the contents to be staggered left - right (needs verifying)
-
.ons-highlight - highlight foreground and background colour. Related link to typography
Margin:
Margins can be specified with the respective sizes in this format:
- ons-u-{m | ml | mr | mt | mb}-{no | xxs | xs | s | m | l | xl | auto} where each of the values are:
Sizes:
- no: 0
- xxs: 0.25rem
- xs: 0.5rem
- s: 1rem
- m: 1.5rem
- l: 2rem
- xl: 3rem
- auto: auto
Margin Type:
- mt: margin-top
- mr: margin-right
- mb: margin-bottom
- ml: margin-left
- m: margin
Padding (similar to margin):
The format is: ons-u-{pt | pr | pl | pb | p}-{no | xxs | xs | s | m | l } where the values represent:
Sizes:
- no: 0 !important
- xxs: 0.3rem
- xs: 0.5rem
- s: 1rem
- m: 2rem
- l: 3rem
with padding types:
- pt: padding-top
- pr: padding-right
- pb: padding-bottom
- pl: padding-left
- p: padding
Typography - Additional typography fonts, only affects the fonts in the elements:
- .ons-u-fw-b - forced font weight bold
- .ons-u-fw-n - forced font-weight regular
- .ons-u-fs-i - forced italicise
- .ons-u-tt-u - forced upper case
- .ons-u-td-no - no text decoration
- .ons-u-lighter - lighter font
- .ons-u-f-mono- monospaced font
- .ons-u-ta-right - text align right
- .ons-u-ta-right - forced text align left
- .ons-u-ta-center - forced text align centre
Element-wise utilities - These affect elements and values inside elements on a generic scale:
- .ons-u-dib - display inline block
- .ons-u-di - dispaly inline
- .ons-u-db - display block
- .ons-u-ha - override the height property to 'auto'
- ons-u-nowrap - force the non-wrapping of values
- ons-u-warp - force the wrapping of values
- ons-u-rtl - set the direction from left to right
Visibility - These affect the overall visibility of elements including breakpoint management:
- .ons-u-hidden - set the hidden visibility for the element and display to none
- .ons-u-visuallyhidden and ons-u-vh in conjunction with ons-u-focusable - set it to be visually hidden but focusable
- .ons-u-invisible - visibility is hidden. Reminder that
visibility: hiddenhides the element from being rendered but will still take space, butdisplay: noneremoves it from the layout and from taking up space
daniellecorke
Background
This ticket was split from #1982.
Issue
We need to document all the utility style override classes. Should these all sit in one place e.g. 'get started' or could they be separated into styles sections e.g. 'spacing' etc?
Tasks
List all of the utility classes that start with ons-u- Divide them in relevant sections eg: spacing, size, display etc.. Add them in the comment section of this ticket. Bring them back to a tech session for next steps.