Anchors

/../hex-core/src/helpers/_anchors.scss

Modify the color and the decoration of the anchor. Available classes:

  • .light
  • .secondary
  • .no-decoration

This is a link

<div class="preview-inverse">
  <p>This is a <a class="light">link</a></p>
</div>

This is a link

<div class="preview-light-blue">
  <p>This is a <a class="secondary">link</a></p>
</div>

This is a link

<div>
  <p>This is a <a class="no-decoration">link</a></p>
</div>

Animations

/../hex-core/src/helpers/_animations.scss

Different animations for the elements:

  • .slide-in
  • .fade-in

This is a text with an animation

This is a text with an animation

<p class="slide-in">
  This is a text with an animation
</p>
<p class="fade-in">
  This is a text with an animation
</p>

Backgrounds

/../hex-core/src/helpers/_backgrounds.scss

Modify the background color of the given element.

<div class="container padding-v-bigger bg-bitnami"></div>
<div class="container padding-v-bigger bg-iron"></div>
<div class="container padding-v-bigger bg-dark"></div>
<div class="container padding-v-bigger bg-white"></div>
<div class="container padding-v-bigger bg-accent"></div>
<div class="container padding-v-bigger bg-action"></div>
<!-- Other names -->
<div class="container padding-v-bigger margin-t-bigger bg-brand"></div>
<div class="container padding-v-bigger bg-light"></div>
<div class="container padding-v-bigger bg-dark"></div>
<div class="container padding-v-bigger bg-base"></div>
<div class="container padding-v-bigger bg-accent"></div>
<div class="container padding-v-bigger bg-action"></div>

Box Shadows

/../hex-core/src/helpers/_box-shadows.scss

Apply box shadows to the class. The number in the class represents the visual height of the box. Higher numbers will display the boxes in a higher level.

.shadow-reset
.shadow-1
.shadow-2
.shadow-3
.shadow-4
.shadow-5
.elevation-reset
.elevation-1
.elevation-2
.elevation-3
.elevation-4
.elevation-5
<div class="container text-c margin-v-big">
  <div class="row">
    <div class="col-2">
      <div class="padding-v-enormous shadow-reset">.shadow-reset</div>
    </div>
    <div class="col-2">
      <div class="padding-v-enormous shadow-1">.shadow-1</div>
    </div>
    <div class="col-2">
      <div class="padding-v-enormous shadow-2">.shadow-2</div>
    </div>
    <div class="col-2">
      <div class="padding-v-enormous shadow-3">.shadow-3</div>
    </div>
    <div class="col-2">
      <div class="padding-v-enormous shadow-4">.shadow-4</div>
    </div>
    <div class="col-2">
      <div class="padding-v-enormous shadow-5">.shadow-5</div>
    </div>
  </div>
  <!-- An alias -->
  <div class="row">
    <div class="col-2">
      <div class="padding-v-enormous elevation-reset">.elevation-reset</div>
    </div>
    <div class="col-2">
      <div class="padding-v-enormous elevation-1">.elevation-1</div>
    </div>
    <div class="col-2">
      <div class="padding-v-enormous elevation-2">.elevation-2</div>
    </div>
    <div class="col-2">
      <div class="padding-v-enormous elevation-3">.elevation-3</div>
    </div>
    <div class="col-2">
      <div class="padding-v-enormous elevation-4">.elevation-4</div>
    </div>
    <div class="col-2">
      <div class="padding-v-enormous elevation-5">.elevation-5</div>
    </div>
  </div>
</div>

Flex Align

/../hex-core/src/helpers/_flex-align.scss

The flex helper will allow to align content vertically. When used in the parent element, the alignment will apply to all the child elements.

  • .flex.align-start: Top alignment
  • .flex.align-end: Bottom alignment
  • .flex.aling-center: Middle alignment

If a specific child element needs a different alignment, it can be redefined using the following classes.

  • .align-start
  • .align-center
  • .align-end
Person name avatar Person name avatar Person name avatar Person name avatar
A very long long long long long long long long long long long long long long long long long long long long long long long long long long long long content
The element is placed in the middle of the parent element

