クラスレス CSS フレームワークとしてゼロ CSS を使用する Ruby on Rails 高速フロントエンド

この記事はこのシリーズのこれまでの記事とよく似ていますが、今回は新しく作成された優れた CSS フレームワーク CSS Zero を使用します。これは、「ビルドなし」プロジェクトや「ビルド」が必要な Ruby on Rails アプリケーションに使用できます。 。

CSS Zero フレームワークは、完全なクラスレスまたは軽量のクラスレス フレームワークを目指しているわけではないことに注意してください。この記事で提案されている変更はテストのみを目的としており、クラスを追加せずにこのチュートリアルの HTML ページ内のすべての要素のスタイルを設定するように設計されています。

その結果、一部の HTML 要素の書式設定は、CSS Zero フレームワークが推奨するスタイル、デザイン、レイアウト、動作と一致しない可能性があります。 CSS Zero フレームワークに何を期待できるかを確認するには、CSS Zero ルックブックにアクセスしてください: [ここにルックブックのリンクを追加]。クラスレス フレームワークとして実際に動作していることを確認するには、以下の手順に従います。

新しい Rails アプリを作成する

• rails new コマンドの前の time は、コマンド実行の合計時間を表示するために使用されます。次の例では 47 秒かかりました。

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-zero
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

Rails 8 は、「ビルド不要」の理念に基づいて、デフォルトで Propshaft をリソース パイプライン ライブラリとして使用し、Importmap を JavaScript ライブラリとして使用します。 Importmap は JavaScript 処理を実行しません。

VSCode またはお気に入りのエディタを使用してプロジェクトを開きます

<code>$ cd classless-css-zero && code .</code>

HTML 要素のスタイルを表示するページをいくつか作成します

このページは、このシリーズの最初の記事の「共通の手順」セクションにあります。

プロジェクトに CSS Zero を追加します

展開…

次の手順に従って、CSS Zero をプロジェクトに追加します。

<code>$ bundle add css-zero
$ bin/rails generate css_zero:install</code>

使用可能なコンポーネントを確認するには、次のコマンドを実行します:

<code>$ bin/rails generate css_zero:add --help</code>

すべてのコンポーネントを追加するには、次のコマンドを実行します:

<code>bin/rails generate css_zero:add accordion alert autoanimate autosave avatar badge breadcrumb button card carousel chart check_all combobox command collapsible datepicker dialog dropdown flash form fullscreen group hotkey input input_concerns inputmask layouts lightbox local_time navigation pagination progress prose sheet skeleton sortable switch table tabs trix upload_preview toggle web_share</code>

他のコンポーネントが追加されたり、一部のコンポーネントが削除されたりした場合、上記のコマンドは機能しないことに注意してください。

パート 1 - app/assets/stylesheets/base.css ファイルを変更する

展開…

見出しリンクでは、多くのスタイル要素を `

` を持つ要素に含める必要があることがわかります。

<code><div>
  ...
</div></code>

