ホームページ >ウェブフロントエンド >CSSチュートリアル >Ruby on Rails フロントエンド Rápido com Frameworks CSS Classless ou Class-Light Usando CDN
Ruby on Rails フロントエンド Rápido com Frameworks CSS Classless ou Class-Light Usando CDN
- DDDオリジナル
- 2025-01-04 16:40:40392ブラウズ
Web 向けの開発を始めていて、フロントエンドに特化することに重点を置いていない場合、最も困難となる可能性がある障壁の 1 つは、Web のスタイルを簡単に設定できることです。醜い 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 でのスタイルをテストします。
- ページ用に作成されたルートの簡単な説明
- 作成されたページへのリンクを含むようにデフォルトのレイアウトを変更します。
- CDN 経由で 12 個の CSS フレームワークをデフォルトのレイアウトに追加します。
- CSS フレームワークにデフォルトでライト モードとダーク モードが設定されているかどうかを確認する方法を理解します。
- 次のステップに関する提案;
新しい Rails アプリケーションを開始する
- rails コマンドが実行終了時の実行時間を表示するために使用されるまでの時間。以下の例では、47 秒かかりました。
$ rails -v Rails 8.0.0 $ time rails new classless-css-cdn --skip-test ... real 0m47.500s user 0m33.052s sys 0m4.249s
Rails 8 は、No Build の理念に基づいて、デフォルトで Propshaft をアセット パイプライン ライブラリとして使用し、Importmap を JavaScript ライブラリとして使用します。 --skip-test を使用してテスト ライブラリをスキップするようにお願いします。
必要に応じて、 --javascript esbuild パラメータを渡すことで、esbuild を使用して JavaScript を処理できます。 Importmap は、JavaScript に対してビルドや処理を一切実行しません。
VSCode または好みのエディターでプロジェクトを開きます
$ cd classless-css-cdn && code .
デフォルトの Rails レイアウト app/views/layouts/application.html.erb を理解する。
もっと見る…
<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"
>
コントローラー ページとアクション html_test_1、html_test_2、html_test_3、および html_test_4 を使用してテスト ページを生成します。
もっと見る…
$ rails -v
Rails 8.0.0
$ time rails new classless-css-cdn --skip-test
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s
VSCode で config/routes.rb ファイルを開きます
$ cd classless-css-cdn && code .
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"
>
CSS スタイルをテストするために、HTML コンテンツを含む 4 つのページを作成してみましょう。
Ruby on Rails は、デフォルトで MVC (Model-View-Controller) アーキテクチャを使用してプロジェクトの整理を開始します。コードの多くは次のフォルダーに編成されています:
- コードがドメイン/ビジネス ロジックおよびデータに関連している場合は、app/models フォルダーに保管します。
- ビューに関連するコード (HTML、JSON、XML など) は app/views にあります。
- リクエストのライフサイクルに関連するコードは、アプリ/コントローラーに含まれます。
html_test_1 ページのコンテンツを挿入します。
もっと見る…
$ rails -v
Rails 8.0.0
$ time rails new classless-css-cdn --skip-test
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s
Rails サーバーを起動すると、見苦しい単純な HTML が表示されますか?
もっと見る…
$ cd classless-css-cdn && code .
app/views/layouts/application.html.erb ページを再度開き、CDN 経由でクラスレス 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"
>
$ rails -v
Rails 8.0.0
$ time rails new classless-css-cdn --skip-test
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s
はい、スタイリッシュな HTML ですか?
上記のスタイルシートを保存して Rails サーバーを起動すると、選択した CSS フレームワークでスタイル設定された HTML が表示されます。
ダークモード
一部のスタイルにはダーク モードのオプションがあります。確認するには、色のカスタマイズ オプションでコンピュータのテーマを変更します。 Windows で「アプリのダーク モードを有効にする」を検索し、ダーク モードとライト モードを切り替えると、オペレーティング システムの変更後に HTML ページが自動的に変更されます。
次のステップ
- 好みに応じてスタイルを整理します;
- フロントエンドにもう少し時間を費やしたい場合は、お気に入りのスタイルのカスタマイズ オプションをチェックしてください。
- Rails Live Reload を使用して、ブラウザ内のプロジェクトに加えられた変更を動的に更新します。
- CDN を使用せずに、プロジェクト CSS ファイルのスタイルを使用します。
- Tailwind を使用してクラスレス CSS フレームワークの機能を複製します。
参考文献
- https://dev.to/leonardorafael/the-classless-and-class-light-css-aproaches-2b98
- https://prismic.io/blog/best-css-frameworks
- https://saeedesmaili.com/notes/classless-css-libraries/
- https://dev.to/logrocket/comparing-classless-css-frameworks-3267
- https://github.com/dbohdan/classless-css
- https://github.com/troxler/awesome-css-frameworks
以上がRuby on Rails フロントエンド Rápido com Frameworks CSS Classless ou Class-Light Usando CDNの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。