Recompose demos into smaller files

Add details/summary, table, code styles.
pr0gramista · Aug 29, 2024 · 22b4f32 · 22b4f32
1 parent badbe24
commit 22b4f32
Show file tree

Hide file tree

Showing 32 changed files with 1,220 additions and 426 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,33 @@
+![Logo](assets/icon64.jpg)
 # Aluminum CSS
-Brutalist minimal CSS framework for your next project.
+Minimal CSS boilerplate to make your next page shine. 
+
+[Docs](https://pr0gramista.github.io/aluminiumcss) | [Cute demo]([https://demo.](https://pr0gramista.github.io/aluminiumcss)) | [npm](https://www.npmjs.com/package/aluminiumcss)
+
+## Features
+- CSS only
+- Selective styling - you can apply Aluminium CSS globally or selectively on just a few elements
+- Easy to customize - just a bunch of CSS variables
+- Utilities included - positioning, spacings in Tailwind CSS style
+- CSS grid system
+- Basic navbar and footer
 
 ## Installation
-Include stylesheet in the `<head>` of your HTML document:
+Aluminium CSS works best as a single link tag in the `<head>` of your HTML document:
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aluminiumcss@0.1.1/dist/aluminium.min.css">
-```
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aluminiumcss/dist/aluminium.min.css">
+```
+
+You can also install Aluminium CSS via NPM:
+```bash
+npm install aluminiumcss
+```
+
+And then import it in your JS file, assuming you are using a bundler:
+```javascript
+require('aluminiumcss/dist/aluminium.min.css')
+```
+
+## Motivation
+I have seen way too many bare HTML pages. While many other CSS styles exist there are't many that are minimal and easy to customize.
+I also kept missing some of the core Tailwind CSS utilities, so I included a variation of them in this project.
diff --git a/assets/girl.jpg b/assets/girl.jpg
diff --git a/assets/icon.jpg b/assets/icon.jpg
diff --git a/assets/icon64.jpg b/assets/icon64.jpg
diff --git a/build.js b/build.js
@@ -1,5 +1,7 @@
 const CleanCSS = require("clean-css");
+const { table } = require("console");
 const fs = require("fs");
+const mustache = require("mustache");
 
 // Specify the paths to your CSS files
 const inputFiles = ["normalize.css", "sanitize.css", "style.css"];
@@ -20,3 +22,31 @@ const outputPath = "dist/aluminium.min.css";
 
 // Write the minified CSS to the output file
 fs.writeFileSync(outputPath, output.styles);
+
+const template = fs.readFileSync("index.template.html", "utf8");
+
+const outputPage = mustache.render(template, {
+  input: fs.readFileSync("parts/input.html", "utf8"),
+  textarea: fs.readFileSync("parts/textarea.html", "utf8"),
+  radio: fs.readFileSync("parts/radio.html", "utf8"),
+  checkbox: fs.readFileSync("parts/checkbox.html", "utf8"),
+  table: fs.readFileSync("parts/table.html", "utf8"),
+  button: fs.readFileSync("parts/button.html", "utf8"),
+  select: fs.readFileSync("parts/select.html", "utf8"),
+  details: fs.readFileSync("parts/details.html", "utf8"),
+  blockquote: fs.readFileSync("parts/blockquote.html", "utf8"),
+  dialog: fs.readFileSync("parts/dialog.html", "utf8"),
+  nav: fs.readFileSync("parts/nav.html", "utf8"),
+  footer: fs.readFileSync("parts/footer.html", "utf8"),
+  grid: fs.readFileSync("parts/grid.html", "utf8"),
+  gridDefault: fs.readFileSync("parts/grid-default.html", "utf8"),
+  spacer: fs.readFileSync("parts/spacer.html", "utf8"),
+  row: fs.readFileSync("parts/row.html", "utf8"),
+  column: fs.readFileSync("parts/column.html", "utf8"),
+  centered: fs.readFileSync("parts/centered.html", "utf8"),
+  selective: fs.readFileSync("parts/selective.html", "utf8"),
+  container: fs.readFileSync("parts/container.html", "utf8"),
+  positioning: fs.readFileSync("parts/positioning.html", "utf8"),
+});
+
+fs.writeFileSync("index.html", outputPage);
diff --git a/dist/aluminium.min.css b/dist/aluminium.min.css