<div> を使用せずにこれらの HTML 要素のスタイルを設定するには、次の変更を加えます。 <pre class="brush:php;toolbar:false">&lt;code&gt;body { background-color: var(--color-bg); color: var(--color-text); font-synthesis-weight: none; text-rendering: optimizeLegibility; /* 无类配置测试 */ font-size: var(--text-fluid-base); /* max-inline-size: 65ch; */ /* 抗锯齿字体 */ -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; :is(h1, h2, h3, h4, h5, h6) { font-weight: var(--font-extrabold); hyphens: auto; letter-spacing: -0.02ch; line-height: 1.1; margin-block: 0.5em; overflow-wrap: break-word; text-wrap: balance; } }&lt;/code&gt;</pre> <p><code>app/assets/stylesheets/base.css ファイルを開き、body { 行を見つけて、コピーした内容を text-rendering: optimizeLegibility; の後に貼り付けます。貼り付け後、max-inline-size: 65ch; 行を削除またはコメントアウトします。 body の内容は上記の例と同じである必要があります。

次に、app/assets/stylesheets/prose.css ファイルを開き、以下を含むセクションをコピーします:

<code>/* 无类配置测试 */
  h1 {
    font-size: 2.4em;
  }

  h2 {
    font-size: 1.8em;
  }

  h3 {
    font-size: 1.5em;
  }

  h4 {
    font-size: 1.2em;
  }

  h5 {
    font-size: 1em;
  }

  h6 {
    font-size: 0.8em;
  }

  :is(ul, ol, menu) {
    list-style: revert;
    padding-inline-start: revert;
  }

  :is(p, ul, ol, dl, blockquote, pre, figure, table, hr) {
    margin-block: 0.65lh;
    overflow-wrap: break-word;
    text-wrap: pretty;
  }

  hr {
    border-color: var(--color-border-dark);
    border-style: var(--border-style, solid) none none;
    margin: 2lh auto;
  }

  :is(b, strong) {
    font-weight: var(--font-bold);
  }

  :is(pre, code) {
    background-color: var(--color-border-light);
    border: 1px solid var(--color-border);
    border-radius: var(--rounded);
    font-family: var(--font-monospace-code);
    font-size: 0.85em;
  }

  code {
    padding: 0.1em 0.3em;
  }

  pre {
    border-radius: 0.5em;
    overflow-x: auto;
    padding: 0.5lh 2ch;
    text-wrap: nowrap;
  }

  pre code {
    background-color: transparent;
    border: 0;
    font-size: 1em;
    padding: 0;
  }

  p {
    hyphens: auto;
    letter-spacing: -0.005ch;
  }

  blockquote {
    font-style: italic;
    margin: 0 3ch;
  }

  blockquote p {
    hyphens: none;
  }

  table {
    border: 1px solid var(--color-border-dark);
    border-collapse: collapse;
    margin: 1lh 0;
  }

  th {
    font-weight: var(--font-bold);
  }

  :is(th, td) {
    border: 1px solid var(--color-border-dark);
    padding: 0.2lh 1ch;
    text-align: start;
  }

  th {
    border-block-end-width: 3px;
  }

  del {
    background-color: rgb(from var(--color-negative) r g b / .1);
    color: var(--color-negative);
  }

  ins {
    background-color: rgb(from var(--color-positive) r g b / .1);
    color: var(--color-positive);
  }

  a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-skip-ink: auto;
  }

  mark {
    color: var(--color-text);
    background-color: var(--color-highlight);
  }</code>

上記の をファイル app/assets/stylesheets/base.css の 末尾に貼り付けます。

パート 2 - app/assets/stylesheets/button.css ファイルを変更する

展開…

すべての HTML ボタン要素が自動的にこのスタイルを使用するように、`.btn` CSS クラスを変更します。

は次のようにします:

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-zero
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

が

に変更されました

<code>$ cd classless-css-zero && code .</code>

パート 3 - app/assets/stylesheets/input.css ファイル

を変更する

展開…

すべての HTML 入力要素が自動的にこのスタイルを使用するように、`.input` CSS クラスを変更します。 同様に、対応するすべての HTML タグに適用されるように、`.checkbox`、`.radio`、`.range` セレクターを変更します。 具体的な改造方法は後編と同様ですので、後編の改造方法を参照してください。

app/views/layouts/application.html.erb ファイルを調整

展開…

リンクは、`application.html.erb` 内のテスト HTML ファイルへの参照を配置する場所に応じて、表示方法が異なります。デモをチュートリアルと同じにしたい場合は、対応するセクションを変更してください。

次に、HTML のスタイルを設定するためのクラスレス フレームワークとして CSS Zero を使用しますか?

CSS Zero を設定し、上記のカスタマイズを行った後、Rails サーバーを起動すると、スタイル付きの HTML が表示されます。

ダークモード

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

次のステップ

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

参考文献

• https://medium.com/@AntonShevchuk/classless-css-based-on-tailwind-57d4ef745c1f
• 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