scol

You can check the full list of available breakpoints here.

How to use

  • *:scol-*

One of the main bases of Shido are the columns. Columns are created by specifying the breakpoint and number of available columns you want to cover, for example 2 equal columns would use two .x:scol-6

Remember that all columns must be inside a .line container.


<div classs="line">
  <div class="x:scol-6">6</div>
  <div class="x:scol-6">6</div>
</div>
6
6

If more than 12 columns are placed within a .line the additional columns will be adjusted in a new line.

6
6
6

Columns can be enhanced with helpers such as margin and padding or alignment, for example you can remove the default column padding using .x:pad-all-0 or increase it with .x:pad-left-40

scol-fit

You can also combine column types using scol and scol-fit at the same time.

How to use scol-fit 

<div classs="line">
  <div class="x:scol-4 m:scol-fit-5">4 <-> 5</div>
  <div class="x:scol-4 m:scol-fit-5">4 <-> 5</div>
  <div class="x:scol-4 m:scol-fit-5">4 <-> 5</div>
  <div class="x:scol-6 m:scol-fit-5">4 <-> 5</div>
  <div class="x:scol-6 m:scol-fit-5">4 <-> 5</div>
</div>
4 <-> 5
4 <-> 5
4 <-> 5
6 <-> 5
6 <-> 5

Grid distribution

The following grid representation will help you understand the arrangement and give you an idea of the available columns and how to use them.

12
6
6
4
4
4
3
3
3
3
2
2
2
2
2
2
1
1
1
1
1
1
1
1
1
1
1
1
1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1
12