Written in 2016.05.03

Jrainlau.github. IO/ELF/project address: github.com/jrainlau/el…

introduce

Elf, named “Elf”, is a clean, lightweight, responsive CSS framework. Based on flexbox, it aims to quickly build responsive layouts that can accommodate devices of different sizes.

use

The installation

npm install elf-css

Elf is a pure CSS framework, and the first thing you need to do is introduce elf. CSS in your page:

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

Then add a class name called. Elf to the parent container:

<main class="elf">... </main>Copy the code

The characteristics of

  • clean

Since all OF ELF’s features are available only in containers with the class name. Elf, ELF can work with different CSS frameworks to avoid global style contamination.

  • lightweight

The complete elf. CSS file is only about 30KB in size and will be even smaller when compressed. The compact size means simple syntax that takes only 3 minutes to get started, making it suitable for rapid development.

  • Friendly support for personalized customization

Elf is built with less syntax, and different functions are separated into different. Less files for easy customization.

Browser support

Participate in the development

If you have any questions or suggestions about ELF, please directly address issues and submit PR. Elf is looking forward to your participation!

The license

MIT

Copyright © 2016 Jrain Lau

Afterword.

Elf is my second more mature work (the last one was Markcook). The reason for development is that sometimes you want to quickly build responsive pages, but find that many CSS frameworks today are large and complex, requiring layers of nesting to work, often requiring a lot of writing. So why not write your own? There is no need to duplicate the wheel, but it is also very convenient to build a wheel for your own use in order to write code in the future.

The first is naming. Elf fits the framework’s lightweight, flexible nature, and elf based on the Flexbox feature is like having elf magic. I really like this name

Then there is the logo. A good Logo is so important for a brand! Spent a whole day designing and modifying the ELF logo, looking for materials, modifying, modifying, modifying… In my mind elf was an elf with a pitaya hairdo, so I gave him a pitaya hairdo to distinguish him from cream elves.

For the source code, I refer to a series of mainstream frameworks, such as Bootstrap, Purecss, Foundation and so on. One of the things that inspired me the most was a framework called Kube. I really appreciate its simplicity, and some of elf’s features are also inherited from Kube.

Elf is not a comprehensive framework; it only provides basic layouts and changes to some of the default styles. Elf believes in customization, and it is designed to work under certain conditions, avoiding global contamination and working with other frameworks and styles.

Elf is still young, and there will be hidden pits, but it will continue to be maintained, and we welcome your suggestions to help Elf grow.

Thank you.