Hocus-Pocus：設計のないSASSフレームワークの構築

Hocus-Pocusは、自由な時期に取り組んでいるデザインのないSASSフレームワークです。 Hocus-Pocusの背後にある主なアイデアは、最も一般的な機能に焦点を当てた普遍的で軽量なStyleSheetスターターキットを作成することです。この記事では、なぜ独自のSASSフレームワークを構築することにした理由と、そうするときに行ったアプローチを取り上げます。

キーテイクアウト

Hocus-Pocusは、最も一般的な機能に焦点を当てた、軽量で普遍的なスタイルシートスターターキットを提供するデザインのないSASSフレームワークです。これにより、ユーザーは変数を使用してすべてのコンポーネントの外観を変更し、特定の機能を無効にしたり、さまざまなヘルパーを定義したりできます。
• フレームワークは、BowerとNPMを使用して簡単にインストールでき、SASSとAutoprefixerを実行する必要があります。これは、定期的なダッシュスタイルのクラスの命名規則に従い、Hocus-Pocus Changelogのドキュメントと更新に細心の注意を払います。 Hocus-Pocusの将来の計画には、プロジェクト固有のUIコンポーネントとテーマ定義に焦点を当てた複雑なプロジェクトに理想的なSASSスターターキットを作成することが含まれます。主要な新機能は計画されていませんが、構文とクラス名の改善が実装される場合があります。
• なぜ私はSASSフレームワークに取り組み始めたのですか？
要するに、新しいWebプロジェクトを開始するときに時間を節約したかったので、SASSフレームワークに取り組み始めたと思います。本当にカスタムデザインに取り組んでいても、同じツールのセットを常に追加し、同じ標準パッケージを含め、基本的なCSSコンポーネントの同様のコレクションを実装していることに気付きました。
• 次に続く2番目の質問は - bootstrapのような既存の有名で実績のあるフレームワークを使用しないのはなぜですか？
これに対する私の応答は、CSSに対する好みと私のアプローチに帰着します。 BootstrapやFoundationなどの図書館は素晴らしく、人々がCSSについてどう思うかを大きく変えたと思います。ただし、ほとんどの場合、私自身のプロジェクト作業内で、これらすべての機能やProgress BarsやBreadrumbsなどのUIコンポーネントは必要ありません。代わりに、私はもっと普遍的なものを持っていることを好みます。フレームワークCSSクラスをオーバーライドする必要なく、どのプロジェクトでも使用できるものが好きです。

上記の理由により、Hocus-Pocusでは、変数を使用してすべてのコンポーネントの外観を変更できます。いくつかの機能を無効にしたり、さまざまなヘルパーを定義したりすることもできます。このアプローチの欠点は、変数を更新する機能なしでHocus-Pocusを使用する合理的な方法がないため、コンパイルされたCSSバージョンのフレームワークを提供できないことです。

前提条件と原則

インストール

フレームワークは利用可能で、2つの異なるパッケージマネージャー（BowerとNPM）で簡単にインストールできます。実行するには、SASS（最小必要なバージョンは3.3.0）とAutoprefixerが必要です。 Autoprefixerは、最終コンパイルされたCSSファイルに必要なベンダープレフィックスを追加するために使用されます。私は個人的に自動解除が十分であると感じているので、私は最近のさまざまなブラウザ間の互換性についてあまり心配することはありません。さらに、Sass Linter（SCSS-Lint）を使用していますが、これはHocus-Pocusを実行して正しい方法で行うためには必要ありません。 Hocus-Pocusはそれなしで機能します

命名条約

次の原則は、すべてのフレームワーク、つまりネーミング条約にとって重要な原則です。私はBEMのない定期的なダッシュスタイルのクラス名を好みます。あなたがBEMのファンであり、BEMネーミングコンベンションを使用することを好む場合、私は文句を言いません。私の観点から見ると、BEMはCSSの責任問題のすべてを修正するわけではありません。また、BEMを使用するときに、より少ないクラスレベルの要素を使用してCSSにアプローチすることがわかります。既存のブロックに新しい要素を追加するのは簡単すぎる。

ドキュメント

最後になりましたが、ドキュメントを書いて、Hocus-Pocus Changelogを最新の状態に保つことに細心の注意を払っています。ドキュメントは、特に最初は完璧である必要はありませんが、私は常にそれを改善する時間を見つけようとしています。これにより、新規参入者がツールの仕組みを学び、フレームワーク機能を追跡できるようになります。

フレームワーク機能

次のフレームワーク機能は、私の意見ではホーカスポーカスにとって最も特徴的であり、その焦点の最良の概要を示しています。

フレームワーククラスのほとんどは、私が過去に取り組んだ既存のプロジェクトからインスピレーションを受けています。また、私にインスピレーションを与えた他のCSSフレームワーク、特に私のお気に入り、プライマーとinuitcs。 Hocus-Pocusのフレームワーク機能には、

