ホームページ » ウェブデザイン » 財団6 - 10素晴らしい新機能

    財団6 - 10素晴らしい新機能

    財団のフロントエンドフレームワークの開発者たちは、Bootstrapチームが彼らの素晴らしい新しいメジャーリリースに取り組んでいる間、彼らの栄誉にただ座っていませんでした。昨年、彼らは自分たちの知識をユーザーと共有し、彼らが実際の仕事でFoundationをどのように使用していたかについて尋ねるために素晴らしいワールドツアーに参加しました。.

    デスクに戻った後、彼らはユーザーのニーズと要望をまとめ、フレームワークの新しいメジャーリリースの計画に着手しました。.

    まだ開発中ですが、計画は非常に有望です。今後の機能は3つの主要分野に焦点を当てています。 パフォーマンス、カスタマイズ性、およびアクセシビリティ. 今、これらの機能のうちの10を見てみましょう.

    1.合理化されたワークフロー

    ユーザーの経験に基づいて、財団チームは新しいスローガンを開発しました。 “試作から生産まで”, これは、設計者や開発者が使用できる新しい合理化されたワークフローを意味します。 試作品から製造へ.

    新しいFoundation 6の目標は、柔軟でカスタマイズが容易なフレームワークを提供することです。 最初からきれいで意味のあるコードを書く. 現在のバージョンであるFoundation 5でもクイックプロトタイピングが可能ですが、 さらなるワークフローの最適化を期待する 今後のリリースで.

    2. Sassバージョンの簡易セットアッププロセス

    Foundationフレームワークの最も素晴らしい点の1つは、Sassスタイルシート言語を使用して構築されていることです。 実際のニーズに合わせてデフォルトのスタイルルールを素早くカスタマイズする.

    Sassのセットアッププロセスは、多くのユーザーにとって少々威圧的なものでしたので、新しいメジャーリリースでは Sassバージョン用の単純化されたセットアッププロセスを手に入れる. これはSassセットアップが はるかに少ない依存関係を必要とする 前より。もちろん、もしあなたがバニラCSSバージョンを好むなら、あなたはまだそれを選ぶことができます.

    3.マキシマリストのための新しくまとまったセットアップスタック

    通常のSassバージョンの他に、Foundation 6はスープアップされています。 開発者に強力なカスタマイズオプションを提供するSassバージョン.

    財団の創設者であるZURBは、彼ら自身のものも含め、彼ら自身の開発スタックを一般に公開する予定です。 静的サイトジェネレータ, ライブリロードサーバー そして 内部最適化手法の負荷 未使用のスタイルを削除するためのUnCSSとJavaScript圧縮のためのUglifyJSの統合を含む.

    したがって、基本的にZURBが内部で使用しているのと同じ開発環境で作業できるようになります。.

    4.ページ読み込み時間の短縮

    財団チームは、ほとんどの財団のプ​​ロジェクトでは、CSSコードの約90%が使用されなくなると主張する建設的な批判に直面しなければなりませんでした。これはFoundationだけでなく、BootstrapやTopCoatなどの他の主要なCSSフレームワークにも当てはまります。彼らの返事の一部として、Zurbはおよそ40-50%のコード削減を実行することによって出力されたCSSのファイルサイズをかなり減らすことに決めました.

    画像:Freepik.com

    「彼らは、「自分自身をブートストラップと区別するようにしている」と述べていることに注目するのは興味深いことです」Foundationは、スタイリッシュなクラスのmarginおよびpadding、あるいはroundおよびradiusを持つフレームワークではありません。"(参考のために、前回の記事のBootstrap 4の新しいユーティリティクラスを参照してください。).

    5.ワイヤーフレームとして機能する基本スタイル

    パフォーマンス改善の努力の他の部分は 最終的なデザインの代わりにワイヤーフレームとして機能する基本スタイルを作成する. これにより、主にテーマが明るくなりますが、別の大きな利点もあります。より多くのスタイルルールが個々のコンポーネントに移動するにつれて、開発者は より簡単にデザインをスタイルする.

    画像:Freepik.com

    うまくいけば、これは財団に基づくサイトが 似たような、標準化された外観が少ない, そしてデザイナーはより多くのスペースを経験するでしょう美しくてユニークなsolutを使って退屈に見えるWebについての最近の心配に反論するイオン.

    促進された選択的輸入

    Foundation 5では、開発者は使用したいコンポーネントだけを選択できます。財団6は、この努力を次の段階に進めます。 選択インポート機能を_settings.scss Sassファイルに移動する.

    画像:Zurb.com

    このようにして_settings.scssは 本当に普遍的な設定ファイル, 行幅やデフォルトフォントなどの機能をその助けを借りてカスタマイズすることはできないだけでなく、簡単に 必要のないコンポーネントから選択する. そうすれば、さらなるパフォーマンスの向上を達成できます。.

    7.より洗練されたSass

    再設計の過程で、財団チームはフレームワークのあらゆる側面を再考しました。 Sassスタイルシート言語の使用方法を変更しました. 彼らは、場合によってはSassを使いすぎて、 CSS出力の不要な過剰な合併症. よりスリムでクリーンなコードベースを念頭に置いて、彼らはSass構造も合理化しました。.

    画像:Zurb.com

    財団6では ネスティングや特定性の低下、メディアの問い合わせの効率化を期待 (彼らは繰り返しコードをマージしました)、そして コンポーネントミックスインの縮小. 後者は、コンポーネントミックスインが少なくなることを意味し、残りのものはパラメータが少なくなるため、よりシンプルで論理的なコードになります。

    あなたがミックスインを愛していても、心配しないでください、すべてのコンポーネントがまだそれらを持っているでしょう、それはそれらが現在よりも効率的で便利になるように再設計されるということです.

    8.改良されたグリッドミックスイン

    コンポーネントミックスインを削減しながら、Foundation 6には 拡張グリッドミックスイン それは私たちにできるようになります よりカスタマイズされたグリッドを作成する.

    画像:Foundation.zurb.com

    Zurbは私たちができることを約束します 複雑なグリッドシステムとして簡単に構築 私たちが望む通り、 より洗練されたカスタム行 そして ネストしたグリッド, デフォルトクラスをセマンティックマークアップに変換する機能。改良されたグリッドミックスインは現在の グリッドの作成がさらに直感的になり、柔軟かつ高速に.

    9.カスタムJavaScriptプラグインのシームレスな統合

    Foundation 5には現在、クールなモーダルダイアログ、ツールチップ、スティッキーナビゲーションバー、ライトボックス、その他現代のWebサイトに必要な他の多くのJavaScriptコンポーネントがありますが、今後のメジャーリリースで、次のことが可能になります。 カスタムJavaScriptプラグインを書く 財団のコアを活用する。それは両方とも大きな前進です 使いやすさとパフォーマンス.

    画像:Foundation.zurb.com

    将来的には、私たちはできるようになるでしょう 組み込みの初期化メソッドにアクセスする, トグルトリガー そして ブレークポイント, FoundationのグローバルJavaScriptの他のすべての機能を利用する.

    10.フルアクセシビリティ

    おそらく、新しいFoundation 6の最も素晴らしい機能は、それが完全にアクセス可能になるということです。すべてのコンポーネントとコードスニペットには、適切なWAI-ARIA属性とランドマークの役割が付属します。さらに開発者は ユーザーガイド付きa11yウェブ標準の使い方.

    画像:アメリカ労働省

    そのため、クライアントに完全にアクセス可能なWebサイトを提供したい場合は、Foundation 6を使用してデザインを作成する以外に何もする必要はありません。 HTMLページに適切なARIAルールを追加する, Zurbの来るべきa11yユーザーガイドはきっとラーニングプロセスを促進するでしょうが.