UIKit3の使い方

UIKit3の使い方

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

項目 バージョン
npm 6.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
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

コメント

株式会社CONFRAGE ITソリューション事業部をもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む

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