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 πŸ˜‰

Read next

jeet_dhandha profile image

Simplifying Excel Table Parsing in Node.js with @libs-jd/xlsx-parse-table

Jeet Dhandha -

rodolphedupuis profile image

Implementing Docker for a Next.js and Node.js App: A Step-by-Step Guide πŸ³πŸš€

Rodolphe Dupuis -

prahalad profile image

Image Swap Animation in Pure CSS

Prahalad S -

shofol profile image

Create Eye-Catching Button Effect with Rotating Glow Animation

Anower Jahan Shofol -