One of the most important things that help you in page building for your perfect website is the Grid System. In our template, we have added our own Grid System called STG. Due to that, every grid class starts with the stg- prefix. Now, let's take a closer look at the rules and possibilities for that system.

Grid Row

Each row container starts with the stg-row class. The row container has a gap between inner columns, which is set in the CSS configuration file. You can read more about the CSS configuration in the Customization chapter.

...
div
    div
        50% width Column
    /div
    div
        50% width Column
    /div
/div
...

Also, there are additional classes to adjust the gap:

  • stg-no-gap - disables the gap between columns.
  • stg-xs-gap - reduces the gap by four.
  • stg-small-gap - reduces the gap by half.
  • stg-large-gap - increases the gap twice.

You can also adjust values for the smaller and larger gaps in the CSS configuration.

Grid Columns

Inside the row container, you can put columns. Columns classes are stg-col-X, where X is a value between 1 and 12 to define the column size. 12 means 100%, 6 - 50%, 4 - 33.33%, 3 - 25%, and so on. So, the total column width classes sum for each row must equal 12. In some cases, it allows to be less, but not more.

Here is a table of available classes:

  • stg-col-1 - 8.33%
  • stg-col-2 - 16.67%
  • stg-col-3 - 25%
  • stg-col-4 - 33.33%
  • stg-col-5 - 41.67%
  • stg-col-6 - 50%
  • stg-col-7 - 58.33%
  • stg-col-8 - 66.67%
  • stg-col-9 - 75%
  • stg-col-10 - 83.33%
  • stg-col-11 - 91.67%
  • stg-col-12 - 100%

Additional Spacing

Also, our template includes some additional classes to adjust the top or bottom spacings. It can be applied to any block element. The same as a column gap, it contains a few different sizes:

Bottom Spacings
  • stg-bottom-gap-none - disables the bottom spacing.
  • stg-bottom-gap-xs - Extra small bottom spacing.
  • stg-bottom-gap-s - Small bottom spacing.
  • stg-bottom-gap - General (equal to grid-gap) bottom spacing.
  • stg-bottom-gap-l - Large bottom spacing.
  • stg-bottom-gap-xl - Extra Large bottom spacing.
  • stg-bottom-gap-section - Bottom spacing, equal to default spacing between sections.
Top Spacings
  • stg-top-gap-xs - Extra small top spacing.
  • stg-top-gap-s - Small top spacing.
  • stg-top-gap - General (equal to grid-gap) top spacing.
  • stg-top-gap-l - Large top spacing.
  • stg-top-gap-xl - Extra Large top spacing.

Responsive Values

Our Grid System also includes responsive suffixes to adjust for different screen sizes for better flexibility and usability. There are four suffixes, which must be placed right after the stg part:

  • Laptop
  • stg-l-no-gap - Grid Gap
  • stg-l-col-6 - Column Size
  • stg-l-bottom-gap - Spacing
  • stg-l-top-gap - Spacing
  • Tablet
  • stg-t-no-gap - Grid Gap
  • stg-t-col-6 - Column Size
  • stg-t-bottom-gap - Spacing
  • stg-t-top-gap - Spacing
  • Tablet Portrait
  • stg-tp-no-gap - Grid Gap
  • stg-tp-col-6 - Column Size
  • stg-tp-bottom-gap - Spacing
  • stg-tp-top-gap - Spacing
  • Mobile
  • stg-m-no-gap - Grid Gap
  • stg-m-col-6 - Column Size
  • stg-m-bottom-gap - Spacing
  • stg-m-top-gap - Spacing

One more thing about the responsive classes. Higher resolution classes are applied to lower as well. So, if you have added the stg-l-col-6 class to make the column 50% for the Laptop, it will also apply to the Tablet, so you do not need to add one more stg-t-col-6.

On mobile devices, by default, all columns are turned into a single one with 100% width. But with the additional classes, you can adjust this value to your needs.