Milligram CSS: Custom build (with Node.js 18 on Alpine Linux 3.17)
Tags: milligram, css, node, alpine
Published: 2023-01-29 12:17:39

## Summary

Do you know about [Milligram](https://milligram.io/), a "minimalist [CSS](https://developer.mozilla.org/docs/Learn/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:

![milligram css default color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4tucred2gtdp6ovkjj1y.png)

It can be modified up to your necessity by building it with [Node.js](https://nodejs.org/en/). 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](https://www.alpinelinux.org/) 3.17
  - on [Podman](https://podman.io/) 4.3.1 VM
- Build tool: Node.js 18.12.1
  - with [npm](https://www.npmjs.com/) 9.1.2
- CSS F/W: Milligram [1.4.1](https://github.com/milligram/milligram/releases/tag/v1.4.1)

## Tutorial

### Install system requirements

First, prepare for building it on Alpine Linux.

Install the key packages:

```console
# apk add git nodejs npm
```

In addition, install the below:

```console
# apk add make g++ gyp
```

to prevent failure of building `node-sass`.

### Get source code

Get the source [published](https://github.com/milligram/milligram) on [Github](https://github.com/):

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

Go inside:

```console
$ cd milligram
```

### Initialize

Run:

```console
$ npm install
```

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

```console
$ npm audit fix
$ npm audit fix --force
```

Finally, running `npm audit report` printed out:

```console
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:

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

### Build customized source

Then run to build:

```console
$ npm run-script build
```

The output was:

```console
> 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:

```console
$ 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 😎

![milligram css modifed color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4i3uyu5jba4bjugz45o.png)

The whole `index.html`:

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