UIkit で CSS を用いらずに有色の Navbar を実装する

1. はじめに

 UIkit は,軽量なモジュール式のフロントエンドフレームワークです。その他のフロントエンドフレームワーク同様,Navbar を実装することが出来ます。しかし,公式のドキュメントに有色の Navbar に関する記述がありません。本来は,CSS を用いて色を設定しますが,本記事では CSS を用いらずに有色の Navbar を実装する方法について記述します。

2. 環境情報

 次章以降で行う作業は以下の環境下で行ったものです。

  • UIkit Ver.3.1.5
  • Google Chrome Ver.75.0.3770.100

3. 実装と実行結果

 本記事では,.uk-section-*uk-navbar を応用して有色の Navbar を実装します。ソースコードと,その実行結果を以下に示します。

<!doctype html>
<html lang="ja">

<head>
    <!-- UIkit CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/css/uikit.min.css" />
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Navbar</title>
</head>

<body>

    <!-- Default -->
    <nav class="uk-section-default" uk-navbar>
        <div class="uk-navbar-left">
            <div class="uk-navbar-item uk-logo">
                Logo
            </div>
        </div>
        <div class="uk-navbar-right">
            <ul class="uk-navbar-nav">
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
            </ul>
        </div>
    </nav>

    <!-- Muted -->
    <nav class="uk-section-muted" uk-navbar>
        <div class="uk-navbar-left">
            <div class="uk-navbar-item uk-logo">
                Logo
            </div>
        </div>
        <div class="uk-navbar-right">
            <ul class="uk-navbar-nav">
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
            </ul>
        </div>
    </nav>

    <!-- Primary -->
    <nav class="uk-section-primary" uk-navbar>
        <div class="uk-navbar-left">
            <div class="uk-navbar-item uk-logo">
                Logo
            </div>
        </div>
        <div class="uk-navbar-right">
            <ul class="uk-navbar-nav">
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
            </ul>
        </div>
    </nav>

    <!-- Secondary -->
    <nav class="uk-section-secondary" uk-navbar>
        <div class="uk-navbar-left">
            <div class="uk-navbar-item uk-logo">
                Logo
            </div>
        </div>
        <div class="uk-navbar-right">
            <ul class="uk-navbar-nav">
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
            </ul>
        </div>
    </nav>

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

</body>

</html>

 Primary と Secondary の文字の明度が低いと感じる際は,.uk-text-primary.uk-text-secondary を用いることで文字を明るくすることが出来ます。

4. おわりに

 UIkit は,Bootstrap と比較すると知名度や採用数が低く,Twitter 社のような大企業が開発をサポートしているわけでもありません。しかし,秀逸な名前設計や豊富なコンポーネントなど,Bootstrap に引けを取らないフロントエンドフレームワークだと感じています。本記事が,少しでも UIkit に貢献できれば幸いです。

Dutch

コンピュータサイエンスを専攻している大学院生です。趣味は,アニメ鑑賞・プログラミング・ライフハックなどです。


© 2020 Dutch Powered by Hugo