simpledev.css は、ほぼクラスレスのフレームワークと私が説明する新しい CSS フレームワークです。これをほとんどクラスレスと呼んでいるのは、多くのコードで型セレクターが使用されているため、Web ページのスタイルを設定するために多くのクラスを追加する必要がないからです。いくつかのクラスがありますが、最小限に抑えるよう努めています（現時点では約 42 クラスしかありません）。

以下でいくつかの機能を見てみましょう!

特徴

1. ほとんどクラスレスなデザイン: ほとんどクラスレスなので、フレームワークを追加するとすぐにプレーン HTML ページが変換されることがわかります。
2. 共通要素の最小限のクラス: 私たちは、ナビゲーションバー、リンクをボタンのように見せる、基本的なフッターなど、本当に一般的なもののためのクラスを提供します。
3. アクセシビリティ重視: 私はアクセシビリティの専門家ではありませんが、アクセシビリティのベスト プラクティスをフレームワークに組み込むために最善を尽くしました。したがって、フレームワークにはスキップ リンク コンポーネント、つまり視覚的に隠されたクラスがあり、フォント サイズには rems を使用します。
4. テーマのサポート: simpledev.css はさまざまなテーマをサポートしています。ライト モードのみ、ダーク モードのみ、またはその両方を使用できます。
5. 最小限の JavaScript: JS では非常に軽量です。 JS は navbar コンポーネントにのみ使用します。 navbar を使用していない場合 (または代わりに単純な navbar コンポーネントを使用している場合)、JS を完全にスキップできます!
6. 簡単に始めることができます: コピーまたはダウンロードできる基本テンプレートと高度なテンプレート、ダウンロードまたは新しいリポジトリの開始に使用できる GitHub リポジトリ、および CodePen のペンを備えた「はじめに」ページがあります。ブラウザで直接試してみてください。
7. レシピ: また、CSS ルールをコピーして Custom.css ファイルに貼り付けて、粘着性のあるナビゲーション バー、丸い角、縞模様のテーブル、スムーズなスクロールなどを実現できるレシピ ページもあります。
8. カスタム カラー パレット: 独自のカラー パレットを持ち込むことができます。 simpledev.css にはデフォルトでは実際には色がないため、独自の色を選択してフレームワークに追加できます。
9. モジュラー コンポーネント: 必要に応じて、技術的にはコンポーネントの一部をダウンロードして個別に使用できます。 GitHub リポジトリにアクセスし、必要な CSS ファイルをダウンロードするだけです。コンポーネントは Modern Normalize をベースに開発されているため、同じ外観を得るには Modern Normalize を組み込む必要がある場合があることに注意してください。

背景

昨年、私は GitHub で awesome-css-frameworks リポジトリを発見しました。これには、さまざまなカテゴリにグループ化された CSS フレームワークの長いリストが含まれています。私が特に興味を持ったのは、クラスレス CSS フレームワークに関するセクションです。 CSS ファイルにリンクすると、HTML を変更せずに HTML ページの外観を瞬時に変更できるというアイデアが気に入りました。

最初は、リストにある Water.css というフレームワークからインスピレーションを得ましたが、その後、別のクラスレス フレームワークである Pico.css からさらにインスピレーションを得ました。

結局、独自のフレームワークを作成してみることにしました。ただし、少し違うものにしたかったのです:

• Sass の代わりにバニラ CSS を使用することにしました。これは、他の人がフレームワークを簡単に試したり、ソース コードから学んだりできるようにしたかったからです。
• CSS クラスが必要なものがいくつかあると思うので、純粋にクラスレスにはしたくありませんでした。
• Pico はおそらく最も見栄えの良いクラスレス CSS フレームワークですが、一部の要素/コンポーネントが少し大きいと感じたので、要素/コンポーネントをもっと小さくしたいと思いました。

結論

この記事を読んでいただきありがとうございます!いくつかお願いがあるのですが:

1. GitHub のリポジトリにスターを付けてください!
2. フレームワークを使って小さなプロジェクトを構築してみる
3. 問題に気付いた場合は、GitHub で問題を作成してください
4. 機能のリクエストがある場合は、GitHub でディスカッションを開始してください
5. コンポーネントのアイデアがあれば、CodePen でビルドしてみてください!

ご質問やご提案がございましたら、以下にコメントを残してください。また、おそらく後ほど simpledev.css のチュートリアルもフォローアップする予定です。