Elf、フレックスボックスベースのレスポンシブCSSフレームワーク

2016.05.03に執筆しました

公式ウェブサイトアドレス: jrainlau.github.io/elf/
プロジェクトの住所: github.com/jrainlau/el …

はじめに

"elf"という名前のelfは、クリーンで軽量のレスポンシブCSSフレームワークです。 flexboxに基づいて、彼女はすばやく異なるサイズのデバイスに収まるレスポンシブレイアウトを構築するように設計されています。

使用する

インストール

npm install elf-css

Elfは純粋なcssフレームワークです。最初にelf.csself.cssに導入する必要がありelf.css

<link rel="stylesheet" href="elf.css" />

次に、親コンテナーに.elfというクラス名を追加します。

<main class="elf">
  ...
</main>

特徴

  • きれいな

すべてのelf機能はクラス名が.elfコンテナーにのみ反映されるため、elfはさまざまなCSSフレームワークを使用してグローバルスタイルの汚染を回避できます。

  • 軽量

完全なelf.cssファイルのサイズは約30 KBで、圧縮ボリュームはさらに小さくなります。 小さいサイズは、始めるのに3分しかかからない簡単な文法を意味し、急速な開発に適しています。

  • フレンドリーなサポートのパーソナライズされたカスタマイズ

Elfはless構文を使用して構築されており、さまざまな機能はカスタマイズが簡単なようにさまざまな.lessファイルから独立しています。

ブラウザサポート

(互換性が最も低いobject-fit属性に基づく)

開発に参加する

elfについての質問や提案がある友人は直接問題に言及することができます、そしてもっとPRを提出することを歓迎します、elfはあなたの参加を楽しみにしています!

ライセンス

MIT

著作権©2016 Jrain Lau

追記

Elfは私の2番目に成熟した作品です(以前のものはMarkcookです )。 開発の理由は、ときどきレスポンシブページをすばやく作成したいということですが、今日のCSSフレームワークの多くは比較的大きく複雑で、効果を発揮するには階層化されたネストが必要で、多くのことを書く必要があることがわかりました。 それでは、自分で書いてみませんか? ホイールを再作成する必要はありませんが、将来コードを作成するためには怠惰になる可能性があります。

1つ目は命名です。 Elfには「elf」と「いたずらな」という意味があります。これは、このフレームワークの軽量で柔軟な機能と一致しています。また、flexbox機能に基づくelfも、elfの魔法のようなものです。 私は本当にこの名前が好きです〜

ロゴが続きます。 良いロゴはブランドにとって本当に重要です! エルフのロゴのデザインや修正、素材の検索、修正、素材の検索、修正、修正を行うのに一日かかりました。私の頭の中では、エルフはドラゴンフルーツの髪型を持ったエルフです。彼はドラゴンの形をした髪型、特に遊ぶことができる、一般的なクリーム色のエルフとは異なることを望んでいました。

ソースコードに関しては、 bootstrappurecssfoundationなどの一連の主流のフレームワークが参照されます。 私に最も影響を与えたのは、 kubeと呼ばれるフレームワークですが、そのシンプルなアイデアには本当に感謝していますelfのいくつかの機能もkubeから継承されています。

Elfは大規模で包括的なフレームワークではなく、基本的なレイアウトのみを提供し、いくつかのプリセットスタイルは変更されています。 パーソナライズされたカスタマイズはelfが提唱しているプラ​​クティスであり、そのデザインアイディアは特定の条件下で効果を生み出し、地球規模の汚染を回避し、他のフレームワークやスタイルを使った作業を容易にします。

エルフはまだ若く、隠れピットを排除しませんが、彼女は維持し続け、助言を与えエルフの成長を助けるためにすべての神々を歓迎します。

みなさんありがとう〜

元のリンク