人心向背回看第一期,预处理器

CSS 热点回看第一期

2013/12/30 · CSS ·
CSS

本文由 伯乐在线 –
黄余粮
翻译。未经许可,禁止转载!
英文出处:css-weekly。欢迎参加翻译组。

CSS的热门回看涉及的始末包含:最新推荐阅读的文章、业界的动态、最新推荐的工具和种种创意。即便每一期恐怕截然不一致,但大体是其一社团。若是你也在跟进CSS那块的技艺,欢迎投递分享CSS技术文章与谍报到那里,可能投入我们的
前端开发
小组,同大家共同翻译与传播优质的始末。

本文由 伯乐在线 –
riverphoenix
翻译。未经许可,禁止转发!
英文出处:Jason
Weathersby。欢迎加入翻译组。

  Myth 是一个预处理器,有点类似于 CSS
polyfill 。Myth 让你写纯粹的 CSS,同时还让您可以应用类似 LESS 和 Sass
的工具。您还能选拔变量和数学函数,就像是你在别的预处理器中行使的同样。 

作者:wuhen147
原文地址:
http://www.oschina.net/news/69788/2015-opensource-frontend-framework-top20

引进阅读

《用Chrome
DevTools来为你的网站提速》

Addy Osmani 通过那篇小说讲述了何等拔取Chrome
DevTools来让您的网站更通畅。

《始建一个简单易行的响应式HTML邮件》

在这篇教程中,尼科尔e Merlin
显示了什么样创设一个概括的响应式HTML邮件,并且保障可以在各个邮件客户端(包罗手机邮件客户端和App)上科学彰显。其格局就是运用最小的Media
query和不稳定宽度的方式,尽只怕地确保兼容性。

导读:在那个体系小说的首先篇,我们主要关切火狐浏览器中开发工具的特点和大家今后的行使景况。那篇小说的重大目的是向你显得工具提供的种种只怕特点、进程和我们的要求。

你只怕感兴趣的相干小说

二零一五年曾经谢世了,作为一个前端开发者,我以为有必不可少把过去一年匡助过自家或朋友们的可以开源前端框架做个盘点,希望这几个项目可以越来越好,协助到越来越多的前端开发者们。

小说与学科

《通过Emmet来为你的CSS开发提速》

Josh Medeski
在这篇小说中享受了有的通过Emmet来协理您更便捷地写CSS的技能。

《响应式相册》

特里 Mun
写的一篇教程,介绍了什么支付一个用来突显相册的Wordpress插件。显示照片的效应很好,请参见那个Demo。

《BEM,多修饰符,尝试选用性质选用器》

Tommy Marshall
在这篇小说中探索了一种让你的前端代码保持 DRY 的新章程。但是,这种艺术也有七个缺陷,参见小编的牵线和小说的评介。

《Firefox 29支持CSS变量》

Firefox 29
起先帮助CSS变量了,大概叫做自定义属性。你可以定义CSS变量,然后在体制中引用它们。

《Sasstraction》

CSS变量应该继续交给预处理器(例如:Saas, LESS),依然浏览器?

《什么样解决在谷歌(Google)Chrome下的奴颜婢膝的书体渲染难题》

Christian Lavie
突显了什么样优雅地解决WebFonts的渲染难点。那种方案的绝无仅有不足之处就是你只可以本人保留字体相关的文书。

Firefox4见证了Web控制台那几个新的开发工具的出世。自这时起,大家不住地在那么些开发工具中增添越来越多的效应,那使得web控制台在周边地表达着职能,同时在Firefox桌面、Firefox
OS和Firefox for Android的调试和剖析起着不可代替的法力。

  • Web 前端开发精华文章援引【系列十二】
  • 选料12款不错 jQuery Ajax 分页插件和课程
  • 10大流行的 Metro UI 风格 Bootstrap 宗旨
  • 8款效果甚佳的 jQuery 加载动画和进程条插件
  • 推介35款迷你的 CSS3 和 HTML5 网页模板

此榜单依照github上star数作为名次依据,一个人能力有限,即使收集有遗漏欢迎补充。

工具

《人心向背回看第一期,预处理器。Myth》

Myth
是一个CSS预处理器。通过它,你能够小心于写纯CSS代码,而无需担心浏览器的版本(不协助新特色)。

《Unison.js –
在CSS、JS和HTML中联合断点》

Unison.js是一个插件,它同意你在一个地点定义断点,然后自行同步到JS、CSS和HTML中。

赞 收藏
评论

亚洲必赢官网 1

  

1、名称:Bootstrap

