はじめに

Milligram という "ミニマリストの CSS フレームワーク" をご存知でしょうか ?
名前の通り羽のように軽量で、さらに美しいフレームワークです。"高速にデザインして綺麗なウェブサイトを構築する" ことを目的に開発されています。

さてこのフレームワークのアクセント・カラーは、デフォルトでは紫です:

必要に応じて、Node.js でビルドすることで、変更できます。入力フォームやテーブルについても同様に変更できます。
本記事で、色を例に採って、その方法を紹介します。

環境

OS: Alpine Linux 3.17
- Podman 4.3.1 VM 上で実施
ビルド・ツール: Node.js 18.12.1
- npm 9.1.2　使用
CSS F/W: Milligram 1.4.1

チュートリアル

システム要件のインストール

まず Alpine Linux でビルドする準備をします。

主要なパッケージをインストールします:

# apk add git nodejs npm

それから以下のものも追加でインストールします:

# apk add make g++ gyp

追加のインストールは node-sass ビルド時のエラーを回避するためです。

ソースコードの取得

公開されているソースを Github から取得します:

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

ディレクトリの中に入ります:

$ cd milligram

初期設定

以下を実行します:

$ npm install

脆弱性の修復と可能な限りの最新化を行うために、以下を実行します:

$ npm audit fix
$ npm audit fix --force

最後に npm audit report で確認します。以下のように出力されました:

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.

変更を加える

例として src/_Color.sass を以下のように編集します:

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

カスタマイズしたソースのビルド

編集後、以下を実行してビルドします:

$ npm run-script build

出力は以下の通りでした:

> 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

dist ディレクトリに結果セットが作成されます:

$ 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

おわりに

表示は変わりましたか ? 以下のようになったのでは無いでしょうか 😎

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: カスタム・ビルド (Node.js 18 on Alpine Linux 3.17 使用)