財(cái)団6：より速く、より効率的なWeb開発のための合理化されたCSSフレームワーク

ゼロからの構(gòu)築は完全な制御を提供しますが、時(shí)にはフレームワークが開発を加速することがあります。 Bootstrapと並んで長(zhǎng)年の候補(bǔ)であるFoundationは、6回目の繰り返しをリリースしたばかりで、速度、効率、および使いやすさの大幅な改善を誇っています。この記事では、基礎(chǔ)6の重要な機(jī)能強(qiáng)化について説明します

重要な改善：

• サイズの縮小とモジュール性の拡張：基礎(chǔ)6は、コンポーネントのモジュール性、CSS特異性の低下、および合理化されたSASS変數(shù)とミキシンを通じて達(dá)成されたサイズ（基礎(chǔ)5より50％以上）を劇的に縮小します。 これは、読み込み時(shí)間が短くなり、膨らみが減少することになります
Motion UI統(tǒng)合：
• このオプションのライブラリは、カスタマイズ可能なアニメーションとトランジションを追加し、SASSミキシンを介してユーザーエンゲージメントとサイトのインタラクティブを強(qiáng)化します。 yeti起動(dòng)ツール（macosのみ）：
このコンパニオンアプリは、プロジェクトのセットアップ、Webおよびアプリの開発をサポートし、UNCSSやUglifyJSなどの最適化ツールを統(tǒng)合します。 Windowsサポートが計(jì)畫されています
• 注目すべきコードコラボレーション：このプラットフォームは、安全なオンラインプロジェクトアクセスとインタラクティブな注釈を通じてチームのコラボレーションを促進(jìn)します。
• アクセシビリティエンハンスメント：基礎(chǔ)6アクセシビリティに優(yōu)先順位を付け、すべてのコンポーネントにわたってキーボードとスクリーンリーダーの互換性を確保し、包括的なARIA対応ドキュメントを使用して。
洗練されたレスポンシブブレークポイント：
• 更新されたブレークポイントとユーティリティは、レスポンシブデザインをより正確に制御し、メディアクエリとの相互作用を強(qiáng)化します。
開発者にとって何が新しいのですか？
• 基礎(chǔ)6は単なる増分アップデートではありません。それは完全なオーバーホールです。 Zurbは、コミュニティのフィードバックを組み込み、ブラウザテクノロジーの進(jìn)歩を活用して、ゼロからフレームワークを再構(gòu)築しました。 焦點(diǎn)は、しっかりとしたカスタマイズ可能なベース構(gòu)造を提供することです。 新機(jī)能には、フレックスグリッド、モーションUI、YetIの起動(dòng)、および更新されたビルディングブロックとテンプレートが含まれます。 既存のコンポーネントは、パフォーマンスの向上と使いやすさのために合理化されています。

最適化のハイライト：

大幅なサイズの削減（CSS：160kbから68kb、javascript：110kb?92kb）の結(jié)果：

1. モジュラーコンポーネント：大きなコンポーネントは、より小さく、より管理しやすいモジュールに分解されます。
2. 特異性の低下：ネストされたセレクターとスタイルが少ないと、カスタマイズが容易になります。
単純化されたSASS：
3. 変數(shù)とミックスインはよりクリーンで焦點(diǎn)を絞ったフレームワークを提供します。 Universal JavaScriptユーティリティ：
コンポーネント共通のユーティリティを共有し、冗長(zhǎng)性を最小限に抑えます
4. モーションUI：デザインに命を追加する

以前はアプリの基礎(chǔ)の一部である

Motion UIは、オプションであるが強(qiáng)く推奨される追加になりました。 事前に構(gòu)築された遷移とアニメーションを提供し、CSSクラスで簡(jiǎn)単に適用されるか、SASSミキシンを使用してカスタマイズします。 小さなJavaScriptプラグインは、動(dòng)的トリガーとイベント処理を促進(jìn)します。

yetiの起動(dòng)：合理化されたプロジェクトのセットアップ

