Ruby on Rails フロントエンドの迅速なフレームワーク CSS クラスレスまたはクラスライト

Ruby on Rails Front-end Rápido com Frameworks CSS Classless ou Class-Light - Sem CDN

この記事は、同じ主題を扱う前の記事と意図的によく似ていますが、CSS フレームワークに CDN を使用していますが、この記事では、プロジェクトフォルダーにコピーされた CSS ファイルをローカルで使用します。

Web 開発を始めたばかりで、フロントエンドに特化することに重点を置いていない場合、最も困難となる可能性がある障壁の 1 つは、醜い HTML のスタイルを簡単に設定できるかどうかです。

初めて接触した人にとって、HTML にスタイルを適用するための事前定義されたユーティリティクラスを備えた一連の文字と数字を含む HTML を理解しようとするのは、謎めいて神秘的で超自然的なことです。

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

ログイン後にコピー

ユーティリティクラスを使用する CSS フレームワークは、優れており、多用途で、応答性が高く、エレガントであり、その他多くの特性を備えていますが、Tailwind CSS が唯一のソリューションではありません。 もっと早くてシンプルなものが必要な場合は、クラスレスまたはクラスライトの CSS フレームワークを使用する方が良い解決策になります。

クラスレス CSS フレームワークは、クラスを使用せずに、HTML 要素を直接スタイルします。クラスライトフレームワークは、自動スタイルといくつかのオプションのユーティリティクラスを組み合わせてカスタマイズし、使用の汎用性を高めます。

クラスレスまたはクラスライトのアプローチを使用すると、1 行、2 行、または 3 行で HTML スタイルをすばやく解決できます。

以下で見てみましょう。

バージョン 8 での Ruby on Rails フレームワークと Propshaft および Importmap の使用;
HTML ページの標準レイアウトのファイルについて理解する;
コンテンツを作成して 4 つの HTML ページに追加し、CSS でのスタイルをテストします。
ページ用に作成されたルートの簡単な説明
作成されたページへのリンクを含むようにデフォルトのレイアウトを変更します。
ファイルをプロジェクトにコピーして、12 個の CSS フレームワークを追加します。
CSS フレームワークにデフォルトでライトモードとダークモードが設定されているかどうかを確認する方法を理解します。
次のステップに関する提案;

新しい Rails アプリケーションを開始する

rails コマンドが実行終了時の実行時間を表示するために使用されるまでの時間。以下の例では、47 秒かかりました。

$ rails -v
Rails 8.0.0

$ time rails new classless-css-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

ログイン後にコピー

Rails 8 は、その No Build 理念の中で、デフォルトで Propshaft をアセットパイプラインライブラリとして使用し、Importmap を JavaScript ライブラリとして使用します。 Importmap はいかなる種類の JavaScript 処理も実行しません。

VSCode または好みのエディターでプロジェクトを開きます

$ cd classless-css-local && code .

ログイン後にコピー

デフォルトの Rails レイアウト app/views/layouts/application.html.erb を理解する。

設定優先規則 (CoC) により、Rails は application.html.erb をデフォルトのレイアウトとして使用してすべてのページをレンダリングします。
Rails 8 の元のファイルには、以下にコピーしたファイルと同じまたは類似したコンテンツが含まれている必要があります。

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

ログイン後にコピー

内の上部… これらには、ページがレンダリングされ、正しく機能するための重要な構造要素が含まれています。 head タグは、ページの動作 (JavaScript を使用)、外観 (CSS を使用)、他のシステムやサービスとの関係、CSRF や CSP の保護などのセキュリティ設定を構成するのに役立つ重要なメタデータとリソースを含めるために使用されます。
ページのメインコンテンツは内にレンダリングされます。、ERB タグ <%= yield %> を介して。このタグは、Rails によって動的にレンダリングされるビューのコンテンツを含める統合ポイントとして機能します。

コントローラーページとアクション html_test_1、html_test_2、html_test_3、および html_test_4 を使用してテストページを生成します。

$ rails -v
Rails 8.0.0

$ time rails new classless-css-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

ログイン後にコピー

上記のコントローラーとアクションの作成時と同様に、ルートも追加され、リンクから作成されたアクションにアクセスできるようになります。
- localhost:3000/pages/html_test_1
- localhost:3000/pages/html_test_2
- localhost:3000/pages/html_test_3
- localhost:3000/pages/html_test_4

VSCode で config/routes.rb ファイルを開きます

