basegrid v0.1.0

Basegrid 🛠

The smallest and most flexible grid-system possible.

Requires CSS-grid and CSS-variables. (Firefox 31+, Chrome 49+, Safari 9.1+, Opera 36+, Edge 16+)

Features

• Lightweight (0.6KB)
• No dependencies
• Flexible AF
• Dynamic grid attributes - gw: Grid width (940px) - gg: Grid gap (20px) - gc: Grid columns (12) - gr: Grid row height (auto)
• Dynamic section attributes - w: Width (1) - h: Height (1) - x: Column position (auto) - y: Row position (auto)

Examples

Include css either via CDN or install via NPM.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basegrid">

Grid samples

// Simple grid
<div class="basegrid"></div>

// Fixed grid (equal width and height)
<div class="basegrid fixed"></div>

// Responsive grid
<div class="basegrid res"></div>

Section samples (using fixed grid)

<!-- Fixed grid with: -->
<div class="basegrid fixed">
	<div style="--w:5;">5 columns wide</div>
	<div style="--w:5;--h:5;">And 5 high</div>
	<div style="--w:5;--h:5;--x:3;--y:3;">With fixed position</div>
</div>

<!-- Variable height and commen width (masonry) -->
<div class="basegrid fixed" style="--w:4;">
	<div style="--h:3;">3 high</div>
	<div style="--h:2;">2 high</div>
	<div style="--h:4;">4 high</div>
	<div style="--h:3;">3 high</div>
	<div style="--h:4;">4 high</div>
	<div style="--h:2;">2 high</div>
</div>

<!-- Overlapping with fixed coordinates and size -->
<div class="basegrid fixed" style="--w:4;">
	<div style="--x:1;--y:1;--w:8;--h:8"></div>
	<div style="--x:3;--y:3;--w:8;--h:8"></div>
	<div style="--x:5;--y:5;--w:8;--h:8"></div>
</div>