Rua pattern library

Rua pattern library

Source: src/2-core/_index.scss, line 1

1 Core

Example

Core colours

Primary
Secondary
Success
Information
Warning
Danger

Supporting colours and tones

Astral
Big stone
Pale sky
French gray
Heather
Athens gray
Iceberg
Loafer
Harp
Cinderella
Prelude

Highlight colours

secondary-one Pacific blue
secondary-two Eminence
secondary-three Apple
secondary-four Red ribbon
secondary-five Tango 
 <div class="container">
   <div class="row">
     <h3>Core colours</h3>
       <div class="bg-primary bubble">
         <small class="color-white">Primary</small>
       </div>
       <div class="bg-secondary bubble">
         <small class="color-white">Secondary</small>
       </div>
       <div class="bg-success bubble">
         <small class="color-black">Success</small>
       </div>
       <div class="bg-info bubble">
         <small class="color-black">Information</small>
       </div>
       <div class="bg-warning bubble">
         <small class="color-black">Warning</small>
       </div>
       <div class="bg-danger bubble">
         <small class="color-black">Danger</small>
       </div>
   </div>
   <div class="row">
     <h3>Supporting colours and tones</h3>
       <div class="bg-astral bubble">
         <small class="color-white">Astral</small>
       </div>
       <div class="bg-big-stone bubble">
         <small class="color-white">Big stone</small>
       </div>
       <div class="bg-pale-sky bubble">
         <small class="color-white">Pale sky</small>
       </div>
       <div class="bg-french-gray bubble">
         <small class="color-black">French gray</small>
       </div>
       <div class="bg-heather bubble">
         <small class="color-black">Heather</small>
       </div>
       <div class="bg-athens-gray bubble">
         <small class="color-black">Athens gray</small>
       </div>
       <div class="bg-iceberg bubble">
         <small class="color-black">Iceberg</small>
       </div>
       <div class="bg-loafer bubble">
         <small class="color-black">Loafer</small>
       </div>
       <div class="bg-harp bubble">
         <small class="color-black">Harp</small>
       </div>
       <div class="bg-cinderella bubble">
         <small class="color-black">Cinderella</small>
       </div>
       <div class="bg-prelude bubble">
         <small class="color-black">Prelude</small>
       </div>
   </div>
   <div class="row">
     <h3>Highlight colours</h3>
       <div class="bg-pacific-blue bubble">
         <small class="color-white">secondary-one</small>
         <small class="color-white">Pacific blue</small>
       </div>
       <div class="bg-eminence bubble">
         <small class="color-white">secondary-two</small>
         <small class="color-white">Eminence</small>
       </div>
       <div class="bg-apple bubble">
         <small class="color-white">secondary-three</small>
         <small class="color-white">Apple</small>
       </div>
       <div class="bg-red-ribbon bubble">
         <small class="color-white">secondary-four</small>
         <small class="color-white">Red ribbon</small>
       </div>
       <div class="bg-tango bubble">
         <small class="color-white">secondary-five</small>
         <small class="color-white">Tango</small>
       </div>
   </div>
 </div>

Source: src/2-core/_colors.scss, line 93

1.1.1 Tips

  • Do pair foreground and background colours.
  • Don't Mix light and dark variables.
  • Don't pair foreground with foreground or background with background.

Source: src/2-core/_typography.scss, line 2

1.2 Typography

@todo

Font family: Fira Sans

Font weights:

Example

Regular: 400

ABCDEĒFGHIĪJKLMNOŌPQRSTUŪVWXYZ
aābcdeēfghiījklmnoōpqrstuūvwxz
1234567890,.? !@#$%^&*()”:;’=÷×
¼ ½ ¾ € £ ¥ ©

Medium: 500

ABCDEĒFGHIĪJKLMNOŌPQRSTUŪVWXYZ
aābcdeēfghiījklmnoōpqrstuūvwxz
1234567890,.? !@#$%^&*()”:;’=÷×
¼ ½ ¾ € £ ¥ ©

Bold: 700

ABCDEĒFGHIĪJKLMNOŌPQRSTUŪVWXYZ
aābcdeēfghiījklmnoōpqrstuūvwxz
1234567890,.? !@#$%^&*()”:;’=÷×
¼ ½ ¾ € £ ¥ © 

<p>Regular: 400</p>
<p class="weight-regular">
ABCDEĒFGHIĪJKLMNOŌPQRSTUŪVWXYZ</br>
aābcdeēfghiījklmnoōpqrstuūvwxz</br>
1234567890,.? !@#$%^&*()”:;’=÷×</br>
¼ ½ ¾ € £ ¥ ©
</p>
<p>Medium: 500</p>
<p class="weight-medium">
ABCDEĒFGHIĪJKLMNOŌPQRSTUŪVWXYZ</br>
aābcdeēfghiījklmnoōpqrstuūvwxz</br>
1234567890,.? !@#$%^&*()”:;’=÷×</br>
¼ ½ ¾ € £ ¥ ©
</p>
<p>Bold: 700</p>
<p class="weight-bold">
ABCDEĒFGHIĪJKLMNOŌPQRSTUŪVWXYZ</br>
aābcdeēfghiījklmnoōpqrstuūvwxz</br>
1234567890,.? !@#$%^&*()”:;’=÷×</br>
¼ ½ ¾ € £ ¥ ©
</p>

