Nearly Picked Makefiles

    inline-block-grid

    0.1.0 • Public • Published

    Inline Block Grid

    Simple grid system built with display: inline-block. For more about how this technique works, read the blog post.

    Install

    Several ways to do this. Two are listed below:

    NPM Install It

    npm install inline-block-grid --save-dev
    

    If you do it this way, you can use with node-sass. Just use --include-path node_modules/inline-block-grid/.

    Drag and Drop It

    1. Go to the releases page.
    2. Click the button to download a zip.
    3. Decompress and drop in your SCSS folder.

    Plain CSS

    The grid is also built to a plain css file, so if you aren't using sass or don't need any customization you can simply grab grid.css and add it to your project.

    Use

    Whatever install method you used, now you can just:

    @import 'inline-block-grid';
    

    This will give you all the classes to start using the grid in your html.

    Examples

    A simple two column layout would be as follows:

    <div class="block-grid">
      <div class="column-6">
        ... some stuff
      </div>
      <div class="column-6">
        ... some other stuff
      </div>
    </div>
    

    Or a typical sidebar layout:

    <div class="block-grid">
      <div class="column-2 post-1"></div>
      <div class="column-9"></div>
    </div>
    

    Or how about a product grid:

    <div class="block-grid align-center">
      <div class="column-3"></div>
      <div class="column-3"></div>
      <div class="column-3"></div>
      <div class="column-3"></div>
      <div class="column-3"></div>
      <div class="column-3"></div>
      <div class="column-3"></div>
      <div class="column-3"></div>
      <div class="column-3"></div>
      <div class="column-3"></div>
      <div class="column-3"></div>
      <div class="column-3"></div>
    </div>
    

    Class Reference

    class description
    .block-grid Wrap around columns (required)
    .column-X Amount of columns element should span (1-12)
    .pre-X Apply margin-left of X columns
    .post-X Apply margin-right of X columns
    .align-right Column group should right align orphan columns
    .align-center Column group should center orphan columns
    .align-baseline Column content aligned to baseline

    Responsive Classes

    For easy responsive layouts, each class is also available with small- and medium- prefixes. For example, to create an element that is full-width on a phone, half-width on a tablet, and quarter-width on a desktop:

    <div class="column-6 medium-column-12 small-column-24">
      <h1> Responsive Columns!</h1>
    </div>

    There are also responsive pre and post classes for spacing:

    <div class="column-4 pre-12 small-pre-6 medium-pre-2"></div>

    Responsive Class Reference

    class description
    small-column-X Width at small screen size
    small-pre-X Margin left at small screen size
    small-post-X Margin right at small screen size
    medium-column-X Width at medium screen size
    medium-pre-X Margin left at medium screen size
    medium-post-X Margin right at medium screen size

    Customization

    If you are using sass, you can customize several aspects of the grid:

    Variable Description Default
    $column-count Number of columns in the grid 12
    $gutter Amount of space between the columns 1rem
    $font-reset Default font family for your project sans
    $size-small Small size breakpoint 480px
    $size-medium Medium size breakpoint 960px

    License

    ©Paul C Pederson 2015 under the Fair License

    Usage of the works is permitted provided that this instrument is retained with the works, so that any entity that uses the works is notified of this instrument.

    DISCLAIMER: THE WORKS ARE WITHOUT WARRANTY.

    Install

    npm i inline-block-grid

    DownloadsWeekly Downloads

    0

    Version

    0.1.0

    License

    Fair

    Last publish

    Collaborators

    • paulcpederson