类别/语言:HTML、CSS、JavaScript
创建者: Twitter
人气:在Github上有91007 stars
叙述:主流框架中不用置疑的丰富,Bootstrap 是根据 HTML、CSS、JavaScript
的,它简洁利落,使得 Web 开发尤其高效。
核心概念/原则: RWD 和活动优先制。
浏览器扶助: Firefox, Chrome, Safari, IE8+ (你要求 Respond.js for IE8)
响应式:Yes
亚洲必赢官网 ,模块化:Yes
官网地址:http://getbootstrap.com/
Github地址:https://github.com/twbs/bootstrap

有关小编:黄余粮

亚洲必赢官网 2

伯乐在线发起人。热爱技术和产品,崇尚极客文化。
个人主页 ·
我的小说 ·
13 ·
 

亚洲必赢官网 3

在那一个种类小说的第一篇,大家将观测于自Firefox
4浏览器以来便有的开发工具。每一种工具大家将用一个概括的显示屏截图来开展介绍,同时为了让读者可以越来越多地打听相应的工具,大家将显得一些别的的截图来同盟讲解特定的流水线形式。这几个图片包涵基于实际采取的无绳电话机开发、警告和CSS调试等显示屏截图。

 

2、名称:html5-boilerplate

类别/语言:HTML、CSS、JavaScript
创建者:Paul Irish
人气:在Github上有32,349 stars
讲述:HTML5 Boilerplate 帮您营造 急忙, 健壮, 并且 适应力强 的web
app或网站。
基本概念/原则:响应式
浏览器接济:Firefox, Chrome, Safari, IE8+,Edge,Opera
预处理器:None
响应式:Yes
模块化:Yes
官网地址:https://html5boilerplate.com/
Github地址:https://github.com/h5bp/html5-boilerplate

在第一篇小说大家介绍的是Web Console 和 Javascript Debugger。

您只怕感兴趣的连带作品

3、名称:Meteor

类别/语言:HTML、CSS、JavaScript
创建者:immir
人气:在Github上有31,092 stars
叙述:Meteor是新一代的开支即时web应用的开源框架,它能辅助你在至少的年华内到位开发。
中心概念/原则:响应式
预处理器: Less
响应式: Yes
模块化:Yes
官网地址:https://www.meteor.com
Github地址:https://github.com/meteor/meteor/

Web Console

  • 10款流行流行的 jQuery 插件,值得你珍藏
  • 令人开心的精良 Web 应用程序图标素材
  • 赞!10套精美的免费网站后台管理种类模板
  • 这么些无不侧目的的国外创意404谬误页面设计
  • 经典设计:17个最可行的学习着陆页设计的事例

4、名称:Semantic UI

类别/语言:HTML、CSS、JavaScript
创建者: Jack Lukic
人气:在Github上有22,325 stars
叙述: “基于自然语言有效规范的UI组件框架”
着力概念/原则:语义,标签的争论性、响应式
浏览器辅助:Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix
only), Android 4, Blackberry 10。
预处理器: Less
响应式:Yes
模块化:Yes
官网地址:http://semantic-ui.com/
Github地址:https://github.com/Semantic-Org/Semantic-UI

Web
Console主要用于体现与当前加载网页相关的新闻。那一个音讯包蕴HTML、CSS、JavaScript、安全警示(Security
warnings)和错误音讯,其它互联网请求(network requests)会被出示出来,Web
Console 还会显得那个请求成功与否。当Web Console
探测出网页中的错误和警示时,它会付给指向引起错误的代码的链接。平日境况下,Web
Console 是调剂Web应用程序的率先站。

 

5、名称:Foundation

类别/语言:HTML、CSS、JavaScript
创小编: ZURB人气:在Github上有22,206+ stars描述:
“世界上最了不起的响应式前端框架”
宗旨概念/原则:RWD 、手机优先、语义的
浏览器接济: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone
7+
预处理器: Sass
响应式: Yes
模块化:Yes
官网地址:http://foundation.zurb.com/
Github地址:https://github.com/zurb/foundation-sites

亚洲必赢官网 4

正文链接:Myth – 辅助变量和数学方法的 CSS 预处理器

6、名称:Materialize

类别/语言:CSS
创建者:Google
人气:在Github上有15,288stars
讲述:Materialize是一个个依据材料设计的一个现代化的响应式前端框架。他们做了最繁重的做事,为你提供专断认同的体制,结合了你的自定义组件。其余,他们还改革动画和对接,为开发人士提供流畅的体验。
主导概念/原则:响应式
浏览器辅助:Chrome 35+, Firefox 31+, Safari 7+, IE 10+
预处理器:Sass
响应式:Yes
模块化:Yes
官网地址:http://materializecss.com
Github地址:https://github.com/Dogfalo/materialize