A very long long long long long long long long long long long long long long long long long long long long long long long long long long long long content
The element is placed in the middle of the parent element
This element is not vertical aligned
<div class="container container-small">
  <div class='flex align-center' style="border: 1px solid #ccc">
    <img class="avatar avatar-big align-start"
      src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Person name avatar" />
    <img class="avatar avatar-big"
      src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Person name avatar" />
    <img class="avatar avatar-big align-end"
      src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Person name avatar" />
    <img class="avatar avatar-big align-start margin-r-big"
      src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Person name avatar" />
    <div class="margin-r-big" style="width:350px;">
      <article>A very long long long long long long long long long long long long long long long long long long long long long long long long long long long long content</article>
    </div>
    <span>The element is placed in the middle of the parent element</span>
  </div>
  <br/>
  <div class='flex' style="border: 1px solid #ccc">
    <div style="width:350px; margin-right: 2em;">
      <article>A very long long long long long long long long long long long long long long long long long long long long long long long long long long long long content</article>
    </div>
    <div style="width:350px; margin-right: 2em;" class='align-center'>
      The element is placed in the middle of the parent element
    </div>
    <div style="width:350px;">
      This element is not vertical aligned
    </div>
  </div>
</div>

Button Colors

/../hex-core/src/helpers/_forms.scss

Modify the color of the buttons. Available classes:

  • .button-primary
  • .button-accent
  • .button-action
  • .button-danger
<button class="button button-primary">Submit</button>
<a class="button button-accent">Link button</a>
<a class="button button-action">Link button</a>
<a class="button button-danger">Link button</a>
<a class="button">Link button</a>

Button Sizes

/../hex-core/src/helpers/_forms.scss

Modify the size of the buttons. Available classes:

  • .button-small
  • .button-big
  • .button-bigger
<button class="button button-primary button-small">Submit</button>
<a class="button button-accent">Link button</a>
<a class="button button-action button-big">Link button</a>
<a class="button button-bigger">Link button</a>
/../hex-core/src/helpers/_forms.scss

Add a caret icon to the right of the button.

  • .button-dropdown
  • .button-dropdown-open

See https://css-tricks.com/snippets/css/css-triangle/.

<button class="button button-dropdown">Submit</button>
<a class="button button-accent button-dropdown button-dropdown-open">Link button</a>
<a class="button button-action button-big button-dropdown">Link button</a>
<a class="button button-bigger button-dropdown button-dropdown-open">Link button</a>

Form reverse

/../hex-core/src/helpers/_forms.scss

The form-reverse modifier changes the form field styles inside the current container. This is really useful for forms that are placed inside a container with a dark background.

For known dark backgrounds, the form-reverse modifier is added automatically. The list of known dark backgrounds is:

NOTE: This behaviour is very opinionated and it may cause issues in some situations. So, you can disable it using the form-reverse-reset class.

<form>
  <div>
    <label for="username">Username</label>
    <input name="username" id="username" placeholder="Your username" />
  </div>
  <div>
    <label for="password">Password</label>
    <input name="password" id="password" placeholder="A secure password" />
  </div>
</form>

<section class="gradient-brand margin-t-big padding-normal">
  <form>
    <div>
      <label for="username">Username</label>
      <input name="username" id="username" placeholder="Your username" />
    </div>
    <div>
      <label for="password">Password</label>
      <input name="password" id="password" placeholder="A secure password" />
    </div>
  </form>
</section>

Linear Gradients

/../hex-core/src/helpers/_gradients.scss

Add a gradient for the background of an element.

Other angles

<div class="gradient-brand" style="height: 100px"></div>
<div class="gradient-accent" style="height: 100px"></div>
<div class="gradient-action" style="height: 100px"></div>

<h3>Other angles</h3>

<div class="gradient-45-brand" style="height: 100px"></div>
<div class="gradient-90-accent" style="height: 100px"></div>
<div class="gradient-135-action" style="height: 100px"></div>
<div class="gradient-180-brand" style="height: 100px"></div>
<div class="gradient-225-accent" style="height: 100px"></div>
<div class="gradient-270-action" style="height: 100px"></div>

Subtitle

/../hex-core/src/helpers/_headers.scss

Modify the color and the margin-top of a header. It should be combined with a normal header.

The best of both worlds

The ease of Bitnami backed by the compute power of Google
<h1>The best of both worlds</h1>
<h5 class="subtitle">The ease of Bitnami backed by the compute power of Google</h5>

