Basic

/../hex-core/src/grid/_basic.scss

A grid system is based in three main values:

Grid elements illustration

  • Width: it determines the total width of every row. People usually set this value to 100% and a max-width for larger screens
  • Columns: max number of columns for the grid. 12 columns is a good number because we can split the grid in blogs of 2, 3, 4 and 6 elements per row.
  • Gutter: it represents the spacing between the columns. We are going to use the site unity of our project.

Based on this paramenter, we need to define the Container, the Row and the Column elements of our project.

Container illustration Row illustration Column illustration

All the images comes from this article

2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
12
5
2
5
<div class="container">
  <div class="row">
    <div class="col-2"><article>2</article></div>
    <div class="col-2"><article>2</article></div>
    <div class="col-2"><article>2</article></div>
    <div class="col-2"><article>2</article></div>
    <div class="col-2"><article>2</article></div>
    <div class="col-2"><article>2</article></div>
  </div>
  <div class="row">
    <div class="col-3"><article>3</article></div>
    <div class="col-3"><article>3</article></div>
    <div class="col-3"><article>3</article></div>
    <div class="col-3"><article>3</article></div>
  </div>
  <div class="row">
    <div class="col-4"><article>4</article></div>
    <div class="col-4"><article>4</article></div>
    <div class="col-4"><article>4</article></div>
  </div>
  <div class="row">
    <div class="col-6"><article>6</article></div>
    <div class="col-6"><article>6</article></div>
  </div>
  <div class="row">
    <div class="col-12"><article>12</article></div>
  </div>
  <div class="row">
    <div class="col-5"><article>5</article></div>
    <div class="col-2"><article>2</article></div>
    <div class="col-5"><article>5</article></div>
  </div>
</div>

Content

/../hex-core/src/grid/_content.scss

The previous examples display boxes with a very similar context. If the content of the columns is different, by default all of them are positionated at the beginning of the row.

Content helpers allows you to change the alignment of an specific column or all the elements in a row.

Align Center
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
Align Center
Align Center
Align Start
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
Align Center
Align End
Align Center
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
Align Start
Align Center
<div class="container">
  <div class="row align-center">
    <div class="col-3"><article>Align Center</article></div>
    <div class="col-3"><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 class="col-3"><article>Align Center</article></div>
    <div class="col-3"><article>Align Center</article></div>
  </div>
  <div class="row">
    <div class="col-3 align-start"><article>Align Start</article></div>
    <div class="col-3"><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 class="col-3 align-center"><article>Align Center</article></div>
    <div class="col-3 align-end"><article>Align End</article></div>
  </div>
  <div class="row align-center">
    <div class="col-3"><article>Align Center</article></div>
    <div class="col-3"><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 class="col-3 align-start"><article>Align Start</article></div>
    <div class="col-3"><article>Align Center</article></div>
  </div>
</div>

Row reverse

/../hex-core/src/grid/_content.scss

Row reverse is a helper that will allow to exchange the order of the columns

There are layouts with content/text on the left side and images on the right side for the first row and, for the second, the image is on the left and the content on the right. When the layout collapses, this helper will keep the correct order.

Options
  • .row-reverse: Helper used on the .row that will reverse the order of its columns.

Bitnami has spent years perfecting the business of packaging applications. During this time, we have built the expertise and internal tooling required to automate the process of publishing and maintaining a catalog of applications and development environments

Bitnami has spent years perfecting the business of packaging applications. During this time, we have built the expertise and internal tooling required to automate the process of publishing and maintaining a catalog of applications and development environments

<div class="container container-tiny">
  <div class="row collapse-b-ultrawide">
    <div class="col-7">
      <p>
        Bitnami has spent years perfecting the business of packaging applications. During this time,
        we have built the expertise and internal tooling required to automate the process of
        publishing and maintaining a catalog of applications and development environments
      </p>
    </div>
    <div class="col-5 text-c">
      <img src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg"/>
    </div>
  </div>
  <div class="row row-reverse collapse-b-ultrawide">
    <div class="col-7">
      <p>
        Bitnami has spent years perfecting the business of packaging applications. During this time,
        we have built the expertise and internal tooling required to automate the process of
        publishing and maintaining a catalog of applications and development environments
      </p>
    </div>
    <div class="col-5 text-c">
      <img src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg"/>
    </div>
  </div>
