National Palace Museum

    beam-css-grid

    1.0.0 • Public • Published

    Beam

    size-badge downloads-badge

    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-dev beam-css-grid

    And import css in your project using your favorite 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 5kb 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.

    Install

    npm i beam-css-grid

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    38.9 kB

    Total Files

    7

    Last publish

    Collaborators

    • pldg