or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

tessl/npm-basscss-grid

CSS grid module for Basscss providing responsive float-based grid utilities

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/basscss-grid@2.0.x

To install, run

npx @tessl/cli install tessl/npm-basscss-grid@2.0.0

Basscss Grid

Basscss Grid is a modular CSS grid system providing float-based layout utilities with a 12-column grid structure. Part of the Basscss ecosystem, it offers responsive breakpoint variants and utility classes for creating flexible, maintainable grid layouts using atomic CSS principles. It works in combination with other Basscss modules for complete layout functionality.

Package Information

Package Name: basscss-grid
Package Type: npm
Language: CSS (with PostCSS)
Installation: npm install basscss-grid
Ecosystem: Part of the Basscss modular CSS toolkit
Dependencies: Works with other Basscss modules (basscss-layout, basscss-margin, basscss-padding)

Core Imports

/* Import the complete grid system */
@import "basscss-grid";

Or import individual modules:

@import "basscss-grid/lib/grid";       /* Base grid classes */
@import "basscss-grid/lib/sm-grid";    /* Small breakpoint classes */
@import "basscss-grid/lib/md-grid";    /* Medium breakpoint classes */
@import "basscss-grid/lib/lg-grid";    /* Large breakpoint classes */

Basic Usage

<!-- Basic two-column layout -->
<div class="clearfix">
  <div class="col col-6">Column 1</div>
  <div class="col col-6">Column 2</div>
</div>

<!-- Responsive layout -->
<div class="clearfix">
  <div class="sm-col sm-col-6 md-col-4 lg-col-3">Responsive column</div>
  <div class="sm-col sm-col-6 md-col-8 lg-col-9">Main content</div>
</div>

<!-- With gutters using padding utilities -->
<div class="clearfix mxn2">
  <div class="col col-6 px2">Column with gutter</div>
  <div class="col col-6 px2">Column with gutter</div>
</div>

Architecture

Basscss Grid follows atomic CSS principles with a modular structure:

Float-based Layout: Uses CSS floats for cross-browser compatibility
12-Column System: Percentage-based widths calculated with CSS calc()
Mobile-first Responsive: Breakpoint classes apply at minimum widths and up
Box-sizing: All column classes include box-sizing: border-box
Modular CSS: Split into separate files for base and breakpoint-specific classes

Capabilities

Base Grid Classes

Core grid classes for creating columns without breakpoint constraints.

.col {
  float: left;
  box-sizing: border-box;
}

.col-right {
  float: right;
  box-sizing: border-box;
}

.col-1 { width: calc(1/12 * 100%); }   /* 8.333% */
.col-2 { width: calc(2/12 * 100%); }   /* 16.667% */
.col-3 { width: calc(3/12 * 100%); }   /* 25% */
.col-4 { width: calc(4/12 * 100%); }   /* 33.333% */
.col-5 { width: calc(5/12 * 100%); }   /* 41.667% */
.col-6 { width: calc(6/12 * 100%); }   /* 50% */
.col-7 { width: calc(7/12 * 100%); }   /* 58.333% */
.col-8 { width: calc(8/12 * 100%); }   /* 66.667% */
.col-9 { width: calc(9/12 * 100%); }   /* 75% */
.col-10 { width: calc(10/12 * 100%); } /* 83.333% */
.col-11 { width: calc(11/12 * 100%); } /* 91.667% */
.col-12 { width: 100%; }               /* 100% */

Small Breakpoint Classes (min-width: 40em)

Responsive grid classes that activate at the small breakpoint and larger screens.

@media (min-width: 40em) {
  .sm-col {
    float: left;
    box-sizing: border-box;
  }

  .sm-col-right {
    float: right;
    box-sizing: border-box;
  }

  .sm-col-1 { width: calc(1/12 * 100%); }
  .sm-col-2 { width: calc(2/12 * 100%); }
  .sm-col-3 { width: calc(3/12 * 100%); }
  .sm-col-4 { width: calc(4/12 * 100%); }
  .sm-col-5 { width: calc(5/12 * 100%); }
  .sm-col-6 { width: calc(6/12 * 100%); }
  .sm-col-7 { width: calc(7/12 * 100%); }
  .sm-col-8 { width: calc(8/12 * 100%); }
  .sm-col-9 { width: calc(9/12 * 100%); }
  .sm-col-10 { width: calc(10/12 * 100%); }
  .sm-col-11 { width: calc(11/12 * 100%); }
  .sm-col-12 { width: 100%; }
}

Medium Breakpoint Classes (min-width: 52em)

Responsive grid classes that activate at the medium breakpoint and larger screens.

