Aqua DS - Component Library

Quick Start

Framework Implementation

WebComponents

Vue 3

React

Angular

Components

Data Types

Directives

Style Customization

Theming

Custom Styles

Layout styling (Bulma)

Icons

ChangeLog

FAQ

Aqua Basis

Aqua Composition

Aqua integrates Bulma as a helper framework to define tokens related to spacing and layout.

By combining them, you’ll be able to create robust layouts and applications faster, using simple inline classes that reduce repetitive styling work.

Why Bulma?

Bulma provides a lightweight and responsive grid system that perfectly complements Aqua’s design system.

With this approach, developers can take advantage of both Aqua tokens and Bulma utilities to build flexible, consistent interfaces.

This means you can use Aqua’s custom style helpers together with Bulma’s grid and layout classes to maximize the potential of our design system.

Compatibility

Aqua DS and Bulma classes are fully compatible — you can combine them freely in the same element.

For example, you can use Bulma’s grid system with Aqua’s color and spacing tokens:

<div class="grid has-3-cols">
  <div class="cell aq-background-teal-30 p-3 aq-border-radius-md">Item</div>
</div>

Features

You can investigate more about each feature that are implementated in Aqua in the next links:

🏗 Grid

Grid

📦 Containers

Container

📐 Spacing and Margins

Spacing helpers

📏 Levels

Level

Use

Once Aqua DS is installed/implemented in your project, you can directly use these classes as inline styles to apply layout and spacing helpers.

Column system by bercetage

When you don’t specify column sizes, Bulma automatically distributes the remaining space among your elements.

 <div class="columns">
  <div class="column is-four-fifths  aq-background-blue-30 p-3 m-2">is-four-fifths</div>
  <div class="column  aq-background-blue-5 p-3 m-2">Auto</div>
  <div class="column  aq-background-blue-5 p-3 m-2">Auto</div>
</div>

12 Column system

Bulma’s grid is based on a 12-column system, allowing precise control over element width.

<div class="columns">
  <div class="column is-1 aq-background-blue-30 p-3 m-2">
    <p>is-1</p>
  </div>
  <div class="column aq-background-blue-5 p-3 m-2">
    <p>1</p>
  </div>
  <div class="column aq-background-blue-5 p-3 m-2">
    <p>1</p>
  </div>
  <div class="column aq-background-blue-5 p-3 m-2">
    <p>1</p>
  </div>
  <div class="column aq-background-blue-5 p-3 m-2">
    <p>1</p>
  </div>
  <div class="column aq-background-blue-5 p-3 m-2">
    <p>1</p>
  </div>
  <div class="column aq-background-blue-5 p-3 m-2">
    <p>1</p>
  </div>
  <div class="column aq-background-blue-5 p-3 m-2">
    <p>1</p>
  </div>
  <div class="column aq-background-blue-5 p-3 m-2">
    <p>1</p>
  </div>
  <div class="column aq-background-blue-5 p-3 m-2">
    <p>1</p>
  </div>
  <div class="column aq-background-blue-5 p-3 m-2">
    <p>1</p>
  </div>
  <div class="column aq-background-blue-5 p-3 m-2">
    <p>1</p>
  </div>
</div>

Grid

The Grid system allows you to organize your layout into flexible and responsive cells.

The example below uses Bulma’s grid system to define a five-column layout, and Aqua’s tokens to apply background color and spacing:

<!-- Bulma grid and spacing classes -->
<!-- Aqua background class -->
<div class="grid has-5-cols">
  <div class="cell aq-background-teal-30 p-3">Cell 1</div>
  <div class="cell aq-background-teal-30 p-3">Cell 2</div>
  <div class="cell aq-background-teal-30 p-3">Cell 3</div>
  <div class="cell aq-background-teal-30 p-3">Cell 4</div>
  <div class="cell aq-background-teal-30 p-3">Cell 5</div>
</div>

<aside>

🔍 For more examples and custom layouts, check the **Bulma documentation** or Aqua Styling documentation

</aside>

On this page