はじめに
DjangoプロジェクトにCSSフレームワークである
UIKit3 を導入していきます。
UIKit3
UIKit は、CSSフレームワークの１つ。
知名度ではBootstrapやFoundationにはやや劣るものの
シンプルなデザインで人気のフレームワークです。
クラス名がuk-で始まるように統一されており、
他のCSSとコンフリクションが起きにくいのも良いポイントです。
UIKitをダウンロード
ダウンロードは こちら から。
zipファイルを解凍して、
今回は下記の３ファイルを使用します。
uikit-3.5.6/
├ css/
│ └ uikit.min.css
└ lib/
└ uikit-icons.min.js
└ uikit.min.js
※UIKitのバージョンは3.5.6
staticディレクトリを作成
プロジェクトディレクトリ直下にstaticディレクトリを作成し、
下記のようにファイルを格納します。
[projectname]/
├ [projectname]/
├ static/
│ └ css/
│ │ └ uikit.min.css
│ └ js/
│ └ uikit.min.css
│ └ uikit.min.css
└ manage.py
settings.pyを変更
[projectname]/settings.py に'static'ディレクトリの情報を定義します。
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
staticを読み込む
Point1:
{% load static %}
loadタグを使ってstaticタグを使用できるようにします。
Point2:
{% static '[css or js]/[filenama]' %}
staticタグを使って静的ファイルのパスを相対パスで定義できます。
Point3:
UIKitを読み込む
<link href="{% static 'css/uikit.min.css' %}" rel="stylesheet">
<script src="{% static 'js/uikit.min.js' %}">
<script src="{% static 'js/uikit-icons.min.js' %}">
試しにドロップダウンリストを表示してみます。
画面をスクショする関係でmarginが欲しかったので、
uk-margin-topなども使ってみました。
{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
<title>TEST</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{% static 'css/uikit.min.css' %}" rel="stylesheet">
<script src="{% static 'js/uikit.min.js' %}"></script>
<script src="{% static 'js/uikit-icons.min.js' %}"></script>
</head>
<body>
<h1 class="uk-margin-top uk-margin-left">UIKit サンプル</h1>
<div class="uk-button-group uk-margin-left">
<button class="uk-button uk-button-default">Dropdown</button>
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button"><span uk-icon="icon: triangle-down"></span></button>
<div uk-dropdown="mode: click; boundary: ! .uk-button-group; boundary-align: true;">
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
無事に表示されました。
シンプルで良い感じです！
おわりに
UIKitを導入する機会がありましたので、まとめてみました。
まだまだUIkitを使いこなせていませんが、前述したように
クラス名がuk-で統一されているのは非常に使いやすいです。