Utils

Utils are re-usable class names that can give an element desired styling.

See the full list of utils on GitHub (opens new window).

Adding New Utils

Whenever you’re finding that you’re using a style frequently setting the same properties on an element, consider abstracting it into a utility.

Rules of thumb

• Utilities should be reserved for frequently used things. If you only need it once or twice, it probably doesn’t need to be a utility
• Dont abuse utils. We dont want hundreds of utilities for margins or other trivial things. You will still need to write css in your application.

Typography

Each of the following applies font-family, font-size, font-weight and line-height.

<template>
  <div>
    <div class="ci-text-h1">.ci-text-h1</div><br>
    <div class="ci-text-h2">.ci-text-h2</div><br>
    <div class="ci-text-h3">.ci-text-h3</div><br>
    <div class="ci-text-h4">.ci-text-h4</div><br>
    <div class="ci-text-h5">.ci-text-h5</div><br>
    <div class="ci-text-h6">.ci-text-h6</div><br>
    <div class="ci-text-lg">.ci-text-lg</div><br>
    <div class="ci-text-md">.ci-text-md</div><br>
    <div class="ci-text-sm">.ci-text-sm</div><br>
    <div class="ci-text-xs">.ci-text-xs</div><br>
  </div>
</template>

Font Styles

Use these classes to adjust the font-weight, style or text-decoration of your text.

<template>
  <div>
    <div class="ci-font-normal">Some text</div><br>
    <div class="ci-font-bold">Some text</div><br>
    <div class="ci-italic">Some text</div><br>
    <div class="ci-underline">Some text</div><br>
  </div>
</template>

Line Height

Use these classes to adjust the line-height of your text.

<template>
  <div>
    <p class="ci-leading-none">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur euismod mi odio, id pretium orci rhoncus non. Sed laoreet sem ex, nec eleifend ipsum pulvinar sed. Quisque magna lacus, fringilla sollicitudin aliquet non, lacinia eu ligula. Vivamus id dignissim nunc. Phasellus laoreet velit eget nisi commodo, rhoncus efficitur lectus congue. Sed sodales sem nisi, vel tempus eros malesuada eu. Pellentesque vehicula tincidunt congue.
    </p>
    <p class="ci-leading-sm">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur euismod mi odio, id pretium orci rhoncus non. Sed laoreet sem ex, nec eleifend ipsum pulvinar sed. Quisque magna lacus, fringilla sollicitudin aliquet non, lacinia eu ligula. Vivamus id dignissim nunc. Phasellus laoreet velit eget nisi commodo, rhoncus efficitur lectus congue. Sed sodales sem nisi, vel tempus eros malesuada eu. Pellentesque vehicula tincidunt congue.
    </p>
    <p class="ci-leading-md">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur euismod mi odio, id pretium orci rhoncus non. Sed laoreet sem ex, nec eleifend ipsum pulvinar sed. Quisque magna lacus, fringilla sollicitudin aliquet non, lacinia eu ligula. Vivamus id dignissim nunc. Phasellus laoreet velit eget nisi commodo, rhoncus efficitur lectus congue. Sed sodales sem nisi, vel tempus eros malesuada eu. Pellentesque vehicula tincidunt congue.
    </p>
  </div>
</template>

Scrollbars

Use .ci-scrollbars to give an element styled scrollbars.

<template>
  <div class="ci-scrollbars my-demo">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur euismod mi odio, id pretium orci rhoncus non. Sed laoreet sem ex, nec eleifend ipsum pulvinar sed. Quisque magna lacus, fringilla sollicitudin aliquet non, lacinia eu ligula. Vivamus id dignissim nunc. Phasellus laoreet velit eget nisi commodo, rhoncus efficitur lectus congue. Sed sodales sem nisi, vel tempus eros malesuada eu. Pellentesque vehicula tincidunt congue.</p>

    <p>Sed malesuada faucibus ipsum sed ultricies. Duis viverra sapien hendrerit orci facilisis, ac vestibulum libero vehicula. Proin nunc velit, mollis non ligula nec, elementum commodo lectus. Aliquam erat volutpat. Pellentesque vehicula in dui et dictum. Mauris dapibus mauris sit amet mi posuere imperdiet. Nullam sagittis ultricies erat vel commodo. Vestibulum cursus magna libero, et ornare elit luctus nec. Fusce commodo quam nec condimentum condimentum.</p>

    <p>Phasellus aliquet, felis quis rutrum pulvinar, metus ligula ultricies sapien, ac ultrices mauris ex a quam. Sed sodales risus at feugiat mollis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sodales magna at varius vulputate. Phasellus efficitur, massa nec mattis fringilla, tellus eros posuere nibh, eu elementum augue nibh at mi. Etiam sollicitudin nulla ut mauris pellentesque, vel cursus mauris pretium. Phasellus molestie non nisl in tincidunt. Proin euismod diam leo, sed viverra lectus convallis eget. Proin lacus diam, faucibus vitae ligula sed, ornare auctor lectus. Vestibulum vitae dictum est. Ut eu finibus felis, in posuere dolor. Donec volutpat ultricies nisl vitae molestie. Phasellus eleifend neque id libero tempor dignissim vel varius lacus. Maecenas fermentum leo vitae neque commodo scelerisque.</p>
  </div>
</template>
<style>
.my-demo {
  height: 150px;
  overflow-y: scroll;
}
</style>

Usage

Importing the utils.scss file should be done with its alias @utils.scss, for example when calling it from a component's style section:

<style lang="scss">
@import '@utils.scss'

// rest of file
</style>