UIkit

① ダウンロード

UIkit

② 読み込む

公式ドキュメントの記載を抜粋。以下順番に、ダウンロードしたファイルを参照する場合、CDNを参照する場合。

ダウンロードしたZIPに梱包されているuikit-rtl.cssは書字方向が右から左の言語をサポートするためのcssなので日本語では不要。

<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/uikit.min.css" />
        <script src="js/uikit.min.js"></script>
        <script src="js/uikit-icons.min.js"></script>
    </head>
    <body>
    </body>
</html>

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit-icons.min.js"></script>

Googleで検索するとjQuery必須と書いている記事が多いが、公式ドキュメントにそういう記載はない。過去バージョンは必須だったとか？

COMPONENTSはNavbar（このサイトで上に固定されてるやつ）のようなパーツ的なやつと、Sticky（Navbarを画面上部に固定する設定）のような追加設定的なのがある。

使い方は公式ドキュメントの記載がとても分かりやすいので、省略。上述のようにJS/CSSを読み込んでおけば、COMPONENTSに記載された内容はすべて使える。

参考までにこのページで使ったCOMPONENTSを上から列挙。

・Background　※画面全体に背景色を設定

・Navbar　※このページで上に固定されてるやつ

・Sticky　※Navbarを固定する設定

・Visibility　※2種類のNavbarを画面サイズに応じて出し分け

・Card　※本文が書いてあるところ

参考資料

UIkit Documentation

https://getuikit.com/docs/introduction