Ruby on Rails フロントエンドの迅速なフレームワーク CSS クラスレスまたはクラスライト - 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">
</summary>

ユーティリティ クラスを使用する 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">
</summary>

• 内の上部… これらには、ページがレンダリングされ、正しく機能するための重要な構造要素が含まれています。 head タグは、ページの動作 (JavaScript を使用)、外観 (CSS を使用)、他のシステムやサービスとの関係、CSRF や CSP の保護などのセキュリティ設定を構成するのに役立つ重要なメタデータとリソースを含めるために使用されます。
• ページのメインコンテンツは 内にレンダリングされます。 、ERB タグ を介して。このタグは、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 を使用) を指定してルートを表示できます

  
    <title></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">
    
    

    

    
    

    <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">

    
    
    
  

  
    
  

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

<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">
</summary>

• アドレス 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 にある場合は、タグ を追加する必要があります。拡張子 .css なし;
  • CSS ファイルが app/assets/stylesheets/classless/mystylesheet.css にある場合は、タグ を追加する必要があります。拡張子 .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">
</summary>

• ファイルを 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 スタイルを追加します。

もっと見る…

• 行 をコメントアウトします。 Rails が一度にすべてのスタイルをロードしないように、

$ 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 .

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

  
    <title></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">
    
    

    

    
    

    <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">

    
    
    
  

  
    
  

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

$ 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 以外のスタイルをテストするには、ローカル スタイルを設定する行をコメント アウトします。この場合は行 です。そして、別のスタイルの行 (たとえば、Simple CSS 行) のコメントを解除します。
• ERB タグにコメントするには、

はい、スタイリッシュな 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 サイトの他の関連記事を参照してください。