@media (min-width: 52em) {
  .md-col {
    float: left;
    box-sizing: border-box;
  }

  .md-col-right {
    float: right;
    box-sizing: border-box;
  }

  .md-col-1 { width: calc(1/12 * 100%); }
  .md-col-2 { width: calc(2/12 * 100%); }
  .md-col-3 { width: calc(3/12 * 100%); }
  .md-col-4 { width: calc(4/12 * 100%); }
  .md-col-5 { width: calc(5/12 * 100%); }
  .md-col-6 { width: calc(6/12 * 100%); }
  .md-col-7 { width: calc(7/12 * 100%); }
  .md-col-8 { width: calc(8/12 * 100%); }
  .md-col-9 { width: calc(9/12 * 100%); }
  .md-col-10 { width: calc(10/12 * 100%); }
  .md-col-11 { width: calc(11/12 * 100%); }
  .md-col-12 { width: 100%; }
}

Large Breakpoint Classes (min-width: 64em)

Responsive grid classes that activate at the large breakpoint and larger screens.

@media (min-width: 64em) {
  .lg-col {
    float: left;
    box-sizing: border-box;
  }

  .lg-col-right {
    float: right;
    box-sizing: border-box;
  }

  .lg-col-1 { width: calc(1/12 * 100%); }
  .lg-col-2 { width: calc(2/12 * 100%); }
  .lg-col-3 { width: calc(3/12 * 100%); }
  .lg-col-4 { width: calc(4/12 * 100%); }
  .lg-col-5 { width: calc(5/12 * 100%); }
  .lg-col-6 { width: calc(6/12 * 100%); }
  .lg-col-7 { width: calc(7/12 * 100%); }
  .lg-col-8 { width: calc(8/12 * 100%); }
  .lg-col-9 { width: calc(9/12 * 100%); }
  .lg-col-10 { width: calc(10/12 * 100%); }
  .lg-col-11 { width: calc(11/12 * 100%); }
  .lg-col-12 { width: 100%; }
}

Custom Media Queries

Breakpoint definitions using PostCSS custom media queries.

@custom-media --breakpoint-sm (min-width: 40em);
@custom-media --breakpoint-md (min-width: 52em);
@custom-media --breakpoint-lg (min-width: 64em);

Usage Patterns

Container Setup

Always use a clearfix container to properly clear floated columns:

<div class="clearfix">
  <!-- Grid columns here -->
</div>

Creating Gutters

Use margin and padding utilities for gutters:

<!-- 2-unit gutters -->
<div class="clearfix mxn2">
  <div class="col col-6 px2">Content</div>
  <div class="col col-6 px2">Content</div>
</div>

<!-- 1-unit gutters -->
<div class="clearfix mxn1">
  <div class="col col-6 px1">Content</div>
  <div class="col col-6 px1">Content</div>
</div>

Responsive Layouts

Combine multiple breakpoint classes for responsive behavior:

<div class="clearfix">
  <!-- Mobile: full width, Tablet: half width, Desktop: one-third -->
  <div class="sm-col sm-col-6 lg-col-4">Column 1</div>
  <div class="sm-col sm-col-6 lg-col-8">Column 2</div>
</div>

Column Nesting

Nest entire grid structures within columns:

<div class="clearfix mxn2">
  <div class="col col-8 px2">
    <div class="clearfix mxn2">
      <div class="col col-6 px2">Nested</div>
      <div class="col col-6 px2">Nested</div>
    </div>
  </div>
  <div class="col col-4 px2">Sidebar</div>
</div>

Reversed Columns

Use .col-right to reverse column order:

<div class="clearfix">
  <div class="col-right col-4">Appears on right</div>
  <div class="col col-8">Appears on left</div>
</div>

Centered Columns

Use margin utilities to center columns:

<div class="clearfix">
  <div class="col col-8 mx-auto">Centered column</div>
</div>

Integration Requirements

Basscss Grid is designed to work with other Basscss modules and requires external utility classes for complete functionality:

Clearfix Module: Required .clearfix class for proper float clearing (from basscss-layout or similar)
Padding Utilities: For creating gutters (.px1, .px2, .px3, etc.) from basscss-padding
Margin Utilities: For negative margins (.mxn1, .mxn2, .mxn3) and centering (.mx-auto) from basscss-margin
Layout Utilities: For max-width containers and spacing from basscss-layout
PostCSS Processing: Custom media queries require PostCSS with custom-media plugin
Box Model: All grid classes use box-sizing: border-box

Note: While basscss-grid provides the core grid classes, it's typically used as part of the complete Basscss toolkit which includes all necessary utility modules.