Inverse

/../hex-core/src/helpers/_headers.scss

Use this style with dark background colors

The best of both worlds

<h1 class="inverse">The best of both worlds</h1>

Responsive Images

/../hex-core/src/helpers/_images.scss

Responsive images are made using .img-fluid. It scales with the parent element because we apply max-width: 100%; and height: auto;

SVG files will grow up to the size of the parent element and no SVG files will grow up its own size to avoid blurry images.

Bitnami-Logo-Full-Color
<div class="container container-tiny">
  <img src="/assets/images/logo.svg" class="img-fluid"/>
  <svg class="img-fluid" width="420" height="141" viewBox="0 0 420 141" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Bitnami-Logo-Full-Color</title><defs><path d="M7.187 75.559C2.698 72.968.301 70.402.301 65.32V7.476c0-2.643.705-5.022 1.845-7.034l24.345 13.99v72.273L7.187 75.56z" id="a"/><linearGradient x1="18.01%" y1="80.098%" x2="77.804%" y2="28.779%" id="c"><stop stop-color="#00437C" offset="0%"/><stop stop-color="#093266" offset="100%"/></linearGradient><path d="M8.673 47.68L.45 42.932V12.691l15.23 8.792L51.908.566V.432L76.35 14.478c-1.178 2.14-2.937 3.913-5.25 5.248L22.7 47.671a14.004 14.004 0 0 1-7.02 1.902 14 14 0 0 1-7.006-1.893" id="d"/><linearGradient x1="0%" y1="50%" y2="50%" id="f"><stop stop-color="#00437C" offset="0%"/><stop stop-color="#3984B5" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path fill="#15211F" fill-rule="nonzero" d="M197.844 51.214h10.357v-9.976h-10.357zM197.844 105.334h10.357v-49h-10.357zM180.768 80.81c0 4.995-.669 8.93-1.989 11.695-1.303 2.744-3.825 4.078-7.71 4.078-2.673 0-4.75-.682-6.171-2.025-1.438-1.378-2.407-3.201-2.88-5.419-.492-2.293-.74-5.096-.74-8.328 0-3.23.248-6.02.74-8.297.473-2.218 1.441-4.024 2.877-5.368 1.427-1.335 3.504-2.012 6.174-2.012 2.676 0 4.67.647 6.096 1.98 1.422 1.333 2.385 3.14 2.861 5.368.493 2.298.742 5.1.742 8.329m8.366-15.012c-.82-2.218-2.011-4.12-3.54-5.646-1.323-1.356-3.063-2.445-5.171-3.24-2.08-.784-4.365-1.181-6.794-1.181-2.733 0-5.165.425-7.228 1.263-1.857.756-3.577 1.995-5.124 3.688V36.564l-10.374 5.472v63.298h10.183v-4.63c1.664 1.851 3.377 3.133 5.217 3.906 2.025.85 4.459 1.281 7.231 1.281 2.463 0 4.774-.398 6.871-1.182 2.152-.804 3.849-1.854 5.186-3.204 1.532-1.516 2.724-3.418 3.541-5.65a28.402 28.402 0 0 0 1.64-6.933c.243-2.388.367-5.123.367-8.127 0-3.005-.124-5.74-.367-8.13a27.85 27.85 0 0 0-1.638-6.866M226.114 42.29l-10.373 5.47v43.785c0 2.478.513 4.779 1.525 6.835 1.01 2.08 2.56 3.778 4.604 5.046 2.046 1.266 4.558 1.908 7.467 1.908h6.144v-8.94h-4.328c-3.39 0-5.039-1.737-5.039-5.311V65.276h9.367v-8.098h-9.367V42.29zM265.383 55.732c-2.474 0-4.879.479-7.152 1.422a16.501 16.501 0 0 0-5.394 3.586v-4.406h-10.18v49h10.372v-29.77c0-3.435.914-6.06 2.713-7.801 1.825-1.745 4.174-2.63 6.983-2.63 1.832 0 3.417.363 4.849 1.11 1.4.717 2.52 1.869 3.332 3.427.828 1.559 1.249 3.542 1.249 5.893v29.77h10.371V74.086c0-5.986-1.681-10.643-4.994-13.842-3.058-2.993-7.146-4.511-12.15-4.511M408.725 105.334h10.359v-49h-10.359zM408.726 51.214h10.358v-9.976h-10.358zM385.12 55.732c-6.173 0-11.27 2.323-15.159 6.907-3.128-4.584-7.763-6.907-13.785-6.907-2.551 0-4.99.49-7.248 1.455a16.684 16.684 0 0 0-5.293 3.551v-4.404h-10.183v49h10.373v-29.77c0-3.435.913-6.06 2.715-7.801 1.824-1.745 4.173-2.63 6.983-2.63 1.833 0 3.418.363 4.845 1.11 1.399.715 2.519 1.866 3.332 3.427.83 1.554 1.25 3.537 1.25 5.893v29.77h10.373V75.102c0-3.15.944-5.624 2.806-7.35 1.904-1.761 4.152-2.617 6.875-2.617 2.774 0 5.06.862 6.79 2.564 1.73 1.699 2.607 4.346 2.607 7.865v29.77h10.371V74.086c0-5.855-1.755-10.512-5.218-13.843-3.105-2.993-7.288-4.51-12.434-4.51M317.063 84.499v3.108c0 6.586-5.54 9.534-11.033 9.534-5.838 0-8.673-1.966-8.673-6.01 0-2.13.81-4.055 2.115-5.021 1.437-1.07 3.578-1.611 6.364-1.611h11.227zm-9.888-28.768c-4.13 0-7.566.527-10.215 1.565-2.67 1.046-5.158 2.922-7.396 5.577l-.196.232 6.855 6.444.217-.275c1.332-1.69 2.742-2.878 4.188-3.533 1.45-.656 3.53-.989 6.183-.989 3.587 0 6.227.707 7.85 2.1 1.594 1.396 2.402 3.61 2.402 6.58v2.47h-12.478c-3.598 0-6.71.597-9.25 1.778-2.545 1.182-4.497 2.872-5.8 5.022-1.222 2.003-1.953 5.03-1.953 8.095 0 4.36 1.315 7.933 3.912 10.628 1.506 1.488 3.366 2.615 5.528 3.351 2.169.74 4.755 1.115 7.689 1.115 2.977 0 5.478-.393 7.432-1.168 1.765-.7 3.483-1.824 5.113-3.343v3.954h10.181v-32.65c0-11.249-6.817-16.953-20.262-16.953z"/><path d="M78.432 61.949l-15.206-8.78-15.206 8.78 15.205 8.865z" fill="#00577B"/><path d="M63.226 88.292l15.206-8.782V61.948L63.226 70.73z" fill="#1E384B"/><path d="M63.225 88.292L48.02 79.51V61.948l15.205 8.782z" fill="#15211F"/><path d="M99.455 50.024v41.704l-36.23 20.917-36.233-20.917v-.063l-24.345 13.99c1.276 2.251 3.097 4.043 5.113 5.207 16.067 9.276 32.132 18.553 48.2 27.828 4.715 2.724 9.79 2.737 14.48.03 16.104-9.3 32.212-18.599 48.316-27.897 4.51-2.604 6.889-6.736 6.889-11.99V43.242c0-2.736-.597-5.175-1.748-7.264L99.455 50.024z" fill="#00437C" fill-rule="nonzero"/><g><g transform="matrix(1 0 0 -1 .502 106.097)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)" fill="url(#c)" fill-rule="nonzero"><path d="M7.187 75.559C2.698 72.968.301 70.402.301 65.32V7.476c0-2.643.705-5.022 1.845-7.034l24.345 13.99v72.273L7.187 75.56z"/></g></g></g><g><g transform="matrix(1 0 0 -1 47.547 50.457)"><mask id="e" fill="#fff"><use xlink:href="#d"/></mask><g mask="url(#e)" fill="url(#f)" fill-rule="nonzero"><path d="M8.673 47.68L.45 42.932V12.691l15.23 8.792L51.908.566V.432L76.35 14.478c-1.178 2.14-2.937 3.913-5.25 5.248L22.7 47.671a14.004 14.004 0 0 1-7.02 1.902 14 14 0 0 1-7.006-1.893"/></g></g></g></g></svg>
