Donatello Styleguide

Donatello Styleguide

Source: css/8-trumps/_trumps.scss, line 1

8 Trumps

Only affect one piece of the DOM at a time. These are the utility classes or overrides and usually carry !important.

Source: css/8-trumps/_utilities.scss, line 1

8.1 Utilities

A utility class applies a single rule or a simple universal pattern.

Source: css/8-trumps/utilities.alignment.scss, line 1

8.1.1 Alignment

Aligns your text. When aligning inside a table layout the following utilities are also possible.

  • u-align-top
  • u-align-bottom
  • u-align-middle

Example

Left

Center

Right

Justify

<p class="u-align-left">Left</p>
<p class="u-align-center">Center</p>
<p class="u-align-right">Right</p>
<p class="u-align-justify">Justify</p>

Source: css/8-trumps/utilities.clearfix.scss, line 1

8.1.2 Clearfix

For all your float troubles.

  • u-clearfix

Example

Left
Right
Default
<div class="u-float-left">Left</div>
<div class="u-float-right">Right</div>
<div class="u-float-none">Default</div>

Source: css/8-trumps/utilities.hidden.scss, line 1

8.1.4 Hidden

Utility class to hide elements.

  • u-hidden

Source: css/8-trumps/utilities.margin.scss, line 1

8.1.5 Margins

Give an element a margin with the value from the grid gutter width.

  • u-marg-top
  • u-marg-right
  • u-marg-bottom
  • u-marg-left

Source: css/8-trumps/utilities.max-width.scss, line 1

8.1.6 Max width

Max-width utility for an element.

  • u-max-width-none

Source: css/8-trumps/utilities.text.scss, line 1

8.1.7 Text

Typography utilities.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, quis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, quis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, quis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, quis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, quis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, quis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, quis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, quis.

<p class="u-text-bold">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, quis.</p>
<p class="u-text-italic">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, quis.</p>
<p class="u-text-small-capps">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, quis.</p>
<p class="u-text-caps">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, quis.</p>
<p class="u-text-underline">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, quis.</p>
<p class="u-text-no-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, quis.</p>
<p class="u-text-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, quis.</p>
<p class="u-text-hyphenate">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, quis.</p>