看好回看第3期,扶助变量和数学函数的

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来让你的网站更通畅。

看好回看第3期,扶助变量和数学函数的。《创设2个简便的响应式HTML邮件》

在那篇教程中,尼Colee Merlin
体现了什么创造壹个简单的响应式HTML邮件,并且保险能够在每三个邮件客户端(包罗手机邮件客户端和App)上正确突显。其方法就是使用最小的Media
query和不稳定宽度的措施,尽恐怕地确保包容性。

导读:在那一个体系小说的第贰,篇,大家首要关注火狐浏览器中开发工具的特点和我们后天的行使境况。这篇文章的重中之重目的是向您出示工具提供的各样可能特点、进程和大家的须要。

您恐怕感兴趣的连带小说

二〇一六年早已病逝了,作为二个前端开发者,小编以为有必不可少把过去一年接济过自家或朋友们的特出开源前端框架做个盘点,希望那个序列可以越来越好,辅助到越来越多的前端开发者们。

小说与学科

《经过Emmet来为您的CSS开发提速》

乔希 Medeski
在那篇文章中分享了部分经过Emmet来增援您更便捷地写CSS的技艺。

《响应式相册》

特里 Mun
写的一篇教程,介绍了哪些开发3个用来突显相册的Wordpress插件。体现照片的功力很好,请参见那几个Demo。

《BEM,多修饰符,尝试运用性质拔取器》

汤姆my 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数作为名次依照,1位能力有限,如若收集有遗漏欢迎补充。

工具

《Myth》

Myth
是一个CSS预处理器。通过它,你可以小心于写纯CSS代码,而不要担心浏览器的版本(不帮忙新特色)。

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

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

赞 收藏
评论

澳门葡京 1

  

1、名称:Bootstrap

类别/语言:HTML、CSS、JavaScript
创建者: Twitter
人气:在Github上有91007 stars
叙述:主流框架中不要置疑的不行,Bootstrap 是根据 HTML、CSS、JavaScript
的,它简洁利落,使得 Web 开发越发迅速。
主导概念/原则: 昂科威WD 和运动优先制。
浏览器辅助: Firefox, Chrome, Safari, IE8+ (你必要 Respond.js for IE8)
响应式:Yes
模块化:Yes
官网地址:http://getbootstrap.com/
Github地址:https://github.com/twbs/bootstrap

有关小编:黄余粮

澳门葡京 2

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

澳门葡京 3

在那么些体系小说的首先篇,大家将考察于自Firefox
4浏览器以来便有的开发工具。每3个工具我们将用三个简短的显示屏截图来开展介绍,同时为了让读者可以愈多地询问相应的工具,大家将显得一些别样的截图来同盟讲解特定的流程方式。那么些图片包含基于实际使用的手机支付、警告和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谬误页面设计
  • 经典设计:1七个最可行的上学着陆页设计的事例

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描述:
“世界上最特出的响应式前端框架”
主导概念/原则:中华VWD 、手机优先、语义的
浏览器援助: 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
创建者:云适配
末了更新时间:二零一六年10月
人气:在Github上有6425 stars
讲述:国内首个开源HTML5跨屏前端框架,中文排版襄助更优、本土化组件丰硕。
并在二〇一四年五月生产基于 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
讲述:
“3个轻量级的和模块化的前端框架,用于火速支付和作用强大的web接口。”
宗旨概念/原则:LANDWD, 手机优先.
浏览器援助: 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) 是1个开花源代码的 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
主创者:Tmall前端
最后更新时间:二零一六年九月
人气:在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
主创者:支付宝前端
最终更新时间:二〇一六年3月
人气:在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
主创者:腾讯前端
末段更新时间:二零一四年3月
人气:在Github上有952 stars
讲述:JX
是模块化的非侵入式Web前端框架,尤其符合构建和团队周边、工业级的Web
App。
框架大小:未知
大旨概念/原则:保持最优执行成效
浏览器帮助: 包容主流浏览器
模块化: Yes
官网地址:http://alloyteam.github.io/JX/
Github地址:https://github.com/AlloyTeam/JX

 

17.名称:GMU

类别/语言:HTML、CSS、JavaScript
创小编:百度前端
最后更新时间:2015年二月
人气:在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

(天涯论坛和讯:@邢毅勋)
个人主页 ·
作者的小说

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website