Beam

A responsive css grid framework based on inline-block, with 12 columns and utility classes, customizable and compatible with Internet Explorer 8 and newer versions.

Install

Locally

Download beam.min.css (or beam-lite.min.css) and link it before your main css:

<link rel="stylesheet" type="text/css" href="beam.css">

CDN

Link beam.min.css (or beam-lite.min.css) before your main css:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/pldg/beam/beam.min.css">

NPM

Install with:

npm install --save beam-css-grid

And import css in your project using a javascript bundler.

Quick Start

<div class="container">
  <div class="row">
    <div class="s6"></div>
    <div class="s6"></div>
  </div>
  <div class="row">
    <div class="s3"></div>
    <div class="s3"></div>
    <div class="s3"></div>
    <div class="s3"></div>
  </div>
</div>

Documentation

Read documentation online (served from gh-pages branch).

Customization

Read comments inside beam.css, add/remove code blocks as needed.

Notes

In beam-lite.css (only 4kb minified) utility classes are present but they can't be applied to specific breakpoint, with the exception of .delete (read online documentation for more info). Besides that, beam-lite.css is identical to beam.css. You can easily customize both beam-lite.css and beam.css (read the comments inside those files) by adding and removing the code blocks you need.

Inspired by Bootstrap and Toast.