ホームページ >ウェブフロントエンド >CSSチュートリアル >Ruby on Rails フロントエンドの迅速なフレームワーク CSS クラスレスまたはクラスライト - Sem CDN
Ruby on Rails フロントエンドの迅速なフレームワーク CSS クラスレスまたはクラスライト - Sem CDN
- DDDオリジナル
- 2024-12-24 17:11:15947ブラウズ
この記事は、同じ主題を扱う前の記事と意図的によく似ていますが、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 を理解する。
もっと見る…
<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-local
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s
VSCode で config/routes.rb ファイルを開きます
$ cd classless-css-local && 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-local
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s
Rails サーバーを起動すると、見苦しいプレーンな HTML が表示されますか?
もっと見る…
$ cd classless-css-local && code .
CSS ファイルをプロジェクトにコピーし、app/assets/stylesheets/ に貼り付けます。
app/assets/stylesheets 内にクラスレス サブフォルダーを作成して、以下のリンクからダウンロードした CSS ファイルをコピーしましょう: Bamboo CSS: https://github.com/rilwis/bamboo/blob/master/dist/bamboo.min.css Bamboo CSS には縮小されたファイルのみが含まれます。 CSS Beautifier & Minifie などのサービスを使用して、理解しやすいように書式設定できます。左側のコードを貼り付けて、右側にフォーマットされたファイルを取得します。ファイルの名前をbamboo.css. バニラ SCSS からバニラ CSS への変換:もっと見る…
CSS ファイルに関する Rails ドキュメントを参照すると、CSS ファイルをコピーして Web アプリケーションのスタイルを設定するには、いくつかの手順に従う必要があることがわかります。
<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/views/layouts/application.html.erb ページを再度開き、プロジェクトにコピーされたクラスレス CSS スタイルを追加します。
のためにもっと見る…
$ 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
はい、スタイリッシュな HTML ですか?
上記のスタイルシートを保存して Rails サーバーを起動すると、選択した CSS フレームワークでスタイル設定された HTML が表示されます。
ダークモード
一部のスタイルにはダーク モードのオプションがあります。確認するには、色のカスタマイズ オプションでコンピュータのテーマを変更します。 Windows で「アプリのダーク モードをオンにする」を検索し、ダーク モードとライト モードを切り替えます。オペレーティング システムを変更すると、HTML ページが自動的に変更され、ライト モードとダーク モードがサポートされていることを示します。
次のステップ
[x] 好みに応じてスタイルをアレンジします;
[x] CDN を使用せずに、プロジェクト CSS ファイルのスタイルを使用します。
[-] Rails Live Reload を使用して、ブラウザでプロジェクトに加えられた変更を動的に更新します。
[-] フロントエンドにもう少し時間を費やしたい場合は、お気に入りのスタイルのカスタマイズ オプションをチェックしてください。
[-] Tailwind を使用してクラスレス CSS フレームワークの機能を複製します;
参考文献
- https://guides.rubyonrails.org/layouts_and_rendering.html
- 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 フロントエンドの迅速なフレームワーク CSS クラスレスまたはクラスライト - Sem CDNの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。