unibz Pattern Library

Dimensions 

<div class="u-push-top">
    Margin top of one space.
</div>

<div class="u-push-horz-4@lg">
    4px horizontal margin on large screens.
</div>

<div class="u-padd-horz-half@lg u-pull-top-quarter@sm u-pull-top-none@md">
    Half space horizontal padding on large screens. Quarter space negative margin on small tablet screens, reseted to 0 on regular tablet screens
</div>

<div class="u-w-140">
    140px wide element.
</div>
 
<div class="u-push-top">
  Margin top of one space.
</div>

<div class="u-push-horz-4@lg">
  4px horizontal margin on large screens.
</div>

<div class="u-padd-horz-half@lg u-pull-top-quarter@sm u-pull-top-none@md">
  Half space horizontal padding on large screens. Quarter space negative margin on small tablet screens, reseted to 0 on regular tablet screens
</div>

<div class="u-w-140">
  140px wide element.
</div>
 
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio eget.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio eget.",
  "linkTarget": "_self",
  "url": "https://www.unibz.it",
  "image": "/assets/bridge-524-295.jpg"
}

Spacing utilities

Utility classes to create whitespace between elements, the class names follow this pattern:

.u-<property>-<direction>-<amount>@<media-query>

<properties>

  • push = margin
  • pull = negative margin
  • padd = padding

<direction>

  • top = top
  • btm = bottom
  • lft = left
  • rgt = right
  • vert = vertical - top bottom
  • horz = horizontal - left right
  • (nothing) = all sides

<ammount>

Most amounts are multiples of the $space variable wich ammounts to 24px and is equivalent to the line-height of a text paragraph.

  • 1 = 1px
  • 2 = 2px
  • 3 = 3px
  • 4 = 4px
  • quarter = $space-quarter,
  • half = $space-half,
  • threeQuarter = $space-threeQuarter,
  • (nothing) = $space,
  • oneAndHalf = $space-oneAndHalf,
  • double = $space-double,
  • none = 0

<media-query>

  • (noting) = no media query, applies from mobile onward (all screen sizes)
  • sm = small tablet, applies from 596px onward
  • md = tablet applies, from 760px onward
  • lg = desktop applies, from 1024px onward
  • print = applies only on print media

Width utilities

Small set of classes that set the width of elements. Use with caution as they are not responsive.