DocumentationDownloads and examples
Welcome to the StepOne components documentation

How to start

StepOne Fundation

StepOne Modules

StepOne Components

Grid

StepOne's grid system allows you to create flexible and responsive layouts for your web pages. With a simple and intuitive approach, you can easily structure your content into rows and columns. Let's dive into the details of StepOne's grid system and learn how to use it effectively.

Definition

This grid system must be defined by classes. We have two posibilities of grid:

  • Grid based in 16 columns: The parent element must contain the class .g-container.
  • Grid based in 12 columns: The parent element must contain the class .g-container_12.

Within this parent element there must always be a child element with the class .clearfix. All child elements of each element of the grid system shall have a default spacing and padding of 8px.

Grid based on 16 columns

Desktop

To organise the items within our grid when we are in a desktop size, we have the following classes:

  • g-item_16: This item will occupied all columns in the grid.
  • g-item_15: This item will occupied 15 columns in the grid.
  • g-item_14: This item will occupied 14 columns in the grid.
  • g-item_13: This item will occupied 13 columns in the grid.
  • g-item_12: This item will occupied 12 columns in the grid.
  • g-item_11: This item will occupied 11 columns in the grid.
  • g-item_10: This item will occupied 10 columns in the grid.
  • g-item_9: This item will occupied 9 columns in the grid.
  • g-item_8: This item will occupied 8 columns in the grid.
  • g-item_7: This item will occupied 7 columns in the grid.
  • g-item_6: This item will occupied 6 columns in the grid.
  • g-item_5: This item will occupied 5 columns in the grid.
  • g-item_4: This item will occupied 4 columns in the grid.
  • g-item_4: This item will occupied 3 columns in the grid.
  • g-item_2: This item will occupied 2 columns in the grid.
  • g-item_1: This item will occupied 1 columns in the grid.
16
15
1
14
2
13
3
12
4
11
5
10
6
9
7
8
8

Tablet

In tablet this option will converted in grid based in 8 columns.

In the case of a tablet, all the elements with the above classes will occupy all the columns in our grid system. So if we wanted to organise the columns also on a tablet we would have the following classes:

  • g-item-tablet_8: This item will occupied 8 columns in the grid.
  • g-item-tablet_7: This item will occupied 7 columns in the grid.
  • g-item-tablet_6: This item will occupied 6 columns in the grid.
  • g-item-tablet_5: This item will occupied 5 columns in the grid.
  • g-item-tablet_4: This item will occupied 4 columns in the grid.
  • g-item-tablet_4: This item will occupied 3 columns in the grid.
  • g-item-tablet_2: This item will occupied 2 columns in the grid.
  • g-item-tablet_1: This item will occupied 1 columns in the grid.

Mobile

In mobile this option will converted in grid based in 4 columns.

In the case of a mobile phone, all the elements with the above classes will occupy all the columns in our grid system. So if we want to organise the columns also in a mobile we would have the following options:

  • g-item-mobile_4: This item will occupied 4 columns in the grid.
  • g-item-mobile_4: This item will occupied 3 columns in the grid.
  • g-item-mobile_2: This item will occupied 2 columns in the grid.
  • g-item-mobile_1: This item will occupied 1 columns in the grid.

Grid based on 12 columns

Desktop

To organise the items within our grid when we are in a desktop size, we have the following classes:

  • g-item_12: This item will occupied 12 columns in the grid.
  • g-item_11: This item will occupied 11 columns in the grid.
  • g-item_10: This item will occupied 10 columns in the grid.
  • g-item_9: This item will occupied 9 columns in the grid.
  • g-item_8: This item will occupied 8 columns in the grid.
  • g-item_7: This item will occupied 7 columns in the grid.
  • g-item_6: This item will occupied 6 columns in the grid.
  • g-item_5: This item will occupied 5 columns in the grid.
  • g-item_4: This item will occupied 4 columns in the grid.
  • g-item_4: This item will occupied 3 columns in the grid.
  • g-item_2: This item will occupied 2 columns in the grid.
  • g-item_1: This item will occupied 1 columns in the grid.
12
11
1
10
2
9
3
8
4
7
5
6
6

Tablet

In tablet this option will converted in grid based in 6 columns.

In the case of a tablet, all the elements with the above classes will occupy all the columns in our grid system. So if we wanted to organise the columns also on a tablet we would have the following classes:

  • g-item-tablet_6: This item will occupied 6 columns in the grid.
  • g-item-tablet_5: This item will occupied 5 columns in the grid.
  • g-item-tablet_4: This item will occupied 4 columns in the grid.
  • g-item-tablet_4: This item will occupied 3 columns in the grid.
  • g-item-tablet_2: This item will occupied 2 columns in the grid.
  • g-item-tablet_1: This item will occupied 1 columns in the grid.

Mobile

In mobile this option will converted in grid based in 3 columns.

In the case of a mobile phone, all the elements with the above classes will occupy all the columns in our grid system. So if we want to organise the columns also in a mobile we would have the following options:

  • g-item-mobile_3: This item will occupied 3 columns in the grid.
  • g-item-mobile_2: This item will occupied 2 columns in the grid.
  • g-item-mobile_1: This item will occupied 1 columns in the grid.
HomeDocumentationDownloads and examples
@UST 2023News & EventsLinkedinWho we are