elf,基于flexbox的响应式CSS框架

栏目: CSS · 发布时间: 5年前

内容简介:取名为“精灵”的elf,是一个干净,轻巧的响应式CSS框架。她基于flexbox,旨在快速搭建能够适配不同尺寸设备的响应式布局。安装

取名为“精灵”的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 文件,方便个性化定制。

浏览器支持

elf,基于flexbox的响应式CSS框架

(基于兼容性最低的object-fit属性)

参与开发

对elf有疑问或建议的朋友可以直接提issues,同时更加欢迎大家提交PR,elf期待大家的参与!

许可

MIT

Copyright © 2016 Jrain Lau

后记

elf是我第二个比较成熟的作品(上一个是Markcook)。开发的原因是有时候想要快速搭建一些响应式的页面,但是发现当今有许多css框架都比较大且比较复杂,需要层层嵌套才能生效,往往需要写一大堆的东西。于是乎,为什么不自己写一个呢?虽然说没有必要重复造轮子,但是为了以后写代码可以好好地偷懒,自己造一个轮子给自己用也是很方便的哈哈哈。

首先是命名。elf有“小精灵”、“淘气鬼”的意思,正好符合这个框架轻巧、灵活的特点,而且基于flexbox特性的elf也像拥有小精灵的魔法一般。真的好喜欢这个名字~

其次是logo。一个好的Logo对于品牌来说实在太重要了!花了一天时间设计修改了elf的logo,找素材,修改,继续找素材,修改,修改……在我的脑海中,elf是一个梳着火龙果发型(什么鬼)的小精灵,所以就真的给了他一个火龙果般的发型,特别能打的样子,希望能够区别于一般的奶油小精灵。

关于源码,参考了一系列的主流框架,比如 bootstrappurecssfoundation 等等。给我最大启发的是一个叫做 kube 的框架,真的很欣赏它简洁思路,elf有部分特性也是继承自kube。

elf并非一个大而全的框架,它只提供了基本的布局方式以及修改了部分默认样式。个性化定制是elf所推崇的做法,而它的设计思路也是在一定的条件下才能产生效果,避免产生全局污染,方便与其他框架和样式配合工作。

elf仍然稚嫩,也不排除会有隐藏的坑,但是她将持续维护,欢迎各位大神提出意见,帮助elf成长。

谢谢大家~


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Getting Real

Getting Real

Jason Fried、Heinemeier David Hansson、Matthew Linderman / 37signals / 2009-11-18 / USD 24.99

Getting Real details the business, design, programming, and marketing principles of 37signals. The book is packed with keep-it-simple insights, contrarian points of view, and unconventional approaches......一起来看看 《Getting Real》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具