</div>

Lists without styles

/../hex-core/src/helpers/_lists.scss

Remove the decoration (bullets) of the list.

  • Can't find what you're looking for?
  • Click here for account questions
  • Click here for app questions
<ul class="remove-style">
  <li>Can't find what you're looking for?</li>
  <li>Click here for account questions</li>
  <li>Click here for app questions</li>
</ul>

Text alignment

/../hex-core/src/helpers/_positions.scss

These classes help us to modify the default aligntment of the text in our views.

If the parent is displayed using flex, it will also work because justify-content: left | center | right is applied.

Left alignment

Right alignment

Center alignment

<p class="text-l">Left alignment</p>
<p class="text-r">Right alignment</p>
<p class="text-c">Center alignment</p>

Floating

/../hex-core/src/helpers/_positions.scss

Also, we can update the float property of our blocks

Float left
Float right
<div class="float-l">Float left</div>
<div class="float-r">Float right</div>
Remove floating
<div class="float-n">Remove floating</div>

Clearfix

/../hex-core/src/helpers/_positions.scss

Clear floating elements in the current container

Float left
Float right
<div class="clearfix">
  <div class="float-l">Float left</div>
  <div class="float-r">Float right</div>
</div>
Remove floating
<div class="float-n">Remove floating</div>

Separator height

