Alumna CSS micro-library for rapid and responsive front-end interface development
- Create a
cssfolder inside your project. - Create a new file
design.cssinside thecssfolder. - Download Alumna CSS in the same folder and 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 section group
- (Optional) Create a box to contain your columns without touching the screen limits
- Define the desired column numbers
...
<div class="section group">
<div class="box"> <!-- This is optional -->
<div class="col col_1_of_3">
<!-- First column of three -->
</div>
<div class="col col_1_of_3">
<!-- Second column of three -->
</div>
<div class="col col_1_of_3">
<!-- Third column of three -->
</div>
</div>
</div>
...1.0.0|2016-03-30- First release1.1.0|2016-07-21- 12 columns1.1.1|2016-08-16- Fix for SVG classes1.1.2|2018-03-17- Removebodytag from example1.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