UIKit3の使い方

UIKit3の使い方

UIKitというデザインフレームワークがあるのでご紹介です。

項目バージョン
npm6.13.4

npmはインストール済みとします。

npm init -y
npm i --save uikit
npm i --save-dev webpack webpack-cli

これでモジュールのインストールはOKです。

フォルダ構成は以下になります。

project
├─app
│  └─index.js
├─node_modules
├─index.html
├─package-lock.json
├─package.json
└─webpack.config.js

index.jsとwebpack.config.jsは以下ファイルのように記述します。

index.js

webpack.config.js

ダウンロードするとindex.json、webpack.config.jsonとなっているので、jsにリネームしてください。

Webpackでトランスパイル

ブラウザが解釈できるようにトランスパイルします。

Windows環境の場合は、

.\node_modules.bin\webpack

コマンドでバンドルします。dist\bundle.jsファイルが生成されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Server API</title>
<link rel="stylesheet" href="node_modules/uikit/dist/css/uikit.min.css">
</head>
<body>
<!-- ここにデザインコーディング -->
<script src="dist/bundle.js"></script>
</body>
</html>
UIkit
UIkitisalightweightandmodularfront-endframeworkfordevelopingfastandpowerfulwebinterfaces.

コメント

タイトルとURLをコピーしました