Utilities
CSS utilities classes that override components and modifiers with the !important rule. For example .u-p-foo returns spacing called foo as padding.
<div class="u-[CSS shorthand property]-[Pattern name][-Optional screen size pattern name]"></div>
<!-- Utility padding foo -->
<div class="u-p-foo"></div>
<!-- Returns padding: [foo value + design system unit] !important
For example padding: 20px !important; -->
<!-- Utility padding foo on bar screen size -->
<div class="u-p-foo-bar"></div>
<!-- Returns
@media (bar screen width) {
padding: [foo value + design system unit] !important
} -->
- u- is the prefix to use to call utility class name
- CSS shorthand property refers to CSS property here is the list
- Pattern name refers to the name of your pattern (color, spacing, font size, etc) from your own Matryoshka settings
- Optional screen size pattern name refers to an optional responsive suffix based on your own screen sizes settings
$ds-sreen-sizes
List of conventional abbreviations of CSS properties
| CSS shorthand property | Matching CSS property |
|---|---|
| b | Border |
| bt | Border top |
| br | Border right |
| bb | Border bottom |
| bl | Border left |
| bc | Background color |
| brad | Border radius |
| bradtl | Border radius top left |
| bradtr | Border radius top right |
| bradbr | Border radius bottom right |
| bradbl | Border radius bottom left |
| c | Color |
| fs | Font size |
| h | Height |
| m | Margin |
| mt | Margin top |
| mr | Margin right |
| mb | Margin bottom |
| ml | Margin left |
| mw | Max width |
| mh | Max height |
| p | Padding |
| pt | Padding top |
| pr | Padding right |
| pb | Padding bottom |
| pl | Padding left |
| o | Overflow |
| ox | Horizontal overflow |
| oy | Vertical Overflow |
| pe | Pointer events |
| ta | Text align |
| va | Vertical align |
| w | Width |
| z | Z index |
Responsive display
matryoshka/components/utilities/responsive-display.scss
| Responsive Applicable for each screen size |
Custom attributes Responsive shorthand through HTML attributes |
|---|---|
| yes | yes |
Responsive display refers to $ds-screen-sizes. It is used to build responsive class utilities, when you want to display someting on a specified screen size.
| Responsive classes | Description |
|---|---|
.u-hidden-foo |
Hide only - Display none - on foo screen size |
.u-visible-foo |
Show only - Display initial - on foo screen size |
Call responsive display utilities with custom data attributes to quickly apply a responive display on several screen sizes at once. Just separate screen sizes with space or comma or both.
| Responsive display attributes | Description |
|---|---|
.u-hidden="foo, bar" |
Hide only - Display none - on foo and bar screen sizes |
.u-visible="foo, bar" |
Show only - Display initial - on foo and bar screen sizes |
Spacings
matryoshka/components/utilities/spacings.scss
| Responsive Applicable for each screen size |
Custom attributes Responsive shorthand through HTML attributes |
|---|---|
| yes | yes |
Spacings refer to margins and paddings. $ds-spacings is used to build margins and paddings class utilities.
| Paddings classes | Description |
|---|---|
.u-p-foo |
Padding foo spacing |
.u-pt-foo |
Padding top foo spacing |
.u-pr-foo |
Padding right foo spacing |
.u-pb-foo |
Padding bottom foo spacing |
.u-pl-foo |
Padding left foo spacing |
.u-p-foo-bar |
Padding foo spacing for bar screen size |
.u-pt-foo-bar |
Padding top foo spacing for bar screen size |
.u-pr-foo-bar |
Padding right foo spacing for bar screen size |
.u-pb-foo-bar |
Padding bottom foo spacing for bar screen size |
.u-pl-foo-bar |
Padding left foo spacing for bar screen size |
| Margins classes | Description |
|---|---|
.u-m-foo |
Margin foo spacing |
.u-mt-foo |
Margin top foo spacing |
.u-mr-foo |
Margin right foo spacing |
.u-mb-foo |
Margin bottom foo spacing |
.u-ml-foo |
Margin left foo spacing |
.u-m-foo-bar |
Margin foo spacing for bar screen size |
.u-mt-foo-bar |
Margin top foo spacing for bar screen size |
.u-mr-foo-bar |
Margin right foo spacing for bar screen size |
.u-mb-foo-bar |
Margin bottom foo spacing for bar screen size |
.u-ml-foo-bar |
Margin left foo spacing for bar screen size |
Spacings come with custom responsive data attributes to quickly apply a spacing on several screen sizes at once. Just separate screen sizes with space or comma or both.
| Responsive paddings attributes | Description |
|---|---|
.u-p-foo="bar, two, thre" |
Padding foo spacing for bar, two and thre screen sizes |
.u-pt-foo="bar, two, thre" |
Padding top foo spacing for bar, two and thre screen sizes |
.u-pr-foo="bar, two, thre" |
Padding right foo spacing for bar, two and thre screen sizes |
.u-pb-foo="bar, two, thre" |
Padding bottom foo spacing for bar, two and thre screen sizes |
.u-pl-foo="bar, two, thre" |
Padding left foo spacing for bar, two and thre screen sizes |
| Responsive margins attributes | Description |
|---|---|
.u-m-foo="bar, two, thre" |
Margin foo spacing for bar, two and thre screen sizes |
.u-mt-foo="bar, two, thre" |
Margin top foo spacing for bar, two and thre screen sizes |
.u-mr-foo="bar, two, thre" |
Margin right foo spacing for bar, two and thre screen sizes |
.u-mb-foo="bar, two, thre" |
Margin bottom foo spacing for bar, two and thre screen sizes |
.u-ml-foo="bar, two, thre" |
Margin left foo spacing for bar, two and thre screen sizes |
Border radius
matryoshka/components/utilities/border-radius.scss
| Responsive Applicable for each screen size |
Custom attributes Responsive shorthand through HTML attributes |
|---|---|
| no | no |
Applies global or corner specific border radius on an element. Based on $ds-border-radius.
| Border radius classes | Description |
|---|---|
.u-brad-foo |
Border radius foo |
.u-bradtl-foo |
Border radius top left foo |
.u-bradtr-foo |
Border radius top right foo |
.u-bradbr-foo |
Border radius bottom right foo |
.u-bradbl-foo |
Border radius bottom left foo |
Borders
matryoshka/components/utilities/borders.scss
| Responsive Applicable for each screen size |
Custom attributes Responsive shorthand through HTML attributes |
|---|---|
| no | no |
Applies global or side specific border on an element. Based on $ds-borders.
| Border classes | Description |
|---|---|
.u-b-foo |
Border foo |
.u-bt-foo |
Border top foo |
.u-br-foo |
Border right foo |
.u-bb-foo |
Border bottom foo |
.u-bl-foo |
Border left foo |
Colors
matryoshka/components/utilities/colors.scss
| Responsive Applicable for each screen size |
Custom attributes Responsive shorthand through HTML attributes |
|---|---|
| no | no |
Applies color or background color on an element. Based on $ds-colors.
Example
$ds-colors: (
// Automatic color family "foo"
foo: #123456,
// User defined color family called "cool" with reference
cool: (
0: #987654, // "0" means reference color for this family
one: #98ab45, // Custom color
two: #87cd67 // Custom color
),
// Manual color family called "soft"
soft: (
lite: #001122, // Custom color
mid: #334455, // Custom color
heavy: #667788 // Custom color
)
);
$ds-contrasts: (
first: -40,
bar: 50,
last: 100
);
| Color classes for foo color Automatic color family |
Renders |
|---|---|
.u-c-foo |
color: #123456 !important |
.u-c-foo-bar |
color: #* !important* Contrast bar of foo color value |
.u-c-foo-first |
color: #* !important* Contrast first of foo color value |
.u-c-foo-last |
color: #* !important* Contrast last of foo color value |
.u-bc-foo |
background-color: #123456 !important |
.u-bc-foo-bar |
background-color: #* !important* Contrast bar of foo color value |
.u-bc-foo-first |
background-color: #* !important* Contrast first of foo color value |
.u-bc-foo-last |
background-color: #* !important* Contrast last of foo color value |
| Color classes for cool color User defined color family with reference |
Renders |
|---|---|
.u-c-cool |
color: #987654 !important |
.u-c-cool-one |
color: #98ab45 !important |
.u-c-cool-two |
color: #87cd67 !important |
.u-bc-cool |
background-color: #987654 !important |
.u-bc-cool-one |
background-color: #98ab45 !important |
.u-bc-cool-two |
background-color: #87cd67 !important |
| Color classes for soft color Manual color family |
Renders |
|---|---|
.u-c-soft |
Not applicable for a custom color family |
.u-c-soft-lite |
color: #001122 !important |
.u-c-soft-mid |
color: #334455 !important |
.u-c-soft-heavy |
color: #667788 !important |
.u-bc-soft-lite |
background-color: #001122 !important |
.u-bc-soft-mid |
background-color: #334455 !important |
.u-bc-soft-heavy |
background-color: #667788 !important |
Font sizes
matryoshka/components/utilities/font-sizes.scss
| Responsive Applicable for each screen size |
Custom attributes Responsive shorthand through HTML attributes |
|---|---|
| yes | yes |
Applies responsive font size on an element. Based on $ds-font-sizes.
| Font sizes classes | Description |
|---|---|
.u-fs-foo |
Font size foo |
.u-fs-foo-bar |
Font size foo for bar screen size |
Font sizes come with custom responsive data attributes to quickly apply a font size on several screen sizes at once. Just separate screen sizes with space or comma or both.
| Responsive font sizes attributes | Description |
|---|---|
.u-fs-foo="bar, two, thre" |
Font size foo for bar, two and thre screen sizes |
.u-fs-std="bar, two" |
Font size std for bar and thre screen sizes |
Text alignment
matryoshka/components/utilities/text-alignment.scss
| Responsive Applicable for each screen size |
Custom attributes Responsive shorthand through HTML attributes |
|---|---|
| yes | yes |
Applies responsive text alignement on an element.
| Text alignment classes | Description |
|---|---|
.u-ta-left |
Text align left |
.u-ta-center |
Text align center |
.u-ta-right |
Text align right |
.u-ta-justify |
Text align left |
.u-ta-left-bar |
Text align left for bar screen size |
.u-ta-center-bar |
Text align center for bar screen size |
.u-ta-right-bar |
Text align right for bar screen size |
.u-ta-justify-bar |
Text align left for bar screen size |
Text alignment comes with custom responsive data attributes to quickly apply a text alignment on several screen sizes at once. Just separate screen sizes with space or comma or both.
| Responsive text alignment attributes | Description |
|---|---|
.u-ta-center="bar, two, thre" |
text align center for bar, two and thre screen sizes |
.u-ta-right="bar, two" |
Text align right for bar and thre screen sizes |