ホームページのデザインに、UIkitとscssを使ってみたら素晴らしいのヒトコト

CSSのフレームワーク、UIkit 素晴らしいです。
  • デザインが洗練されている
  • デザインしたWebサイトが簡単に作れてしまう
  • 学習時間も少なくてすむ。直感的で分かりやすい
Uikitで作成トップページ
ひと昔前に、骨組みをHTML、外観をCSSで行う、と習っていたので、HTMLに大きさの定義やカラー名など具体的に書くことはメンテナンス上良くないと思っていましたが、こういう書き方も良いですね。ブートストラップの流れでしょうか。

もちろん、全ての事を満たしてくれるわけではありませんが、デザインの変更も出来ます

ちょっと使っていたら、ここは用意されているカラー以外を使いたいな、とか出てきます。これはショウガイ。
ですが、UIKitでは初期に用意されているカラーを変更する機能も用意されていました。

SCSSとかLESS

デザインの変更などはscssで(lessでも可能?)で修正することが可能と言うことで導入してみました。

scss + vscode

scssを記述後はcssへ変換、いわゆるコンパイルという作業が出てきますが、VSCodeにはプラグインでコンパイル環境を構築できるので、以下を参考にインストールします。VSCodeがインストールしてあれば、5分も掛からずにSCSSを試せるようになってると思います。 ここではLive Sass Compilerというプラグインを導入します。
インストール後は例えば、style.scssというファイルで作ったら、style.cssというcssが作成されていたらOKですね。

UIkit + SCSS

ダウンロードしたUlkitを解凍 -> ulkitにリネーム -> cssフォルダ直下に移動します。
// 1. Your custom variables and variable overwrites.
$global-link-color: #da7d02;
$global-primary-background: rgb(42, 156, 99);

// 2. Import default variables and available mixins.
@import "uikit/src/scss/variables-theme.scss";
@import "uikit/src/scss/mixins-theme.scss";

// 3. Your custom mixin overwrites.
@mixin hook-card() { color: #000; }

// 4. Import UIkit.
@import "uikit/src/scss/uikit-theme.scss";
サンプルにあるとおりに記述して、コンパイル(scssファイルを保存)すれば変換されたcssが出力されました。

またグローバル変数は以下のファイルにあります。
uikit/src/scss/components/variables.scss
以上になります

鹿児島県の出水市という所に住んでいまして、インターネット周辺で色々活動して行きたいと思ってるところです。 Webサイト作ったり、サーバ設定したり、プログラムしたりしている、釣りと木工好きなMacユーザです。 今はデータサイエンスに興味を持って競馬AI予想を頑張ってます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


The reCAPTCHA verification period has expired. Please reload the page.

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください