tessl/npm-primeflex

PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Grid System

Name: tessl/npm-primeflex
Author: tessl

PrimeFlex provides a 12-column responsive grid system built on flexbox. The grid system includes containers, columns, responsive breakpoints, and utilities for creating flexible layouts.

Grid Container

.grid {
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.5rem;
  margin-left: -0.5rem;
  margin-top: -0.5rem;
}

.grid-nogutter {
  margin: 0;
}

The .grid class creates a flex container with negative margins to account for column gutters. Use .grid-nogutter to remove gutters entirely.

Basic Grid Columns

.col {
  flex: 1 1 0%;
  flex-basis: 0;
  padding: 0.5rem;
}

.col-fixed {
  flex: 0 0 auto;
  padding: 0.5rem;
}

Sized Grid Columns

.col-1 { flex: 0 0 auto; width: 8.3333%; padding: 0.5rem; }
.col-2 { flex: 0 0 auto; width: 16.6667%; padding: 0.5rem; }
.col-3 { flex: 0 0 auto; width: 25%; padding: 0.5rem; }
.col-4 { flex: 0 0 auto; width: 33.3333%; padding: 0.5rem; }
.col-5 { flex: 0 0 auto; width: 41.6667%; padding: 0.5rem; }
.col-6 { flex: 0 0 auto; width: 50%; padding: 0.5rem; }
.col-7 { flex: 0 0 auto; width: 58.3333%; padding: 0.5rem; }
.col-8 { flex: 0 0 auto; width: 66.6667%; padding: 0.5rem; }
.col-9 { flex: 0 0 auto; width: 75%; padding: 0.5rem; }
.col-10 { flex: 0 0 auto; width: 83.3333%; padding: 0.5rem; }
.col-11 { flex: 0 0 auto; width: 91.6667%; padding: 0.5rem; }
.col-12 { flex: 0 0 auto; width: 100%; padding: 0.5rem; }

Column Offsets

.col-offset-0 { margin-left: 0; }
.col-offset-1 { margin-left: 8.3333%; }
.col-offset-2 { margin-left: 16.6667%; }
.col-offset-3 { margin-left: 25%; }
.col-offset-4 { margin-left: 33.3333%; }
.col-offset-5 { margin-left: 41.6667%; }
.col-offset-6 { margin-left: 50%; }
.col-offset-7 { margin-left: 58.3333%; }
.col-offset-8 { margin-left: 66.6667%; }
.col-offset-9 { margin-left: 75%; }
.col-offset-10 { margin-left: 83.3333%; }
.col-offset-11 { margin-left: 91.6667%; }
.col-offset-12 { margin-left: 100%; }

Responsive Grid Classes

All grid classes support responsive breakpoints with the following syntax:

// Small screens (≥576px)
.sm\\:col { /* equivalent to .col at sm breakpoint */ }
.sm\\:col-1 { /* equivalent to .col-1 at sm breakpoint */ }
.sm\\:col-2 { /* equivalent to .col-2 at sm breakpoint */ }
// ... all column classes with sm: prefix

// Medium screens (≥768px)
.md\\:col { /* equivalent to .col at md breakpoint */ }
.md\\:col-1 { /* equivalent to .col-1 at md breakpoint */ }
// ... all column classes with md: prefix

// Large screens (≥992px)
.lg\\:col { /* equivalent to .col at lg breakpoint */ }
.lg\\:col-1 { /* equivalent to .col-1 at lg breakpoint */ }
// ... all column classes with lg: prefix

// Extra large screens (≥1200px)
.xl\\:col { /* equivalent to .col at xl breakpoint */ }
.xl\\:col-1 { /* equivalent to .col-1 at xl breakpoint */ }
// ... all column classes with xl: prefix

Usage Examples

Equal Width Columns

<div class="grid">
  <div class="col">
    <div class="p-3 bg-primary text-white">Auto width</div>
  </div>
  <div class="col">
    <div class="p-3 surface-section">Auto width</div>
  </div>
  <div class="col">
    <div class="p-3 bg-primary text-white">Auto width</div>
  </div>
</div>

Fixed Width Columns

<div class="grid">
  <div class="col-4">
    <div class="p-3 bg-primary text-white">33.33% width</div>
  </div>
  <div class="col-8">
    <div class="p-3 surface-section">66.67% width</div>
  </div>
</div>

Responsive Layout

<div class="grid">
  <div class="col-12 md:col-6 lg:col-4">
    <div class="p-3 bg-primary text-white">
      Full width on mobile, half on tablet, third on desktop
    </div>
  </div>
  <div class="col-12 md:col-6 lg:col-4">
    <div class="p-3 surface-section">
      Responsive column
    </div>
  </div>
  <div class="col-12 md:col-12 lg:col-4">
    <div class="p-3 bg-primary text-white">
      Full width on mobile and tablet, third on desktop
    </div>
  </div>
</div>

Column Offsets

<div class="grid">
  <div class="col-4 col-offset-4">
    <div class="p-3 bg-primary text-white text-center">
      Centered column with offset
    </div>
  </div>
</div>

No Gutters

<div class="grid grid-nogutter">
  <div class="col-6">
    <div class="p-3 bg-primary text-white">No gutter</div>
  </div>
  <div class="col-6">
    <div class="p-3 surface-section">No gutter</div>
  </div>
</div>

Breakpoint System

Default: All screen sizes (mobile-first)
sm: ≥576px (small tablets)
md: ≥768px (tablets)
lg: ≥992px (small desktops)
xl: ≥1200px (large desktops)

The responsive system uses a mobile-first approach, meaning utilities apply from the specified breakpoint and up unless overridden by a larger breakpoint.

Install with Tessl CLI