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>- 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.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