/../hex-core/src/helpers/_separators.scss

Modify the height and the width of the separator.











<hr class="separator-small"/>
<hr />
<hr class="separator-big"/>
<hr class="separator-bigger"/>
<hr class="separator-enormous"/>
<hr />
<hr class="separator-70"/>
<hr class="separator-50"/>
<hr class="separator-30"/>
<hr class="separator-15"/>

Padding

/../hex-core/src/helpers/_spacing.scss

Reduce or increase the default padding based on the base size unity.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

<p class="padding-reset">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="padding-tiny">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="padding-small">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="padding-normal">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="padding-big">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="padding-bigger">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="padding-enormous">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="padding-giant">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="padding-giant">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>

Padding - specific

/../hex-core/src/helpers/_spacing.scss

Reduce or increase a padding property based on the base size unity.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

<p class="padding-t-reset">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="padding-r-tiny">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="padding-b-small">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="padding-l-normal">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>

Padding - horizontal and vertical

/../hex-core/src/helpers/_spacing.scss

Reduce or increase the vertical or horizontal padding based on the base size unity.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

<p class="padding-v-big">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="padding-h-bigger">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>

Padding - responsive

/../hex-core/src/helpers/_spacing.scss

Reset the padding property for a specific media query. You can see here working in the Divider Component

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

<p class="padding-bigger padding-reset-b-tablet">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="padding-bigger padding-reset-on-tablet">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="padding-bigger padding-reset-a-tablet">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>

Margin

/../hex-core/src/helpers/_spacing.scss

Reduce or increase the default margin based on the base size unity.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

<p class="margin-reset">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="margin-tiny">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="margin-small">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="margin-normal">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="margin-big">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="margin-bigger">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="margin-enormous">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="margin-giant">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="margin-giant">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>

Margin - specific

/../hex-core/src/helpers/_spacing.scss

Reduce or increase a margin property based on the base size unity.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

<p class="margin-t-reset">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="margin-r-tiny">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="margin-b-small">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="margin-l-normal">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>

Margin - horizontal and vertical

/../hex-core/src/helpers/_spacing.scss

Reduce or increase the vertical or horizontal margin based on the base size unity.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

<p class="margin-v-big">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="margin-h-bigger">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>

Margin - responsive

/../hex-core/src/helpers/_spacing.scss

Reset the margin property for a specific media query.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

<p class="margin-reset-b-tablet">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="margin-reset-on-tablet">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="margin-reset-a-tablet">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>

Margin - center

/../hex-core/src/helpers/_spacing.scss

Apply a margin auto to center elements.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB) to get developers productive immediately - with all the most common tools ready to go.

<p class="margin-c" style="max-width: 500px;">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>
<p class="margin-vc-bigger" style="max-width: 500px;">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB) to get developers productive immediately - with all the most
  common tools ready to go.
</p>

Striped

/../hex-core/src/helpers/_tables.scss

Show a light gray background in even rows.

