DEV Community

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

Posted on • Originally published at scqr.net

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

#milligram #css #node #alpine

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:

milligram css default color

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

Tutorial

Install system requirements

First, prepare for building it on Alpine Linux.

Install the key packages:

# apk add git nodejs npm
Enter fullscreen mode Exit fullscreen mode

In addition, install the below:

# apk add make g++ gyp
Enter fullscreen mode Exit fullscreen mode

to prevent failure of building node-sass.

Get source code

Get the source published on Github:

$ git clone https://github.com/milligram/milligram.git
Enter fullscreen mode Exit fullscreen mode

Go inside:

$ cd milligram
Enter fullscreen mode Exit fullscreen mode

Initialize

Run:

$ npm install
Enter fullscreen mode Exit fullscreen mode

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

$ npm audit fix $ npm audit fix --force
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

Modify

For example, edit src/_Color.sass like:

- $color-primary: #9b4dca !default + $color-primary: #4dca9b !default
Enter fullscreen mode Exit fullscreen mode

Build customized source

Then run to build:

$ npm run-script build
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Conclusion

How was it changed ? Like this 😎

milligram css modifed color

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>
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
jankapunkt profile image
Jan Küster 🔥 •

Is the package abandoned?

Collapse
 
nabbisen profile image
nabbisen • • Edited

Hmm.., I don't believe (perhaps rather than think) so, although it doesn't seem to be actively developed 😅 The creator, @cjpatoilo, seemingly still keeps interest.
Well, there may not much or even little hope that the framework gets drastic update.

Whatever, its flexbox-based layout can be actually applied on modern browsers now.
Also, we can not only use it as unprocessed but also create own theme based on it, if the style and concept are preferred 😉