yeti起動(dòng)は、新しい基礎(chǔ)プロジェクトをセットアップするプロセスを簡(jiǎn)素化します。標(biāo)準(zhǔn)のSASS搭載セットアップとZurbの開発スタック（UNCSS、UglifyJS、畫像圧縮、靜的サイトジェネレーターを含む）の間の選択肢を提供します。 現(xiàn)在、macOSのみ。

注目すべきコード：強(qiáng)化されたコラボレーション

注目すべきコードにより、開発者はプロジェクトをオンラインで共有できるようになり、チームメンバーがさまざまな畫面サイズにわたって注釈とレスポンシブテストを介してフィードバックを提供できるようになります。

アクセシビリティ：コアフォーカス

Foundation 6アクセシビリティに優(yōu)先順位を付け、すべてのコンポーネントがキーボードとスクリーンリーダーに優(yōu)しいことを確認(rèn)します。 このドキュメントは、包括的なARIAガイダンスを提供します

テンプレートとビルディングブロック：すぐに使用できるコンポーネント

更新されたテンプレートとビルディングブロックは、新しいプロジェクトの有利なスタートを提供し、完全にレスポンシブなデザインとカスタマイズ可能なコンポーネントを提供します。

新しいjavaScriptユーティリティ

Foundation 6は、次のようないくつかの役立つJavaScriptユーティリティを公開します

メディアクエリユーティリティ：

レスポンシブブレークポイントとの相互作用を簡(jiǎn)素化します タイマーと畫像のロードされたユーティリティ：

タイマーと畫像読み込みイベントを制御します。

タッチユーティリティ：

タッチインタラクティブ性を要素に簡(jiǎn)単に追加します。
軌道スライダー：洗練されたアプローチ
• 軌道スライダーは合理化されており、広範(fàn)な事前に構(gòu)築された機(jī)能ではなく、軽量でカスタマイズ可能なコアに焦點(diǎn)を當(dāng)てています。

  

  更新されたレスポンシブブレークポイント：

  Foundation 6は、修正されたSASS Mixinでブレークポイント管理を簡(jiǎn)素化し、スタイルを整理して直感的に保ちます。 カスタムブレークポイントのサイズは、ファイルで簡(jiǎn)単に定義できます。 _settings.scss

  設(shè)計(jì)の自由：

  Foundation 6の削減スタイリングは、ユニークなデザインのためのより柔軟なベースを提供し、開発者が異なるWebサイトを作成できるようにします。

  結(jié)論：

  Foundation 6は、Web開発のための合理化された効率的でカスタマイズ可能なフレームワークを提供する重要な進(jìn)歩を表しています。 いくつかの機(jī)能は簡(jiǎn)素化されていますが、パフォーマンスと使いやすさの全體的な改善により、プロジェクトの強(qiáng)固な基盤を求めている開発者にとって説得力のある選択肢になります。 グリッドとメニューの詳細(xì)については、今後の記事で説明します。

  よくある質(zhì)問(wèn)（略された）：

  新機(jī)能：

  Flexboxグリッド、改善されたタイポグラフィ、合理化されたコードベース、モーションUI、イエティの起動(dòng)、著名なコード、強(qiáng)化されたアクセシビリティ。
  • 以前のバージョンとの比較：小さい、より高速で、モジュール式、カスタマイズが簡(jiǎn)単です。
  始めましょう：
  • 公式ウェブサイトからダウンロードし、コンポーネントと機(jī)能を使用して、オンラインチュートリアルを探索します。 メリット：
  積み込み時(shí)間、柔軟性、使いやすさ、アクセシビリティ。
  • モバイル開発：
  はい、レスポンシブデザイン。
  • サポート：
  大規(guī)模なコミュニティ、オンラインチュートリアル、ガイド。
  • ライセンス：
  オープンソースと無(wú)料で使用できます。
  • この改訂された応答は、明確さ、フロー、および組織を改善しながら、元の情報(bào)を維持します。 また、より簡(jiǎn)潔な言語(yǔ)を使用し、FAQセクションを合理化します。

以上がF(xiàn)oundation 6の新機(jī)能は何ですか？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。