Atomic Bulldog - UI/pattern library

4 - Layouts

Source: layouts/__documentation.scss, line 5

Open in new window

4.1 - Container

Source: layouts/_container.scss, line 21

Open in new window

Atomic Bulldog comes with two containers classes that you can choose from. One fluid container, that will take all the available space. One fixed width container (sizes are set in variables/_container-sizes.scss).

4.1.1 - Container fixed

Source: layouts/_container.scss, line 42

Open in new window

.container

Sizes are set in variables/_container-sizes.scss

Example:

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem quisquam ea consequuntur nostrum sint. Explicabo neque architecto sint voluptatibus ullam et ea recusandae nihil unde quos amet hic, ut iste? 
<div class="container">
  <div class="kss-box">
   Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem quisquam ea consequuntur nostrum sint. Explicabo
   neque architecto sint voluptatibus ullam et ea recusandae nihil unde quos amet hic, ut iste?
  </div>
</div>

4.1.2 - Container Fluid

Source: layouts/_container.scss, line 28

Open in new window

.container.is-fluid

Example:

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem quisquam ea consequuntur nostrum sint. Explicabo neque architecto sint voluptatibus ullam et ea recusandae nihil unde quos amet hic, ut iste? 
<div class="container-fluid is-fluid">
  <div class="kss-box">
   Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem quisquam ea consequuntur nostrum sint. Explicabo
   neque architecto sint voluptatibus ullam et ea recusandae nihil unde quos amet hic, ut iste?
  </div>
</div>

4.2 - Grid

Source: layouts/_grid.scss, line 91

Open in new window

Atomic Bulldog uses CSS grid layout for its grid. It only applies this grid to supported browsers using the CSS @supports rule.

See Grid fallback if you need to use the fallback grid.

Can I Use css-grid? Data on support for the css-grid feature across the major browsers from caniuse.com.

Can I Use css-supports-api? Data on support for the css-supports-api feature across the major browsers from caniuse.com.

The grid is by default 12 columns base, This grid is two dimensional, meaning grid items can grow in the horizontal axis (has-col-{breakpoint}-{size}) and on the vertical axis (has-row-{breakpoint}-{size}).

{breakpoint} is set from the $breakpoints map (see variables), {size} is set as well in variables. It goes from 0 to 12 ($grid-columns) by default or 0 up to 12 base on the number of columns set using .has-cols-{bp}-{size}

Example:

1
2
3
4
5
6
<div class="grid has-grid-gap-2 has-cols-3 has-cols-md-5 has-cols-lg-7">
  <div class="has-col-md-3 has-col-lg-1 has-row-md-2 has-row-lg-2">
    <div class="kss-box">1</div>
  </div>
  <div class="has-col-3 has-col-md-2 has-col-lg-1">
      <div class="kss-box">2</div>
  </div>
  <div>
      <div class="kss-box">3</div>
  </div>
  <div class="has-col-md-2 has-col-lg-3">
      <div class="kss-box">4</div>
  </div>
  <div class="has-col-md-2 has-col-lg-6">
      <div class="kss-box">5</div>
  </div>
  <div>
      <div class="kss-box">6</div>
  </div>
</div>

4.2.1 - Grid - Set number of columns

Source: layouts/_grid.scss, line 136

Open in new window

The number of columns can be change by adding .has-cols-{bp}-{num-of-cols}. bp is optional, number of columns goes from 1 to 12.

{breakpoint} is set from the $breakpoints map (see variables), {size} are set as well in variables. It goes from 0 to 12 ($grid-columns).

Resize the window to see changes.

Examples:

Default styling
1
2
3
4
5
6
7
8
9
10
.has-cols-md-1

1 col layout

1
2
3
4
5
6
7
8
9
10
.has-cols-md-2

2 cols layout

1
2
3
4
5
6
7
8
9
10
.has-cols-md-3

3 cols layout

1
2
3
4
5
6
7
8
9
10
.has-cols-md-4

4 cols layout

1
2
3
4
5
6
7
8
9
10
.has-cols-md-5

5 cols layout

1
2
3
4
5
6
7
8
9
10
.has-cols-md-6

6 cols layout

1
2
3
4
5
6
7
8
9
10
.has-cols-md-7

7 cols layout

1
2
3
4
5
6
7
8
9
10
.has-cols-md-8

8 cols layout

1
2
3
4
5
6
7
8
9
10
.has-cols-md-9

9 cols layout

1
2
3
4
5
6
7
8
9
10
.has-cols-md-10

10 cols layout

1
2
3
4
5
6
7
8
9
10
.has-cols-md-11

11 cols layout

1
2
3
4
5
6
7
8
9
10
.has-cols-md-12

12 cols layout

1
2
3
4
5
6
7
8
9
10
<div class="grid [modifier] has-cols-5 has-grid-gap-3">
  <div>
    <div class="kss-box">1</div>
  </div>
  <div>
      <div class="kss-box">2</div>
  </div>
  <div>
      <div class="kss-box">3</div>
  </div>
  <div>
      <div class="kss-box">4</div>
  </div>
  <div>
      <div class="kss-box">5</div>
  </div>
  <div>
      <div class="kss-box">6</div>
  </div>
  <div>
      <div class="kss-box">7</div>
  </div>
  <div>
      <div class="kss-box">8</div>
  </div>
  <div>
      <div class="kss-box">9</div>
  </div>
  <div>
      <div class="kss-box">10</div>
  </div>