ファイルの最後に以下の行を追加して、ページルートを以前に作成したコントローラーページとアクション html_test_1 に誘導します。したがって、Web サイトまたはシステムにアクセスするときに表示される最初のページは、コントローラーページの html_test_1 ページになります。それ以外の場合は、デフォルトの Rails ページが表示されます。

$ cd classless-css-local && code .

ログイン後にコピー

コントローラーの作成時に --skip-routes パラメーターを渡していた場合は、作成されたアクションへのルートの追加を無視することもできました。完全なコマンドは、rails gcontrollerpages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes になります。

Railsのルートを表示する

ターミナルを使用すると、コントローラーページなどからコントローラー (-c を使用) を指定してルートを表示できます

<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "Classless Css" %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= yield :head %>

    <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
    <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

    <%# Includes all stylesheet files in app/assets/stylesheets %>
    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

ログイン後にコピー

または、
ですべてのルートを表示できます

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

ログイン後にコピー

アドレス http://127.0.0.1:3000/rails/info/routes を使用してブラウザ経由でルートにアクセスすることもできます。 bin/dev で開発サーバーを起動するか、プロジェクトのルートディレクトリから Rails Server で標準の Rails サーバーを起動することを忘れないでください。開発サーバーは、JavaScript ファイルと CSS ファイルの変更を「リッスン」して、ユーザーが利用できるようにするために必要な処理を実行します。
これらのファイルに変更を加えてブラウザで即座に表示するには、Rails Livre Reload のような gem をインストールする必要があります。

CSS スタイルをテストするために、HTML コンテンツを含む 4 つのページを作成してみましょう。

Ruby on Rails は、デフォルトで MVC (Model-View-Controller) アーキテクチャを使用してプロジェクトの整理を開始します。コードの多くは次のフォルダーに編成されています:

コードがドメイン/ビジネスロジックおよびデータに関連している場合は、app/models フォルダーに保管します。
ビューに関連するコード (HTML、JSON、XML など) は app/views にあります。
リクエストのライフサイクルに関連するコードは、アプリ/コントローラーに含まれます。

html_test_1 ページのコンテンツを挿入します。

リンク https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html にアクセスし、以下に示すようにメインタグの内容をすべてコピーします。

$ rails -v
Rails 8.0.0

$ time rails new classless-css-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

ログイン後にコピー

Rails サーバーを起動すると、見苦しいプレーンな HTML が表示されますか?

Rails 開発サーバーを bin/dev で起動するか、標準サーバーを Rails サーバーで起動し、ブラウザを 127.0.0.1:3000 で開きます。

$ cd classless-css-local && code .

ログイン後にコピー

ページを開くと、前に作成した html_test_1、html_test_2、html_test_3、html_test_4 ページに追加した 4 つのリンクが上部に表示されます。
これまでのところ、たくさんの作業があります。それぞれを開くと、HTML がまだ CSS でスタイル設定されていないことがわかります。これは次に行います。

CSS ファイルをプロジェクトにコピーし、app/assets/stylesheets/ に貼り付けます。

CSS ファイルに関する Rails ドキュメントを参照すると、CSS ファイルをコピーして Web アプリケーションのスタイルを設定するには、いくつかの手順に従う必要があることがわかります。

ファイルを app/assets/stylesheets/ フォルダー、またはその中のサブフォルダー (app/assets/stylesheets/classless など) にコピーします。
このファイルを参照するには、application.html.css ファイルに正しいタグを使用してデフォルトの Rails レイアウトを設定します。次に例を示します。
- CSS ファイルが app/assets/stylesheets/mystylesheet.css にある場合は、タグ <%= stylesheet_link_tag "mystylesheet" %> を追加する必要があります。拡張子 .css なし;
- CSS ファイルが app/assets/stylesheets/classless/mystylesheet.css にある場合は、タグ <%= stylesheet_link_tag "classless/mystylesheet" %> を追加する必要があります。拡張子 .css なし;

app/assets/stylesheets 内にクラスレスサブフォルダーを作成して、以下のリンクからダウンロードした CSS ファイルをコピーしましょう:

