ウェブのための現代のフラットデザインフレームワーク

今、FlatifyCSSと呼ばれるプロジェクトに取り組んで数ヶ月後、私は素晴らしいウェブサイトを作成するために使用できる安定版を発表することができます.
FlatifyCSSは、Duolingo design systemに触発されたWebのためのモダンなフラットデザインフレームワークです.いくつかのコンポーネントとヘルパークラスが付属して開発プロセスをスピードアップします.
私はそれを材料設計システムのfancierバージョンとして記述することができます.FlatifyCSSでは、ぼやけた影はありません、しかし、境界線は同じ感覚を表します.そして、それはレイアウトをよりきれいにします.

機能
FlatifyCSSは次のように選択できます.

カスタマイズ可能性

アクセシビリティ

左右のレイアウトのための

のサポート
コンポーネント

の

実用的なセット

ハンディヘルパークラス

カスタマイズ可能性
CSS custom propertiesの力で、色、タイポグラフィ、アニメーションなどをカスタマイズすることが可能です.各コンポーネントのカスタマイズを行うことができます.
たとえば、デフォルトのボタンがあり、ボタンの種類を作成します.

.my-custom-button {
  --flatify__button-txt-color: #fff;
  --flatify__button-bg-color: #48cfad;
  --flatify__button-border-color: #37bc9b;
}

したがって、すべてのプロパティを変更する代わりに、スタイルをカスタマイズするためにいくつかのCSS変数を変更する必要があるだけです.

アクセシビリティ
FlatifyCSSはアクセシビリティを尊重します.これは、キーボードフレンドリー、支援技術の友人であり、アニメーションや移行のための縮小運動をサポートするときに、ユーザーが好む.

For reduced motion users, all animations will be fade in/out.

General users:

Users who prefer reduced motion :

また、コントラストの損失の問題と闘う人のためのFlatifyCSSの高コントラストバージョンを作成することが可能です.これは単にscssの設定ファイル内のいくつかの微調整を適用することによって可能です.Read more about high-contrast version


左側のレイアウトのサポート
FlatifyCSSは、特にアラビア語、ペルシャ語、ヘブライ語などの右から左への言語のために構築された-rtl.cssとしてプレフィックスファイルが付属しています.
また、flatify-rtl.scssファイルと条件文を使用して、右から左のスタイルを拡張することもできます.Read more about RTL layouts

コンポーネントの実用的なセット
混在することができますし、より複雑なユーザーインターフェイスを作る20以上のコンポーネントがあり、各コンポーネントは、独自のCSS変数を持っており、使用に基づいてカスタマイズすることができます.

ハンディヘルパークラス
FlatifyCSSは、ユーティリティの最初のCSSフレームワークではなく、正直に、我々はその側にすることを熱望していません.実際の開発者がコーディングによって自分自身を証明するので、それは開発の準備をする.

それにもかかわらず、FlatifyCSSはいくつかの必要があります必要があります.たとえば、コンポーネントのテーマを変更する場合は、style-とcolor-の接頭辞でbutton-successまたはalert-dangerのように繰り返されていないヘルパークラスのセットがあります.

始める
FlatifyCSSは多くの方法でユーザーに利用可能です.あなたはCDNから直接パッケージマネージャを使用してインストールすることができます.
NPMまたは糸を通して最新版をインストールしてください:

npm install flatifycss
yarn add flatifycss

パッケージがインストールされたら、プロジェクトにファイルをインポートしたり、Webページ内に直接リンクできます.
lastest project archive
詳細を学ぶ!
すべてのコンポーネント、フォーム、ヘルパークラス、原則、および情報の断片が文書化され、どのように物事が動作し、試して、それらを使用してください.私は最初の読み取り をお勧めします.
the overview section
我々がそれをよりよくするのを手伝ってください..
我々は、この道の最初のステップでは、いくつかのことを磨くと欠けている機能が追加される必要があります、この場合、このプロジェクトにあなたのフィードバックと貢献は、私たちとそれを使用する人々によって評価されます.