</div>

Responsive

/../hex-core/src/grid/_responsive.scss

Classic system like bootstrap provides us responsive classes at Column level. For example, we could set the width of a column based on different media queries: col-md-6 col-sm-3 .... This approach is ok, but it favors the fragmentation of the design because every column of every row can have a different behaviour.

Also, it polutes our HTML code with tons of CSS classes and sometimes it's really difficult to check the behaviour of a column.

To avoid this situation, I set the "responsive classes" at Row level. Now, we can set how the columns of the row will change across different sizes. For example, if we want to change the behaviour of the row for mobile screens we can add those classes to the row:

  • collapse-on-phone
  • collapse-2-on-phone
  • collapse-3-on-phone

collapse-2-on-phone means that the row will display 2 columns per row on phone screens. We have the same classes for other screen names:

  • phone
  • phone-land
  • tablet
  • desktop
  • wide

Below and Above

collapse-on-x applies the rule to an specific media query. That means the collapse-on-tablet class only collapses the columns when the users is between the tablet minimum and maximum.

If you want to collapse a row above or below an specific screen size, you can use the a and b prefixes:

  • collapse-a-phone
  • collapse-a-phone-land collapse-b-phone-land
  • collapse-a-tablet collapse-b-tablet
  • collapse-a-desktop collapse-b-desktop
  • collapse-b-wide
2
2
2
2
2
2
2
2
2
2
2
2
4
4
4
<div class="container">
  <div class="row collapse-3-on-tablet collapse-2-on-phone-land collapse-on-phone">
    <div class="col-2"><article>2</article></div>
    <div class="col-2"><article>2</article></div>
    <div class="col-2"><article>2</article></div>
    <div class="col-2"><article>2</article></div>
    <div class="col-2"><article>2</article></div>
    <div class="col-2"><article>2</article></div>
  </div>

  <div class="row collapse-3-on-tablet collapse-2-b-tablet">
    <div class="col-2"><article>2</article></div>
    <div class="col-2"><article>2</article></div>
    <div class="col-2"><article>2</article></div>
    <div class="col-2"><article>2</article></div>
    <div class="col-2"><article>2</article></div>
    <div class="col-2"><article>2</article></div>
  </div>

  <div class="row">
    <div class="col-4"><article>4</article></div>
    <div class="col-4"><article>4</article></div>
    <div class="col-4"><article>4</article></div>
  </div>
</div>

Sizes

/../hex-core/src/grid/_sizes.scss

The grid is limited by the max-width property. By default, the rows can not be wider than 1300px (uxl breakpoint). We can disable this behaviour using the .container-fluid class:

4
4
4
2
4
4
2
3
3
3
3
2
4
4
2
<div class="container container-fluid">
  <div class="row">
    <div class="col-4"><article>4</article></div>
    <div class="col-4"><article>4</article></div>
    <div class="col-4"><article>4</article></div>
  </div>
</div>

<div class="container margin-t-big">
  <div class="row">
    <div class="col-2"><article>2</article></div>
    <div class="col-4"><article>4</article></div>
    <div class="col-4"><article>4</article></div>
    <div class="col-2"><article>2</article></div>
  </div>
</div>

<div class="container container-small margin-t-big">
  <div class="row">
    <div class="col-3"><article>3</article></div>
    <div class="col-3"><article>3</article></div>
    <div class="col-3"><article>3</article></div>
    <div class="col-3"><article>3</article></div>
  </div>
</div>

<div class="container container-tiny margin-t-big">
  <div class="row">
    <div class="col-2"><article>2</article></div>
    <div class="col-4"><article>4</article></div>
    <div class="col-4"><article>4</article></div>
    <div class="col-2"><article>2</article></div>
  </div>
</div>