Alumna CSS is a micro-library for rapid and responsive front-end interface development.
- Create a
CSSfolder inside your project. - Download Alumna CSS and place it in the
CSSfolder. - Create a new file
design.cssinside theCSSfolder. - Include these files in your HTML project:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Incredible Website</title>
<link rel="stylesheet" href="css/alumna.min.css">
<link rel="stylesheet" href="css/design.css">
</head>
<body>
</body>
</html>- Create a
<div class="section">to act as a horizontal row of columns. - Add columns inside it using classes like
col-1-3for one-third width:
<div class="section">
<div class="col col-1-3">
<!-- First column of three -->
</div>
<div class="col col-1-3">
<!-- Second column of three -->
</div>
<div class="col col-1-3">
<!-- Third column of three -->
</div>
</div>- Add the
boxclass to a section for a constrained width (91.5rem) with responsive padding. - Use
hero-boxinstead for a constrained width without padding (e.g., for full-width hero sections):
<div class="section box">
<div class="col col-1-3">
<!-- First column of three -->
</div>
<div class="col col-1-3">
<!-- Second column of three -->
</div>
<div class="col col-1-3">
<!-- Third column of three -->
</div>
</div>- Every
.sectionand.sub-sectionstarts with--gap: 0rem. - Override it per section to add space between columns without breaking the proportions. The grid automatically subtracts the gap from each column width.
<div class="section box" style="--gap:2rem">
<div class="col col-1-3">
<!-- First column -->
</div>
<div class="col col-1-3">
<!-- Second column -->
</div>
<div class="col col-1-3">
<!-- Third column -->
</div>
</div>- Use any valid CSS length (rem is recommended). Gaps are local to the section, so other sections keep their own value:
<!-- no gap -->
<div class="section">...</div>
<!-- 1rem gap only here -->
<div class="section" style="--gap:1rem">...</div>- Works the same for nested grids:
<div class="col col-1-2 sub-section" style="--gap:.75rem">
<div class="col col-1-2">...</div>
<div class="col col-1-2">...</div>
</div>- Add the
sub-sectionclass to a column to create sub-columns directly inside it, simplifying your HTML by reducing nesting:
<div class="section">
<div class="col col-1-3 sub-section">
<div class="col col-1-2">
<!-- First sub-column -->
</div>
<div class="col col-1-2">
<!-- Second sub-column -->
</div>
</div>
<div class="col col-1-3">
<!-- Second column of three -->
</div>
<div class="col col-1-3">
<!-- Third column of three -->
</div>
</div>2.1.0|2026-05-01- New: Gap-aware grid. Every
.sectionand.sub-sectionnow supports--gap(defaults to0rem). Column widths automatically subtract the gap, socol-1-3stays one-third even with spacing. - Changed: Column classes now use CSS variables (
--p) for proportional widths, enabling cleancalc()support for gaps. - Improved:
.coldefaults toflex: 1 1 0%for better equal distribution with gaps.
- New: Gap-aware grid. Every
2.0.1|2025-12-29- Fix: Gap removed for correct column width
2.0.0|2025-02-28- New: Flexbox-based grid system for modern, responsive layouts.
- New: Added Tailwind Preflight (based on
modern-normalize) for consistent cross-browser styling. - New: Shorter column class names (e.g.,
col-1-3instead ofcol_1_of_3). - New:
sub-sectionclass for easier sub-columns without extra nesting. - New: Apply
boxorhero-boxdirectly to sections for cleaner code. - Optimized: Removed redundant full-width classes; use
col-1-1for full-width columns. - Optimized: Added CSS variables for easier customization.
- Optimized: Mobile-first design with min-width media queries.
1.1.3|2023-01-13- Set just one font alongside
sans-serifalias - Removing old
zoom: 1fallback for IE 6/7 - Fix grid percentages errors (from a non-used case of grid with spaces)
- Set just one font alongside
1.1.2|2018-03-17- Removebodytag from example1.1.1|2016-08-16- Fix for SVG classes1.1.0|2016-07-21- 12 columns1.0.0|2016-03-30- First release