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.
getuikit.com
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント