寫於 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成長。

謝謝大家~