Atomic Bulldog Grid

CSS (SCSS) grid, base on CSS grid layout with @supports fallback to flexbox (partial support)

Get this project in Github

1

2

3

1

2

3

4

5

6

7

8

9

10

4

Table of content

.grid class

By default .grid will have the maximum of columns set in scss/variables/_grid.scss => $grid-columns. By default the grid have 12 columns

1

2

3

4

5

6

7

8

9

10

11

12

13

14

.has-cols-{breakpoint}-{number of columns} class

The number of columns of the grid can be changed using the class .has-cols-{breakpoint}-{number of columns}

  • {breakpoint}: optional breakpoint (See breakpoints) to change the number of columns from a breakpoint
  • {number of columns}: From 0 to 12($grid-columns)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

.has-cols-1

1

.has-cols-2

1

2

.has-cols-3

1

2

3

.has-cols-4

1

2

3

4

.has-cols-5

1

2

3

4

5

.has-cols-6

1

2

3

4

5

6

.has-cols-7

1

2

3

4

5

6

7

etc. up to $grid-columns (12)

.has-grid-gap-{breakpoint}-{spacer} class

The spacing between grid items can be changed using the class .has-cols-{breakpoint}-{number of columns}

  • {breakpoint}: optional breakpoint (See breakpoints) to change spacing from a breakpoint
  • {spacer}: From 0 to 9 they can be change in scss/variables/_spacers.scss => $spacers

1

2

3

4

5

.has-grid-gap-0

1

2

3

4

5

6

.has-grid-gap-1

1

2

3

4

5

6

.has-grid-gap-2

1

2

3

4

5

6

.has-grid-gap-3

1

2

3

4

5

6

.has-grid-gap-4

1

2

3

4

5

6

.has-grid-gap-5

1

2

3

4

5

6

.has-grid-gap-6

1

2

3

4

5

6

.has-grid-gap-7

1

2

3

4

5

6

.has-grid-gap-8

1

2

3

4

5

6

.has-grid-gap-9

1

2

3

4

5

6

.has-col-{breakpoint}-{number of columns} class /!\ No fallback

The number of columns of a grid item can be changed using the class .has-col-{breakpoint}-{number of columns}

  • {breakpoint}: optional breakpoint (See breakpoints) to change the number of columns of the item from a breakpoint
  • {number of columns}: From 0 to 12($grid-columns) the word all can be used, the item will be full width in this case

1

2

3

4

5

6

7

8

9

10

.has-row-{breakpoint}-{number of rows} class /!\ No fallback

The number of row of a grid item can be changed using the class .has-row-{breakpoint}-{number of columns}.

  • {breakpoint}: optional breakpoint (See breakpoints) to change the number of rows. of the item from a breakpoint
  • {number of row}: Depend on your layout and the number of rows you end up with, But you can set a number of rows using grid-template-rows. The word all can be used the item will be full width in this case only if the number of rows is set.

1

2

3

4

5

6

7

8

9

10

.is-dense class /!\ No fallback

.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

For example, here is the example from .has-col-{breakpoint}-{number of columns} if .is-dense:

1

2

3

4

5

6

7

8

9

10

.container Class

Atomic Bulldog grid comes with a container class to get even spacing in your project. This all page is in a container.

Configure your grid with SCSS

Atomic Bulldog Grid is fully customizable:

  • CSS variables: By default, the grid comes with CSS custom properties, and the fallback CSS not.
    $use-css-var can be changed to suit you need in atomic-bulldog-grid.scss, atomic-bulldog-grid-fallback.scss, atomic-bulldog-grid-fallback-ie.scss.
  • Breakpoints: The map $breakpoints manage all the breakpoints in the project you can add, remove, rename so this grid can fit your needs.
  • Number of Columns: Change $grid-columns to the maximum of columns you need.
  • Spacers: The map $spacers manage all the spacing in the project you can add, remove, rename so this grid can fit your needs.
  • Container sizes: The map $container-sizes manage all the container sizes, it is linked to the $breakpoints map if you edit this one remember to change the container map as well.