CSS(SCSS) Grid Layout – Atomic Bulldog Grid

Category: CSS & CSS3 , Layout , Recommended | March 1, 2018
Author: vinceumo
Views Total: 214
Official Page: Go to website
Last Update: March 1, 2018
License: MIT

Preview:

CSS(SCSS) Grid Layout – Atomic Bulldog Grid

Description:

Atomic Bulldog Grid is a CSS(SCSS) library to generate modern, responsive, flexible grid layout using the CSS Grid Layout technology. The library also provides a fallback that uses CSS flexbox.

How to use it:

Add the main stylesheet and fallback CSS files to the webpage.

<link rel="stylesheet" href="/path/to/atomic-bulldog-grid.css">
<link rel="stylesheet" href="/path/to/atomic-bulldog-grid-fallback.css">
<link rel="stylesheet" href="/path/to/atomic-bulldog-grid-fallback-ie.css">

The basic HTML structure to create a grid layout.

<div class="grid">
  <div>
      <div class="example--item">
          <p>Item 1</p>
      </div>
  </div>
  <div>
      <div class="example--item">
          <p>Item 2</p>
      </div>
  </div>
  <div>
      <div class="example--item">
          <p>Item 3</p>
      </div>
  </div>
  ...
</div>

The CSS classes to customize the grid layout.

  • .has-cols-{breakpoint}-{number of columns}: the number of columns
  • .has-grid-gap-{breakpoint}-{spacer}: space between grid items
  • .has-row-{breakpoint}-{number of rows}: the number of rows
  • .is-dense: if is dense

Config the library by overriding the default variables in the following files:

  • _breakpoints.scss
  • _container-sizes.scss
  • _grid.scss
  • _root-classes.scss
  • _spacers.scss

Leave a Reply