Web Console
允许开发者在网页中执行JavaScript代码。这象征开发者可以在网页范围内定义类然后执行实例化后的类措施,并且可以经过CSS选拔器来访问特定成分。

编译来源:梦想天空 ◆ 关怀前端开发技术 ◆ 分享网页设计资源

7、名称:Pure

类别/语言:CSS
创建者: Yahoo
人气: 在Github上有13,161 stars
讲述: “您可以在每个web项目中使用的一组小的和响应式的CSS模块”
大旨概念/原则:SMACSS,极简的.
浏览器支持:Firefox的新颖版本, Chrome, Safari; IE7+; iOS 6.x, 7.x;
Android 4.x
预处理器:None
响应式: Yes
模块化: Yes
官网地址:http://purecss.io/
Github地址:https://github.com/yahoo/pure

视频简介:

CSS polyfill
。Myth 让您写纯粹的 CSS,同时还让您可以动用类似 LESS 和 Sass
的工具。您仍是可以接纳变量和数…

8、名称:Vue

类别/语言:CSS、JavaScript
创建者:尤雨溪
人气:在Github上有12,214 stars
叙述:Vue.js 是用于营造交互式的 Web 界面的库。它提供了 MVVM
数据绑定和一个可结合的机件系统,具有简易、灵活的 API。
着力概念/原则:响应式
浏览器协理:Firefox, Chrome, Safari, IE10+,Android 4.2+,iOS 7+
预处理器:None
响应式:Yes
模块化:Yes
官网地址:http://vuejs.org/
Github地址:https://github.com/vuejs/vue

经过翻看 MDN Web
Console  的文档可以拿走越多地音信。

9、名称:Skeleton

类别/语言:CSS、JavaScript
创建者:Dave Gamache
人气:在Github上有10,622stars
叙述:Skeleton 是一个小的 JS 和 CSS
文件的汇集,可帮您神速支付杰出的网站,适合各个显示器设备包罗手机。Skeleton
基于 960 grid 开发。它是一个 UI 框架。
核心概念/原则:响应式
浏览器接济:Firefox, Chrome, Safari, IE10+,Opera
预处理器:None
响应式:Yes
模块化:Yes
官网地址:http://www.getskeleton.com
Github地址:https://github.com/dhg/Skeleton

 

10.名称: Amaze UI

类别/语言:HTML、CSS、JavaScript
创建者:云适配
最终更新时间:二〇一五年15月
人气:在Github上有6425 stars
讲述:国内第四个开源HTML5跨屏前端框架,普通话排版协理更优、本土化组件丰盛。
并在二零一五年3月推出基于 React.js 的专属运动端 Web 组件库Amaze UI
touch。
基本概念/原则:组件化、移动优先、轻量级、高质量。
浏览器帮衬: Firefox, Chrome, Safari, IE8+
响应式: Yes
模块化:Yes
官网地址:http://amazeui.org/
Github地址:https://github.com/amazeui/amazeui

JavaScripter Debugger JS 调试器

11、名称:UIkit

类别/语言:HTML、CSS、JavaScript
创建者:YOOtheme
人气:在Github上有6,050+ stars
叙述:
“一个轻量级的和模块化的前端框架,用于急迅支付和功效强大的web接口。”
中央概念/原则:RWD, 手机优先.
浏览器襄助: Chrome, Firefox, Safari, IE9+
预处理器:Less, Sass
响应式: Yes
模块化: Yes
官网地址:http://getuikit.com/
Github地址:https://github.com/uikit/uikit

JavaScripter Debugger 用于调试和省略Web 应用程序中网页部分的JavaScript
代码。这些调试工具得以在Firefox OS 、Firefox for Android 和 Firefox
Desktop
两种环境下行使来对代码进行调剂。它是个成效齐全的调节工具,包涵了如观望表明式、局地变量变化、设置断点、条件表达式、跳过、再次来到和履行到最终等职能。其它开发者可以在网页加载进度中间断应用程序,改变变量数据来考察执行效果。

12、名称:Yui

类别/语言:CSS、JavaScript
创建者:Yahoo
人气:在Github上有3,200+ stars
描述:Yahoo! UI Library (YUI) 是一个盛开源代码的 JavaScript
函数库,为了能创建一个高互动的网页,它使用了AJAX, DHTML 和 DOM
等程式码技术。它也包括了成百上千 CSS 资源。使用授权为 BSD许可证
中央概念/原则:响应式
浏览器协理:Firefox, Chrome, Safari, IE10+,Opera
预处理器: None
响应式:Yes
模块化:Yes
官网地址:http://yuilibrary.com/
Github地址:https://github.com/yui/yui3

