Summary

Do you know about Milligram, a "minimalist CSS framework" ?
It's, in accordance with the name, lightweight like feather, and, in addition, beautiful. It is developed "to design fast and clean websites".

Well, the accent color is purple by default:

It can be modified up to your necessity by building it with Node.js. Also, others such as forms and tables can.
This post shows how to do it as to color as an example.

Environment

OS: Alpine Linux 3.17
- on Podman 4.3.1 VM
Build tool: Node.js 18.12.1
- with npm 9.1.2
CSS F/W: Milligram 1.4.1

Tutorial

Install system requirements

First, prepare for building it on Alpine Linux.

Install the key packages:

# apk add git nodejs npm

In addition, install the below:

# apk add make g++ gyp

to prevent failure of building node-sass.

Get source code

Get the source published on Github:

$ git clone https://github.com/milligram/milligram.git

Go inside:

$ cd milligram

Initialize

Run:

$ npm install

Then run to fix vulnerabilities and make it up-to-date as possible:

$ npm audit fix
$ npm audit fix --force

Finally, running npm audit report printed out:

ajv  <6.12.3
Severity: moderate
Prototype Pollution in Ajv - https://github.com/advisories/GHSA-v88g-cgmw-v5xw
fix available via `npm audit fix`
node_modules/sass-lint/node_modules/ajv
  table  3.7.10 - 4.0.2
  Depends on vulnerable versions of ajv
  node_modules/sass-lint/node_modules/table

merge  <2.1.1
Severity: high
Prototype Pollution in merge - https://github.com/advisories/GHSA-7wpw-2hjm-89gp
No fix available
node_modules/merge
  sass-lint  *
  Depends on vulnerable versions of eslint
  Depends on vulnerable versions of gonzales-pe-sl
  Depends on vulnerable versions of merge
  node_modules/sass-lint

minimist  <=1.2.5
Severity: critical
Prototype Pollution in minimist - https://github.com/advisories/GHSA-vh95-rmgr-6w4m
Prototype Pollution in minimist - https://github.com/advisories/GHSA-xvch-5gv4-984h
No fix available
node_modules/gonzales-pe-sl/node_modules/minimist
  gonzales-pe-sl  *
  Depends on vulnerable versions of minimist
  node_modules/gonzales-pe-sl

shelljs  <=0.8.4
Severity: high
Improper Privilege Management in shelljs - https://github.com/advisories/GHSA-4rq4-32rv-6wp6
Improper Privilege Management in shelljs - https://github.com/advisories/GHSA-64g7-mvw6-v9qj
No fix available
node_modules/shelljs
  eslint  1.4.0 - 4.0.0-rc.0
  Depends on vulnerable versions of shelljs
  node_modules/sass-lint/node_modules/eslint

ua-parser-js  0.8.1 - 1.0.32
Severity: high
ReDoS Vulnerability in ua-parser-js version  - https://github.com/advisories/GHSA-fhg7-m89q-25r3
fix available via `npm audit fix`
node_modules/ua-parser-js
  browser-sync  >=2.27.6
  Depends on vulnerable versions of ua-parser-js
  node_modules/browser-sync

10 vulnerabilities (2 moderate, 5 high, 3 critical)

To address issues that do not require attention, run:
  npm audit fix

Some issues need review, and may require choosing
a different dependency.

Modify

For example, edit src/_Color.sass like:

- $color-primary: #9b4dca !default
+ $color-primary: #4dca9b !default

Build customized source

Then run to build:

$ npm run-script build

The output was:

> milligram@1.4.1 build
> rimraf dist && run-s sass autoprefixer banner


> milligram@1.4.1 sass
> node-sass --output-style expanded src/milligram.sass dist/milligram.css && node-sass --output-style compressed src/milligram.sass dist/milligram.min.css

Rendering Complete, saving .css file...
Wrote CSS to /usr/local/apache2/milligram/dist/milligram.css
Rendering Complete, saving .css file...
Wrote CSS to /usr/local/apache2/milligram/dist/milligram.min.css

> milligram@1.4.1 autoprefixer
> postcss -u autoprefixer --no-map.inline --autoprefixer.browsers "last 1 versions" -r dist/*.css


> milligram@1.4.1 banner
> banner-cli dist/*.css

You will find the result set in dist directory:

$ ls -l dist
total 52
-rw-r--r--    1 root     root         10620 Jan 29 11:18 milligram.css
-rw-r--r--    1 root     root         14902 Jan 29 11:18 milligram.css.map
-rw-r--r--    1 root     root          9014 Jan 29 11:18 milligram.min.css
-rw-r--r--    1 root     root         12009 Jan 29 11:18 milligram.min.css.map

Conclusion

How was it changed ? Like this 😎

The whole index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="milligram.min.css" />
</head>
<body>
<h1>Milligram CSS <small> is awesome !</small></h1>
<pre><code class="html"><span><</span>form class="container"<span>></span>
    <span><</span>label for="input-text"<span>></span>Input form<span><</span>/label<span>></span>
    <span><</span>input id="input-text"<span>></span>
    <span><</span>div class="row"<span>>
        <span><</span>div class="column"<span>></span><span><</span>button class="button button-outline"<span>></span>button 1<span><</span>/button<span>></span><span><</span>/div<span>></span>
        <span><</span>div class="column"<span>></span><span><</span>button class="button"<span>></span>button 2<span><</span>/button<span>></span><span><</span>/div<span>></span>
    <span><</span>/div<span>></span>
<span><</span>/form<span>></span></code></pre>
<form class="container">
    <label for="input-text">Input form</label>
    <input id="input-text">
    <div class="row">
        <div class="column"><button class="button button-outline">button 1</button></div>
        <div class="column"><button class="button">button 2</button></div>
    </div>
</form>
</body>
</html>

Milligram CSS: Custom build (with Node.js 18 on Alpine Linux 3.17)