elf，基於flexbox的響應式CSS框架

寫於 2016.05.03

官網地址：jrainlau.github.io/elf/ 項目地址：github.com/jrainlau/el…

介紹

取名爲「精靈」的elf，是一個乾淨，輕巧的響應式CSS框架。她基於flexbox，旨在快速搭建可以適配不一樣尺寸設備的響應式佈局。

使用

安裝

npm install elf-css

elf是純粹的css框架，首先須要在頁面中引入elf.css：

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

而後添加一個叫作.elf的class名到父容器上：

<main class="elf">
  ...
</main>
複製代碼

特色

• 乾淨

因爲全部的elf的特性都只能在class名爲.elf的容器中體現，所以elf能夠搭配不一樣的css框架共同運做，避免了全局的樣式污染。

• 輕量

完整的elf.css文件只有30kb左右大小，壓縮後的體積將更小。小巧的體積意味着簡單的語法，只須要3分鐘便可上手，適合快速開發。

• 友好支持個性化定製

elf使用less語法構建，不一樣的功能獨立爲不一樣的.less文件，方便個性化定製。

瀏覽器支持

（基於兼容性最低的object-fit屬性）

參與開發

對elf有疑問或建議的朋友能夠直接提issues，同時更加歡迎你們提交PR，elf期待你們的參與！

許可

MIT

Copyright © 2016 Jrain Lau

後記

elf是我第二個比較成熟的做品（上一個是Markcook）。開發的緣由是有時候想要快速搭建一些響應式的頁面，可是發現當今有許多css框架都比較大且比較複雜，須要層層嵌套才能生效，每每須要寫一大堆的東西。因而乎，爲何不本身寫一個呢？雖說沒有必要重複造輪子，可是爲了之後寫代碼能夠好好地偷懶，本身造一個輪子給本身用也是很方便的哈哈哈。

首先是命名。elf有「小精靈」、「淘氣鬼」的意思，正好符合這個框架輕巧、靈活的特色，並且基於flexbox特性的elf也像擁有小精靈的魔法通常。真的好喜歡這個名字~

其次是logo。一個好的Logo對於品牌來講實在過重要了！花了一天時間設計修改了elf的logo，找素材，修改，繼續找素材，修改，修改……在個人腦海中，elf是一個梳着火龍果髮型（什麼鬼）的小精靈，因此就真的給了他一個火龍果般的髮型，特別能打的樣子，但願可以區別於通常的奶油小精靈。

關於源碼，參考了一系列的主流框架，好比bootstrap，purecss，foundation等等。給我最大啓發的是一個叫作kube的框架，真的很欣賞它簡潔思路，elf有部分特性也是繼承自kube。

elf並不是一個大而全的框架，它只提供了基本的佈局方式以及修改了部分默認樣式。個性化定製是elf所推崇的作法，而它的設計思路也是在必定的條件下才能產生效果，避免產生全局污染，方便與其餘框架和樣式配合工做。

elf仍然稚嫩，也不排除會有隱藏的坑，可是她將持續維護，歡迎各位大神提出意見，幫助elf成長。

謝謝你們~