Elf, flexbox-based Responsive CSS Framework

  css3, flexbox, html5, Responsive layout


Official website address:http://jrainlau.github.io/elf/
Project address:https://github.com/jrainlau/elf


Elf named “elf” is a clean and lightweight responsive CSS framework. Based on flexbox, she aims to quickly build a responsive layout that can adapt to devices of different sizes.



npm install elf-css

Elf is a pure css framework that needs to be introduced into the page first.elf.css

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

And then add a name called.elfClass name of to parent container:

<main class="elf">


  • Clean

    Since all elf features can only be used in class named.elfAs a result, elf can work with different css frameworks to avoid global style pollution.

  • light weight

    Completeelf.cssThe file is only about 30kb in size, and the compressed volume will be smaller. Small size means simple grammar, which takes only 3 minutes to get started and is suitable for rapid development.

  • Friendly Support for Personalized Customization

    Elf usagelessGrammatical construction, different functions are independent of each other..lessFile, convenient personalized customization.

Browser support

(based on the least compatible object-fit attribute)

Participate in development

Friends who have questions or suggestions about elf can directly ask questions, and they are more welcome to submit PR. elf looks forward to your participation!



Copyright © 2016 Jrain Lau


Elf is my second mature work (the last one isMarkcook)。 The reason for development is that sometimes you want to quickly build some responsive pages. However, it is found that many css frameworks are relatively large and complex, and need to be nested layer by layer in order to be effective. It is often necessary to write a lot of things. As a result, why not write one yourself? Although it is not necessary to build wheels repeatedly, it is also very convenient to build wheels for your own use in order to be lazy in writing code in the future.

The first is naming. Elf has the meaning of “elf” and “naughty”, which is just in line with the light and flexible features of this framework, and ELF based on flexbox features is also like magic with elf. I really like this name ~

The second is logo. A good Logo is too important for a brand! It took me a day to design and modify the logo of elf, looking for materials, modifying, continuing to look for materials, modifying, modifying … in my mind, elf is a sprite with dragon fruit hair style (what the hell), so I really gave him a dragon fruit hair style, especially the appearance of playing, hoping to be different from ordinary cream sprite.

Regarding the source code, reference is made to a series of mainstream frameworks, such asbootstrap,purecss,foundationWait. What inspired me the most was one calledkubeThe framework of elf, really appreciate its concise thinking, ELF has some characteristics also inherited fromkube.

Elf is not a large and complete framework. It only provides basic layout and modifies some default styles. Personalized customization is a highly recommended practice of elf, and its design idea can produce effects only under certain conditions, avoiding global pollution and facilitating cooperation with other frameworks and styles.

Elf is still young and does not rule out hidden pits. However, she will continue to maintain it. All great gods are welcome to put forward their opinions to help elf grow.

Thank you all ~