ID Name Downloads Stars
123 Gitlab 42343 5
321 Moodle 54312 4.5
753 Wordpress 23434 4.3
<table class="striped">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Downloads</th>
      <th>Stars</th>
    </tr>
  </thead>
  <body>
    <tr>
      <td>123</td>
      <td>Gitlab</td>
      <td>42343</td>
      <td>5</td>
    </tr>
    <tr>
      <td>321</td>
      <td>Moodle</td>
      <td>54312</td>
      <td>4.5</td>
    </tr>
    <tr>
      <td>753</td>
      <td>Wordpress</td>
      <td>23434</td>
      <td>4.3</td>
    </tr>
  </body>
</table>

Typography size

/../hex-core/src/helpers/_typography.scss

Reduce or increase the default font-size of an element.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB).

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB).

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB).

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB).

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB).

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB).

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB).

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB).

<p class="type-tiny">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB).
</p>
<p class="type-small">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB).
</p>
<p class="type-normal">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB).
</p>
<p class="type-big">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB).
</p>
<p class="type-bigger">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB).
</p>
<p class="type-enormous">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB).
</p>
<p class="type-giant">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB).
</p>
<p class="type-huge">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB).
</p>

Typography color

/../hex-core/src/helpers/_typography.scss

Change the default color of an element. If you want to use the type-color-iron helper, the reverse helper may interest you.

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB).

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB).

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB).

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB).

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB).

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB).

<p class="type-color-bitnami">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB).
</p>
<p class="type-color-accent">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB).
</p>
<p class="type-color-iron padding-normal bg-dark">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB).
</p>
<p class="type-color-action">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB).
</p>
<p class="type-color-white padding-normal bg-dark">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB).
</p>
<p class="type-color-light-blue">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (MariaDB).
</p>

Typography color reverse

/../hex-core/src/helpers/_typography.scss

The type-color-reverse modifier changes the color for headers, links and other text elements inside the current container. This is really useful for text elements that are placed inside a container with a dark background.

For known dark backgrounds, the type-color-reverse modifier is added automatically. The list of known dark backgrounds is:

NOTE: This behaviour is very opinionated and it may cause issues with anchors in some situations like headers. So, you can disable it using the type-color-reverse-anchor-reset class.

Unknown dark background (with type-color-reverse)

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB).

Known flat backgrounds (no modifier required)

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB).
For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB).
For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB).
For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB).

Known gradient backgrounds (no modifier required)

For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB).
For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB).
For example, our Rails Development Container includes full Rails environment and SQL database (MariaDB).
<h2>Unknown dark background (with type-color-reverse)</h2>
<div class="padding-normal type-color-reverse" style="background-color: black;">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (<a href="#">MariaDB</a>).
</div>

<h2>Known flat backgrounds (no modifier required)</h2>
<div class="bg-brand padding-normal">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (<a href="#">MariaDB</a>).
</div>
<div class="bg-dark padding-normal">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (<a href="#">MariaDB</a>).
</div>
<div class="bg-accent padding-normal">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (<a href="#">MariaDB</a>).
</div>
<div class="bg-action padding-normal">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (<a href="#">MariaDB</a>).
</div>

<h2>Known gradient backgrounds (no modifier required)</h2>
<div class="gradient-brand padding-normal">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (<a href="#">MariaDB</a>).
</div>
<div class="gradient-accent padding-normal">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (<a href="#">MariaDB</a>).
</div>
<div class="gradient-135-action padding-normal">
  For example, our Rails Development Container includes full Rails environment and
  SQL database (<a href="#">MariaDB</a>).
</div>

Typography uppercase

/../hex-core/src/helpers/_typography.scss

Set the text to Uppercase

Bitnami rocks!

<h1 class="type-uppercase">
  Bitnami rocks!
</h1>

Typography capitalize

/../hex-core/src/helpers/_typography.scss

Set the text to Capitalize

Bitnami rocks!

<h1 class="type-capitalize">
  Bitnami rocks!
</h1>

Typography weight

/../hex-core/src/helpers/_typography.scss

By default, the weight of the text is regular (400). For certain situations, we may need to increase the weight of the typography.

NOTE: Interstate is a bit special font-family. Light is represented by 400 and regular by 500. That's the reason of the values on these helpers.

You may need to change the typo weight to light, regular or bold

<p>
  You may need to change the typo weight to
  <span class="type-light">light</span>,
  <span class="type-regular">regular</span>
  or <span class="type-bold">bold</span>
</p>