Example

Add .sr-only class an element to make it only visible to a screen reader
Add .sr-only-focusable class an element to make it only visible to a screen reader and display if when its focused 
<div aria-hidden="true">
 Add aria-hidden='true' attribute an element to hide from a screen reader
</div>
<div class="sr-only">
 Add .sr-only class an element to make it only visible to a screen reader
</div>
<div class="sr-only-focusable">
 Add .sr-only-focusable class an element to make it only visible to a screen reader and display if when its focused
</div>

Source: src/2-core/_width.scss, line 1

1.4 Width

@todo

Example

.mxw-xs
.mxw-sm
.mxw-md
.mxw-lg 
<div class="bg-primary padding-sm margin-b-sm color-white mxw-xs">
 .mxw-xs
</div>
<div class="bg-primary padding-sm margin-b-sm color-white mxw-sm">
 .mxw-sm
</div>
<div class="bg-primary padding-sm margin-b-sm color-white mxw-md">
 .mxw-md
</div>
<div class="bg-primary padding-sm margin-b-sm color-white mxw-lg">
 .mxw-lg
</div>

Example

radius-none
radius-lg
radius-full
radius-t-none
radius-t-lg
radius-t-full
radius-r-none
radius-r-lg
radius-r-full
radius-b-none
radius-b-lg
radius-b-full
radius-l-none
radius-l-lg
radius-l-full
border-dot
border-dot
border-dot
border-dot 
<div class="bg-primary color-white padding-sm margin-b-sm radius-none">
 radius-none
</div>
<div class="bg-primary color-white padding-sm margin-b-sm radius-lg">
 radius-lg
</div>
<div class="bg-primary color-white padding-sm margin-b-sm radius-full">
 radius-full
</div>
<div class="bg-primary color-white padding-sm margin-b-sm radius-t-none">
 radius-t-none
</div>
<div class="bg-primary color-white padding-sm margin-b-sm radius-t-lg">
 radius-t-lg
</div>
<div class="bg-primary color-white padding-sm margin-b-sm radius-t-full">
 radius-t-full
</div>
<div class="bg-primary color-white padding-sm margin-b-sm radius-r-none">
 radius-r-none
</div>
<div class="bg-primary color-white padding-sm margin-b-sm radius-r-lg">
 radius-r-lg
</div>
<div class="bg-primary color-white padding-sm margin-b-sm radius-r-full">
 radius-r-full
</div>
<div class="bg-primary color-white padding-sm margin-b-sm radius-b-none">
 radius-b-none
</div>
<div class="bg-primary color-white padding-sm margin-b-sm radius-b-lg">
 radius-b-lg
</div>
<div class="bg-primary color-white padding-sm margin-b-sm radius-b-full">
 radius-b-full
</div>
<div class="bg-primary color-white padding-sm margin-b-sm radius-l-none">
 radius-l-none
</div>
<div class="bg-primary color-white padding-sm margin-b-sm radius-l-lg">
 radius-l-lg
</div>
<div class="bg-primary color-white padding-sm margin-b-sm radius-l-full">
 radius-l-full
</div>
<div class="color-black padding-sm margin-b-sm border-dot">
 border-dot
</div>
<div class="color-black padding-sm margin-b-sm border-solid">
 border-dot
</div>
<div class="color-black padding-sm margin-b-sm border-b-dot">
 border-dot
</div>
<div class="color-black padding-sm margin-b-sm border-b-solid">
 border-dot
</div>

Example

padding-sm
padding-md
padding-lg
padding-t-sm
padding-t-md
padding-t-lg
padding-r-sm
padding-r-md
padding-r-lg
padding-b-sm
padding-b-md
padding-b-lg
padding-l-sm
padding-l-md
padding-l-lg 
<div class="bg-primary color-white padding-sm margin-b-sm">
 padding-sm
</div>
<div class="bg-primary color-white padding-md margin-b-sm">
 padding-md
</div>
<div class="bg-primary color-white padding-lg margin-b-sm">
 padding-lg
</div>
<div class="bg-primary color-white padding-t-sm margin-b-sm">
 padding-t-sm
</div>
<div class="bg-primary color-white padding-t-md margin-b-sm">
 padding-t-md
</div>
<div class="bg-primary color-white padding-t-lg margin-b-sm">
 padding-t-lg
</div>
<div class="bg-primary color-white padding-r-sm margin-b-sm">
 padding-r-sm
</div>
<div class="bg-primary color-white padding-r-md margin-b-sm">
 padding-r-md
</div>
<div class="bg-primary color-white padding-r-lg margin-b-sm">
 padding-r-lg
</div>
<div class="bg-primary color-white padding-b-sm margin-b-sm">
 padding-b-sm
</div>
<div class="bg-primary color-white padding-b-md margin-b-sm">
 padding-b-md
</div>
<div class="bg-primary color-white padding-b-lg margin-b-sm">
 padding-b-lg
</div>
<div class="bg-primary color-white padding-l-sm margin-b-sm">
 padding-l-sm
</div>
<div class="bg-primary color-white padding-l-md margin-b-sm">
 padding-l-md
</div>
<div class="bg-primary color-white padding-l-lg margin-b-sm">
 padding-l-lg
</div>