亚洲必赢官网 5

13.名称:kissy

类别/语言: JavaScript
创小编:Taobao前端
最后更新时间:二零一五年十一月
人气:在Github上有2035 stars
叙述:KISSY 是一款跨终端、模块化、高品质、使用简单的 JavaScript 框架。
框架大小: 37 KB
主干概念/原则: 模块化,跨终端,高增添性
模块化:Yes
官网地址:http://docs.kissyui.com/
Github地址:https://github.com/kissyteam/kissy/

 

14.名称:MUI

类别/语言: HTML、CSS、JavaScript
创建者:Dclould
说到底更新时间:二〇一六年五月
人气:在Github上有2012 stars
叙述:MUI-最接近原生App体验的前端框架框架。
主旨概念/原则: 多端揭橥、高品质
响应式:NO
模块化: Yes
官网地址:http://dev.dcloud.net.cn/mui/
Github地址:https://github.com/dcloudio/mui

JS
调试器介绍视频:https://www.youtube.com/watch?v=sK8KU8oiF8s 

15.名称:Arale

类别/语言: JavaScript
创小编:支付宝前端
最后更新时间:二零一五年5月
人气:在Github上有1252 stars
描述:Arale
是一个绽放、简单、易用的前端基础类库。
框架大小:未知
主导概念/原则: 开放、不难、易用
浏览器协理:Firefox, Chrome, Safari, IE6+
响应式:Yes
模块化:Yes
官网地址:http://aralejs.org/
Github地址:https://github.com/aralejs/aralejs.org/

想要理解愈多关于JavaScript Debugger的新闻,可以通过查看 MDN
Debugger 的文档来获取音讯。

16.名称:JX

类别/语言:Javascript
主创者:腾讯前端
末段更新时间:二〇一五年1二月
人气:在Github上有952 stars
叙述:JX
是模块化的非侵入式Web前端框架,尤其吻合营造和团队广大、工业级的Web
App。
框架大小:未知
中央概念/原则:保持最优执行效能
浏览器援救: 包容主流浏览器
模块化: Yes
官网地址:http://alloyteam.github.io/JX/
Github地址:https://github.com/AlloyTeam/JX

 

17.名称:GMU

类别/语言:HTML、CSS、JavaScript
创小编:百度前端
末段更新时间:二零一五年1十二月
人气:在Github上有940stars
讲述:GMU是基于zepto的mobile
UI组件库,提供webapp、pad端简单易用的UI组件! Web App。
骨干概念/原则:简单易用、轻量级
模块化:Yes
官网地址:http://gmu.baidu.com/
Github地址:https://github.com/fex-team/GMU

叩问越多

18.名称:ZUI

类别/语言: HTML、CSS、JavaScript
创建者:蝉道
最终更新时间:二零一五年八月
人气:在Github上有616 stars
讲述:开源HTML5前端框架
着力概念/原则:简单易用、轻量级、易于定制
浏览器帮忙:未知
官网地址:http://zui.sexy/
Github地址:https://github.com/easysoft/zui

位置的这个情节让咱们快捷的问询了一晃这一个工具的部分个性,若是想清楚这么些开发工具的万事特色,请点击查阅MDN工具文档。

19.名称:Clouda Touch.js

类别/语言:JavaScript
创建者:百度云
人气:在Github上有387 stars
叙述:Touch.js是移动装备上的手势识别与事件库,也是在百度之中普遍利用的付出。
主题概念/原则:无入侵设计、比美原生的相互、极简的API
模块化:Yes
官网地址:http://touch.code.baidu.com/
Github地址:https://github.com/Clouda-team/touch.code.baidu.com

尽请期待

20.名称:Arkui

类别/语言:HTML、CSS、JavaScript
创建者:豆瓣
人气:在Github上有129 stars
模块化: Yes
官网地址:http://mockee.com/arkui/
Github地址:https://github.com/mockee/arkui

在下一篇的多如牛毛小说中大家将长远讲解样式编辑器(Style
Editor)和便签(Scratchpad)。请在下边的评价中提交您的反映,让大家了解到哪方面的表征是你要求了然的。

赞 收藏 2
评论

关于小编:riverphoenix

亚洲必赢官网 6

(腾讯网今日头条:@邢毅勋)
个人主页 ·
我的篇章

网站地图xml地图