CSS の正規化: https://necolas.github.io/normalize.css/latest/normalize.css
Pico CSS: https://github.com/picocss/pico/blob/main/css/pico.css
MVP CSS: https://andybrewer.github.io/mvp/mvp.css
Chota CSS: https://github.com/jenil/chota/blob/main/dist/chota.css
単純な CSS: https://github.com/kevquirk/simple.css/blob/main/simple.css
クラスレス CSS: https://classless.de/classless.css
具体的な CSS: https://github.com/louismerlin/concrete.css/blob/main/concrete.css
アーモンド CSS: https://github.com/alvaromontoro/早期にアーモンド.css/blob/master/dist/wolf.css
ピクニック CSS: https://github.com/franciscop/picnic/blob/master/picnic.css
YACCK CSS: https://github.com/sphars/yacck/blob/master/yacck.css
さくら CSS: https://github.com/oxalorg/sakura/blob/master/css/sakura.css
Bamboo CSS: https://github.com/rilwis/bamboo/blob/master/dist/bamboo.min.css
Bamboo CSS には縮小されたファイルのみが含まれます。 CSS Beautifier & Minifie などのサービスを使用して、理解しやすいように書式設定できます。左側のコードを貼り付けて、右側にフォーマットされたファイルを取得します。ファイルの名前をbamboo.css.
バニラ SCSS からバニラ CSS への変換:

<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>

ログイン後にコピー

ファイルを app/assets/stylesheets/classless/vanilla-framework/build/css/build.css フォルダーにコピーし、コードを読みやすくするには、CSS Beautifier & Minifie Web サイトサービスを使用します。左側のコードを貼り付けて、右側にフォーマットされたファイルを取得します。ファイルの名前を vanilla.css に変更し、app/assets/stylesheets/classless フォルダーに切り取ります。
app/assets/stylesheets/classless/vanilla-framework/ フォルダーを削除します

app/views/layouts/application.html.erb ページを再度開き、プロジェクトにコピーされたクラスレス CSS スタイルを追加します。

行 <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %> をコメントアウトします。 Rails が一度にすべてのスタイルをロードしないように、<% の後に # を挿入します。コメントを解除するには、# を削除します。 VSCode のショートカット Ctrl K C を使用してコメントすると、その行は正しくコメントされません。変更元:

$ rails -v
Rails 8.0.0

$ time rails new classless-css-local
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

ログイン後にコピー

のために

$ cd classless-css-local && code .

ログイン後にコピー

以下の内容の後にコメント行を追加

<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "Classless Css" %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= yield :head %>

    <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
    <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

    <%# Includes all stylesheet files in app/assets/stylesheets %>
    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

ログイン後にコピー

の前に、次の内容を貼り付けます。これらのスタイルはすべて必要なわけではありません。さまざまなオプションをテストできるように挿入されています。

$ rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4
      create  app/controllers/pages_controller.rb
       route  get "pages/html_test_1"
              get "pages/html_test_2"
              get "pages/html_test_3"
              get "pages/html_test_4"
      invoke  erb
      create    app/views/pages
      create    app/views/pages/html_test_1.html.erb
      create    app/views/pages/html_test_2.html.erb
      create    app/views/pages/html_test_3.html.erb
      create    app/views/pages/html_test_4.html.erb
      invoke  helper
      create    app/helpers/pages_helper.rb

ログイン後にコピー

Normalize CSS と Pico CSS を除き、ほとんどのスタイルはコメントアウトされています
ファイルを保存してページを更新するか、サーバーを再起動してください
Pico CSS 以外のスタイルをテストするには、ローカルスタイルを設定する行をコメントアウトします。この場合は行 <%= stylesheet_link_tag "classless/pico" %> です。そして、別のスタイルの行 (たとえば、Simple CSS 行) のコメントを解除します。
ERB タグにコメントするには、<% の後に # を挿入する必要があることを忘れないでください。コメントを解除するには、# を削除します。 VSCode のショートカット Ctrl K C を使用してコメントすると、その行は正しくコメントされません。

はい、スタイリッシュな HTML ですか?

上記のスタイルシートを保存して Rails サーバーを起動すると、選択した CSS フレームワークでスタイル設定された HTML が表示されます。

ダークモード

一部のスタイルにはダークモードのオプションがあります。確認するには、色のカスタマイズオプションでコンピュータのテーマを変更します。 Windows で「アプリのダークモードをオンにする」を検索し、ダークモードとライトモードを切り替えます。オペレーティングシステムを変更すると、HTML ページが自動的に変更され、ライトモードとダークモードがサポートされていることを示します。

次のステップ

[x] 好みに応じてスタイルをアレンジします;
[x] CDN を使用せずに、プロジェクト CSS ファイルのスタイルを使用します。
[-] Rails Live Reload を使用して、ブラウザでプロジェクトに加えられた変更を動的に更新します。
[-] フロントエンドにもう少し時間を費やしたい場合は、お気に入りのスタイルのカスタマイズオプションをチェックしてください。
[-] Tailwind を使用してクラスレス CSS フレームワークの機能を複製します;