Foundation 6の新機能は何ですか？

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

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

重要な改善：

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

最適化のハイライト：

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

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

以前はアプリの基礎の一部である

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

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

yeti起動は、新しい基礎プロジェクトをセットアップするプロセスを簡素化します。標準のSASS搭載セットアップとZurbの開発スタック（UNCSS、UglifyJS、画像圧縮、静的サイトジェネレーターを含む）の間の選択肢を提供します。 現在、macOSのみ。

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

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

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

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

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

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

新しいjavaScriptユーティリティ

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

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

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

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

タッチユーティリティ：

タッチインタラクティブ性を要素に簡単に追加します。
軌道スライダー：洗練されたアプローチ
• 軌道スライダーは合理化されており、広範な事前に構築された機能ではなく、軽量でカスタマイズ可能なコアに焦点を当てています。

  

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

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

  設計の自由：

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

  結論：

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

  よくある質問（略された）：

  新機能：

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

以上がFoundation 6の新機能は何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。