境界線ボックスに設定されたグローバルボックスサイズのセットや、最高マージンのないテキスト要素などのいくつかの強化で正規化します。

CLRS.CC.に基づく新しいデフォルトのカラーパレット

フラクションをクラス名（.1/2、.1/3など）として使用する幅ヘルパーを持つFlexBoxに基づく流体グリッド。 レスポンシブWebデザインの幅広いサポート。好みのアプローチとして「モバイルファースト」または「デスクトップファースト」のいずれかを選択するオプションがあります。また、それぞれのブレークポイントを定義することができ、それぞれが間隔、グリッド、視認性、および個々のSASSミックスのために独自のヘルパーセットを取得します。

たとえば：
2. その後、コンパイルされたCSSでは、.mobile-1/2、.mobile-hidden、.mobile-padding-doubleなどのクラスにアクセスできます。
   グリッドローバーに基づいた垂直リズムを持つテキスト要素の汎用デフォルトスタイル。 インラインリスト、メニューリスト、円画像、ゼブラテーブルなど、他のHTML要素の追加修飾子。
   1. さまざまなボタンタイプと3つのバージョンのフォーム：インライン、積み上げ、水平。
   メディアオブジェクト、ボックスオブジェクト、Navbar、ランディングページのヒーロー要素、粘着性のあるフッターなどの必須のUIコンポーネント。これ以上何もありません。
   3. 将来の希望は、hocus-pocus
   に希望します
   4. 私の目標は、プロジェクトがどんなに複雑であっても、Hocus-Pocusを理想的なSASSスターターキットにすることです。これにより、プロジェクト固有のUIコンポーネントの作成とテーマの定義に焦点を当てることができます。
   主要な新機能を実装する予定はありません。含まれる機能は合理的な量の機能であり、最終的な機能である可能性が高いと思います。一部のコンポーネントの構文を改善するか、一部の単一クラス名を変更する可能性がありますが、現在のバージョンからの互換性の壊れた変更は予測されません。とりあえず、私はより多くの人がhocus-pocusを試してみるにつれて発生するバグを修正することにもっとコミットしています。
   Hocus-Pocusフレームワークが今後のプロジェクトで役立つと思われる場合は、Hocus-Pocus.ioで完全なドキュメントを見つけることができます。 Hocus-Pocusコードはオープンソースで、すべてGithubで利用できます。潜在的な問題に関するコメント、フィードバック、および情報に感謝します。

   デザインのないSASSフレームワークの構築に関するよくある質問（FAQ）

   設計のないSASSフレームワークは、ユーザーに設計上の決定を課さないという点で、通常のSASSフレームワークとは異なります。開発者が構築するためのクリーンなスレートを提供し、既存のスタイルをオーバーライドすることなく独自のデザインの選択肢を実装できるようにします。 >設計のないSASSフレームワークを使用すると、いくつかの利点があります。開発者は、清潔で整理されたコードベースを維持できるようになり、管理と更新が容易になります。また、開発の初期段階で時間と労力を節約するための強固な基盤を提供します。

   デザインのないSASSフレームワークの構築を開始するにはどうすればよいですか？

   設計のないSASSフレームワークの構築には、いくつかのステップが含まれます。まず、プロジェクト構造を設定する必要があります。次に、変数、ミックス、機能の作成を開始できます。その後、ベーススタイルとレイアウトモジュールの構築を開始できます。最後に、sassをCSSにコンパイルできます。

   デザインフリーのSASSフレームワークを自分のニーズに合わせてカスタマイズするにはどうすればよいですか？あなたのニーズに合わせて変数、ミックス、機能を変更することにより、SASSフレームワーク。また、独自のスタイルとレイアウトモジュールを追加することもできます。

   デザインのないSASSフレームワークを操作する際のベストプラクティスは何ですか？コードを乾燥させ（自分自身を繰り返さないでください）、変数とミキシンに意味のある名前を使用し、論理的かつ一貫した方法でコードを整理します。他のCSSフレームワークを備えたSASSフレームワーク？

   はい、他のCSSフレームワークを備えたデザインフリーのSASSフレームワークを使用できます。ただし、デザインの選択がオーバーライドされないようにするために、他のフレームワークのデフォルトスタイルの一部をオーバーライドする必要がある場合があります。

   設計のないSASSフレームワークの構築に関するリソースをどこで見つけることができますか？

   デザインのSASSフレームワークの構築について詳しく学ぶために利用できるオンラインリソースがたくさんあります。開始するのに適した場所には、公式のSASSドキュメント、オンラインチュートリアル、Web開発フォーラムが含まれます。

以上がHocus-Pocus：設計のないSASSフレームワークの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。