</div>

4.2.2 - Grid Modifiers

Source: layouts/_grid.scss, line 197

Open in new window

4.2.2.1 - Col

Source: layouts/_grid.scss, line 262

Open in new window

Columns can be expended using the class has-col-{breakpoint}-{size}. Sizes go from 0 to 12. .has-col-all can be used as well, grid item will then take the full width.

Example:

1
2
3
4
5
6
7
8
9
10
<div class="grid has-cols-5 has-grid-gap-2">
  <div class="has-col-all">
      <div class="kss-box">1</div>
  </div>
  <div>
      <div class="kss-box">2</div>
  </div>
  <div>
      <div class="kss-box">3</div>
  </div>
  <div>
      <div class="kss-box">4</div>
  </div>
  <div class=" has-col-2">
      <div class="kss-box">5</div>
  </div>
  <div>
      <div class="kss-box">6</div>
  </div>
  <div>
      <div class="kss-box">7</div>
  </div>
  <div>
      <div class="kss-box">8</div>
  </div>
  <div>
      <div class="kss-box">9</div>
  </div>
  <div>
      <div class="kss-box">10</div>
  </div>
</div>

4.2.2.2 - Grid dense

Source: layouts/_grid.scss, line 205

Open in new window

.is-dense with grid will make the grid dense.

Dense Is a keyword specifying that the auto-placement algorithm uses a “dense” packing algorithm, which attempts to fill in holes earlier in the grid, if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow

4.2.2.3 - Gaps

Source: layouts/_grid.scss, line 306

Open in new window

Grid gap can be change using .has-grid-gap-{size} class. This class use the $spacers map variables

Examples:

Default styling
1
2
3
4
5
6
7
8
9
10
.has-grid-gap-0

Grid Gap 0

1
2
3
4
5
6
7
8
9
10
.has-grid-gap-1

Grid Gap 1

1
2
3
4
5
6
7
8
9
10
.has-grid-gap-2

Grid Gap 2

1
2
3
4
5
6
7
8
9
10
.has-grid-gap-3

Grid Gap 3

1
2
3
4
5
6
7
8
9
10
.has-grid-gap-4

Grid Gap 4

1
2
3
4
5
6
7
8
9
10
.has-grid-gap-5

Grid Gap 5

1
2
3
4
5
6
7
8
9
10
.has-grid-gap-6

Grid Gap 6

1
2
3
4
5
6
7
8
9
10
<div class="grid has-cols-5 [modifier]">
  <div>
    <div class="kss-box">1</div>
  </div>
  <div>
      <div class="kss-box">2</div>
  </div>
  <div>
      <div class="kss-box">3</div>
  </div>
  <div>
      <div class="kss-box">4</div>
  </div>
  <div>
      <div class="kss-box">5</div>
  </div>
  <div>
      <div class="kss-box">6</div>
  </div>
  <div>
      <div class="kss-box">7</div>
  </div>
  <div>
      <div class="kss-box">8</div>
  </div>
  <div>
      <div class="kss-box">9</div>
  </div>
  <div>
      <div class="kss-box">10</div>
  </div>
</div>

4.2.2.4 - Row

Source: layouts/_grid.scss, line 215

Open in new window

Rows can be expended using the class has-row-{breakpoint}-{size}. Sizes go from 0 to 12. .has-row-all can be used as well but in this case, the grid needs to have grid-template-rows set, so the can grow depending on the number of rows.

There is no fallback for these classes.

Example:

1
2
3
4
5
6
7
8
9
10
<div class="grid has-cols-3 has-cols-sm-5 has-cols-md-4 has-grid-gap-2" style="grid-template-rows: repeat(5, 1fr)"> <!-- Set grid-template-rows for .has-row-all-->
  <div class="has-row-all">
    <div class="kss-box">1</div>
  </div>
  <div>
      <div class="kss-box">2</div>
  </div>
  <div>
      <div class="kss-box">3</div>
  </div>
  <div>
      <div class="kss-box">4</div>
  </div>
  <div class="has-row-2">
      <div class="kss-box">5</div>
  </div>
  <div>
      <div class="kss-box">6</div>
  </div>
  <div>
      <div class="kss-box">7</div>
  </div>
  <div>
      <div class="kss-box">8</div>
  </div>
  <div>
      <div class="kss-box">9</div>
  </div>
  <div>
      <div class="kss-box">10</div>
  </div>
</div>

4.2.3 - Grid Fallback

Source: layouts/_grid-fallback.scss, line 80

Open in new window

Atomic Bulldog grid use progressive enhancement for browsers not supporting CSS grid layout. It will use an alternative grid base on flexbox. Not all classes are supported.

This grid will compile in screen-fallback.css

For now the fallback grid only works with the following classes:

  • .grid
  • .has-cols-{bp}-{num-of-col}
  • .has-grid-gap-{num}

Try to see this page on IE: 11.

Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse.com.