这些前端工具与素材功能各不相同,在这里分享

Twitter

值得关注的活跃用户

  • CSS Animation
  • Andrey Sitnik – @Autoprefixer, 和 @PostCSS 的作者
  • Evangelina Ferreira – web设计师,@multimedial_utn 的教授,HTML5 & CSS狂热爱好者,业余翻译者。
  • Sara Soueidan – @Codrops CSS Reference的作者,Smashing Book #5的合著者。
  • Hugo Giraudel – @edenspiekermann 的 CSS 怪才以及 Sass 黑客
  • Guy Routledge – 前端开发者、@GA_London 的教师, 的视频作者,宅男,吃货。
  • Heydon Pickering – 爱吃大米,同时也是一个UX设计师,作者,@smashingmag 编辑以及程序员。
  • Adam Morse – 开源的粉丝和支持者
  • Donovan Hutchinson – 设计师、开发者、作家。偶尔在
  • CSS Commits – 最近忙于 CSSWG 的公共 Mercurial 库
  • Scott Jehl – responsiblerwd 的作者,现在 abookapart上 面在打折
  • Dudley Storey – Web开发者、作者、老师以及演说者。
  • Zoe M. Gillenwater – Web设计师、开发者,专注于CSS、RWD、UX以及无障碍开发。
  • Ben Briggs – 主要研究node.js、javascript、开源模块、客户端优化、web性能相关。
  • Paul Lewis – 将代码与设计联系起来的谷歌员工。
  • Thierry Koblentz – Yahoo 的 CSS 开发者
  • Nicolas Gallagher – Twitter的软件工程师
  • Harry Roberts– @google, @Etsy, @kickstarter, @BBC, @Deloitte, @FT等的前端设计顾问
  • Phil Walton -谷歌工程师、开源拥护者、开发者、设计师、写手。
  • Lea Verou – MIT_CSAIL, @CSSWG IE, @OReillyMedia作者的研究助理,前W3C员工
  • Manoela Ilic – CSS和HTML是我的画笔,我对认知科学、AI、HCI、UI设计以及天体物理学很感兴趣,数码控。
  • Una Kravets – BMDesign以及Sassvocate的前端工程师,团队建设者以及手工艺者。座右铭:所有东西都应该开源!
  • Chris Coyier – CodePen的设计师,Real_CSS_Tricks作者
  • Nicole Sullivan – 极客!
  • Eric Bidelman – 谷歌的工程师,参与项目有Chrome、web组件、Polymer
  • Patrick Hamann – 热爱爬山、啤酒以及美食。
  • Dave McFarland – Web开发者,《CSS: The Missing Manual》和《JavaScript & jQuery:  The Missing Manual》的作者,
  • L. David Baron – Mozilla开发者,CSS以及W3C标准的「外交官」。
  • Daniel Glazman – W3C的CSS工作团队联合主席,企业家,软件工程师,极客,两个孩子的爸爸,通晓多国语言,喜欢鸭子。
  • The Chris Eppstein – 爱恨分明,家庭美满,写代码,主导 LinkedIn 的样式。
  • Natalie Weizenbaum – 女程序员,SassCSS 的主设计师和开发者,在谷歌做 Dart 语言相关工作。
  • Brad Frost – Web设计师、演讲者、写手、顾问、音乐家。
  • Maxime Thirouin – 前端工程师,自由职业者,UI/UX开发者。
  • Mark Otto – 在GitHub和Bootstrap工作,曾就职于Twitter,超级书呆子。
  • Simon – UI设计师,CSS开发者
  • Connor Sears – GitHub设计师
  • Remy Sharp – 他的推都是关于CSS尺寸单元的
  • Jonathan Snook – 设计师、开发者、写手、演讲者。我在网上做些东西,我写的SMACSS。

原文链接

前端框架

  • Bootstrap:著名的快速开发响应式 Web 应用程序的前端工具包。
  • Foundation:一个易用、强大而且灵活的前端框架,用于构建基于任何设备上的 Web 应用。
  • Semantic UI:全语义化的前端界面开发框架。
  • uikit:一款轻量级开源的前端框架。

Lazy Image 是一个用来按要求加载图片的自定义 HTML 元素,这个自定义元素在元素对象中提供了一个附加的 .active 对象,可以在任何需要的事件或者用户交互中触发它。

1、Bootstrap – 最流行的Web前端UI框架

Bootstrap是由twitter推出的Web前端UI框架,它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。它使用了最新的浏览器技术,Bootstrap提供了时尚的排版样式,表单,buttons,表格,网格系统等等。

 

官方网站:

CSS标准化

  • Normalize – 一套提供较好的多浏览器默认样式一致性的CSS规范
  • Normalize-OpenType – 为Normalize.css添加了OpenType特性,如连字、字间距等等。
  • Reset – 一套CSS标准,将全部的HTML元素调整到一致的基准线
  • sanitize.css – 一套可立即使用的,符合当今最优实践的CSS规范。

掌握前端框架Bootstrap的使用

Web 开发者社区

  • Stack Overflow:有超过 470 万的活跃开发者在其中互相帮助。
  • Hashnode:全球性的开发者社区,大牛很多。
  • Refind:面向创业者、开发者、设计师的 Web 项目分享社区。
  • Google+ Web Developers Group:Web 开发者的 Google+ 社区。
  • Facebook WordPress Front-end Developers Group:WordPress 的前端工程师 Facebook 小组,讨论开发问题、技术趋势。
  • LinkedIn Web Design and Development Professionals Group:领英上的专业 Web 从业者小组。
  • LinkedIn PHP Developer Group:领英上的 PHP 开发者小组。
  • Sitepoint Forums:Web 开发者论坛。
  • /r/perfmatters:Reddit 上主要讨论网站性能优化的 subreddit,由 KeyCDN 发起。
  • /r/webdev:Reddit 上讨论 Web 开发的 subreddit。

Sizzy 是一款用来测试响应式网站的开发工具,它可以帮你在一块屏幕上测试多个屏幕尺寸下的显示效果。比起Chrome 内容之的移动端模拟器,Sizzy 要方便太多。值得一提的是,它也是Chrome 浏览器插件。

2、jQuery UI - 基于jQuery的开源Javascript框架

jQuery UI是一款基于jQuery的开源Javascript框架,jQuery UI框架主要提供了用户交互、动画、特效和可更换主题的可视控件,让开发者可以更方便地实现网页交互界面,jQuery UI的整个框架比较庞大,但你也可以根据自己需要使用的功能生成适合自己的框架底层。jQuery UI界面设计非常漂亮,值得一试。

图片 1

官方网站:

CSS 资源大全

2015/12/25 · CSS · 1 评论 · CSS

本文由 伯乐在线 - iLeo 翻译,艾凌风 校稿。未经许可,禁止转载!
英文出处:github.com。欢迎加入翻译组。

sotayamashita 发起维护的 CSS 资源大全,包括:预处理器、框架、CSS结构、代码风格指南、命名习惯、播客、演讲视频、大网站的 CSS 开发经验等等。

【特别提醒】:伯乐在线已在 GitHub 上发起 CSS 资源大全中文版的整理,链接:。欢迎扩散和参与。

  • 目录
    • 预处理器
    • 框架
    • CSS结构
    • CSS规范化
    • 大型网站的CSS开发
    • 代码风格指南
    • 样式指南
    • 命名习惯和方式
    • 参考
  • 在线资源
    • 播客
    • Twitter
    • 视频

适合人群

Icon 资源

  • Font Awesome
  • IconMonster
  • IconFinder
  • Fontello

在这里我还是要推荐下我自己建的web前端开发学习群:731669587,群里都是学web前端开发的,如果你正在学习前端 ,小编欢迎你加入,今天分享的这个案例已经上传到群文件,大家都是软件开发党,不定期分享干货(只有前端软件开发相关的),包括我自己整理的一份2018最新的前端进阶资料和高级开发教程,欢迎进阶中和进想深入前端的小伙伴。

5、Flat UI - 扁平风格 UI 工具包

Flat UI是一套精美的扁平风格 UI 工具包,基于 Twitter Bootstrap 实现。这套界面工具包含许多基本的和复杂的 UI 部件,例如按钮,输入框,组合按钮,复选框,单选按钮,标签,菜单,进度条和滑块,导航元素等等。

图片 2

官方网站:

2010

  1. Handcrafted CSS | 手写CSS: Dan Cederholm, Build Conference 44:29.
  2. The Top 5 Mistakes of Massive CSS | 大规模CSS中最容易出现的5个错误: Nicole Sullivan, Build Conference 37:53.

【特别提醒】:伯乐在线已在 GitHub 上发起 CSS 资源大全中文版的整理,链接:。欢迎扩散和参与。

3 赞 21 收藏 1 评论

课程目标

Code Sharing / Experimenting

  • codeshare:能和其他开发者实时共享代码。
  • JS Bin:可以将编辑后的代码保存到本地,或将 URL 地址发给其他人,让其协助调试代码。支持 HTML,CSS,JavaScript,Markdown,Jade 和 Sass。
  • JSfiddle:能自定义环境来测试你的 HTML,CSS,JavaScript 代码。
  • Dabblet:Web playground,交互效果不错。

图片 3

3、jQuery UI Bootstrap

它是jQuery UI和Bootstrap的集成,它是Bootstrap样式的,因此外观比较漂亮,同时它拥有jQuery UI的控件功能,这也方便开发者快速地创建一个网页控件。

图片 4

官方网站:

参考

  • 可扩展CSS阅读清单

国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。

Markdown 编辑器

  • StackEdit:一个开放源码免费使用的 MarkDown 编辑器, 基于 PageDown。
  • Dillinger:也是在线编辑器,提供云存储,并支持 HTML5,PDF 等多种导出格式。
  • Mou:Mac OS X 上一款出色的 Markdown 编辑器。
  • Texts:同时支持 Windows 和 Mac OS X。

图片 5

随着CSS3和HTML5的流行,我们的WEB页面不仅需要更人性化的设计理念,而且需要更酷的页面特效和用户体验。作为开发者,我们需要了解一些宝贵的CSS UI开源框架资源,它们可以帮助我们更快更好地实现一些现代化的界面,包括一些移动设备的网页界面风格设计。本文分享了10个顶级的CSS UI开源框架,有几个确实不错,一起来看看。

2013

  1. When Bootstrap Attacks | 当Bootstrap开始发力: Pamela Fox, CSSConf.US 28:48.
  2. CSS in the 4th Dimension | CSS是第四维: Lea Verou, JSConf.Asia 44:49.
  3. Automated CSS Testing | 自动化CSS测试: Jakob Mattsson, JSConf.Asia 42:07.
  4. CSSConf.EU Keynote | CSSConf.EU的基调: Nicole Sullivan, CSSConf.EU 20:57.
  5. CSS Application Architecture | CSS的应用架构: Nicolas Gallagher, SmashingConf 38:36.
  6. Realigning & Refactoring UI | UI的调整和重构: Jina Bolton, SassConf 48:08.
  7. Normalizing Designs for Better Quality CSS | 提高CSS质量的规范化设计: Harry Roberts, CSSConf.EU 43:40.
  8. Automating the Removal of Unused CSS | 自动清除无用的CSS: Addy Osmani, Velocity Europe Conference 5:57.
  9. The Humble Border-Radius | 低调的Border-Radius: Lea Verou, Future of Web Design 37:07.
  10. The Mind-blowing Power of Sass 3.3 | Sass那印象深刻的力量: Chris Eppstein, CSSConf.EU 38:54.
  11. Front-End Tools for the Young Developer | 年轻开发者的前端工具: Christian Vuerings, SF HTML5 User Group 14:16.
  12. Maths-Powered Transforms for Creating 3D Shapes | Maths-创建3D图形的强力转换器: Ana-Maria Tudor, CSSConf.EU 30:27.
  13. Sass and OOCSS Sitting in a Tree K-I-S-S-I-N-G | Sass和面向对象CSS完美搭配: Nicole Sullivan, TXJS 27:50.
  14. CSS Levels Up | 提升CSS等级: Angelina Fabbro, CSSConf.EU 31:38.
  15. Architecting Scalable CSS | 搭建可扩展的CSS: Harry Roberts, Beyond Tellerand 41:57.
  16. More CSS Secrets: Another 10 Things You May Not Know about CSS | 更多的CSS秘密:CSS不为人知的另外10件事: Lea Verou, W3Conf 60:39.
  17. Atomic Cascading Style Sheets: Renato Iwashima, HTML5DevConf 52:33.

它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。

网站性能测试

  • Website Speed Test:KeyCDN 提供的免费网站调试工具。
  • Google PageSpeed Insights:测试之后还会提出优化意见。
  • WebPageTest:支持全球多地区速度测试和多种浏览器。
  • Pingdom:测试页面加载速度,为你找出性能瓶颈。
  • GTmetrix:不光能测试速度,还能帮助分析是否有法律风险,并提出优化建议。

Lunacy 是一款在Windows 平台下的 Sketch 文档阅工具。包含文本、栅格」渐变和阴影的Sketch 文档都可以正常显示,无需联网,直接使用,完全免费。

4、BootMetro - Metro风格的CSS框架

BootMetro是一款基于Bootstrap的前端UI框架,BootMetro的特点是可以很方便地构建类似Windonws 8扁平化风格的网页界面,效果非常不错。

图片 6

官方网站:

2014

  1. What Is a CSS Framework Anyway? | 究竟什么是CSS框架?: Harry Roberts, Industry Conf 48:48.
  2. CSS Is a Mess | 乱七八糟的CSS: Jonathan Snook, Beyond Tellerand 53:49.
  3. 10 Commandments for Efficient CSS Architecture | 高效CSS结构十诫: Kushagra Gour, CSSConf.Asia 35:55.
  4. Slaying the Dragon: How to Refactor CSS for Maintainability | 杀掉巨龙:从可维护性方面考虑如何重构CSS: Alicia Liu, Front-Trends 33:21.
  5. CSS in Your Pocket – Mobile CSS Tips from the Trenches | 口袋中的CSS-移动端CSS开发要点: Angelina Fabbro, CSSConf.US 34:19.
  6. Styling and Animating Scalable Vector Graphics with CSS | 用CSS制作可扩展的矢量图动画: Sara Soueidan, CSSConf.EU 29:16.
  7. Play Nice With CSS Tools and Methodologies | 学会使用CSS工具和方法: Brad Westfall, HTML5DevConf 42:47.
  8. CSS and the Critical Path | CSS以及关键路径: Patrick Hamann, CSSConf.EU 33:42.
  9. All the Right Moves: How to Put Your UI in Motion | 走好每一步:如何让你的UI动起来: Val Head, Multi-Mania 45:49.
  10. Present and Future of CSS Layout | CSS布局的发展: Tab Atkins, CSS Day 49:31.
  11. Thinking Beyond “Scalable CSS” | 关于可扩展CSS的思考: Nicolas Gallagher, dotCSS 28:46.
  12. Web Components & the Future of CSS | WEB组件以及CSS的将来: Philip Walton, SFHTML5 40:02.
  13. CSS Performance Tooling | CSS性能工具: Addy Osmani, CSSConf.EU 46:27.
  14. 3.14 Things I Didn’t Know About CSS3 | 关于CSS,我所不知道的14件事: Mathias Bynens, CSS Day 45:35.
  15. Effortless Style | 轻松的样式: Heydon Pickering, CSS Day 49:51.
  16. CSS: Yawn to Yay! | CSS:从无聊到精彩 Kyle Simpson, Front-Trends 39:04.

Bootstrap,来自Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

文件比对

  • Diffchecker:文件比对的在线网站。
  • Beyond Compare:老牌软件,能快速比较文件和文件夹,功能强大。

Checker Service

10、后台UI开发框架 MuseUI

一款基于bootstrap风格,兼容于主流浏览器(包括IE6)的后端UI开发组件。

图片 7

官方网站:

其他资源

前端开发者

JavaScript Libraries

  • jQuery:最知名的 JavaScript 库。
  • BackBoneJS:为复杂 WEB 应用程序提供 MVP 结构。
  • D3.js:最流行的 Javascript 可视化图形库之一。
  • React:Facebook 开源的 JavaScript 库。
  • jQuery UI:以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。
  • jQuery Mobile:jQuery 框架的一个组件,提供完整统一的移动 UI 框架。
  • Underscore.js:提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象。
  • Moment.js:一个JavaScript 日期处理类库,用于解析、检验、操作、以及显示日期。
  • Lodash:一个具有一致接口、模块化、高性能等特性的 JavaScript 工具库。

每个月的前端开发者干货素材大合集,相对而言更加专注于为网页设计师和前端开发者搜集相关的工具和素材,这次的大合集当中包含一款颇为有趣的屏幕录像软件,几款适用范围较广的基于Material Design的框架,还有一些性能测试库也非常好用。这些前端工具与素材功能各不相同,总会有一两款是你感兴趣,甚至正好想要的~

9、快速开发CSS的框架 CSScaffold

不同于许多CSS框架,它必须依靠PHP与Apache的mod_rewrite来执行,但也因为需要这两种东西,让CSScaffold变得很神奇、很方便,写起CSS来又快又轻松!

图片 8

官方网站:

风格指导

  • Atlassian 官方 UI 文档;
  • 设计元素 by lonely planet.
  • GitHub 的 CSS 风格指导
  • Patterns by MailChimp 的风格指南.
  • Lighting Design System by Salesforce 的风格指南.
  • SASS 风格指南 by Sass team.
  • 星巴克的风格指南 by Starbucks.
  • 关于网站风格指导的一些资源 by Awesome people.

Web 开发资讯

  • wdrl.info:每周推送精心挑选的 Web 开发相关文章。
  • web tools weekly:主要推送 Web 开发工具。
  • webopsweekly.com:每周推送关于 Web 运营、部署等方面的文章。
  • /dev tips:每周分享开发小技巧。
  • friday front-end:每天在 twiiter 发开发相关资讯,可订阅然后每周发汇总邮件。
  • front-end dev weekly:手工挑选的 Web 开发、工具和创意资讯,每周推送。
  • smashingmagazine.com:面向 Web 设计师和开发者的一款在线杂志,内容质量很高,每个月的第二个星期二发布。

作者在原文中还分享了一些编辑器和开发语言,个人感觉都比较常见,故没有在这里列举出来,感兴趣的可以去原文查看。: )
原文地址:100+ Useful Web Development Tools and Resources.

Mac CLI

6、网易CSS框架 NEC

NEC是网易推出的开源前端CSS框架,NEC提供了丰富UI代码库和插件,可以极大的帮助开发人员提高开发效率。即使你并非前端专业开发人员,利用NEC你也可以快速地构建属于自己的网页应用。

图片 9

官方网站:

工具集

  • Basscss – 一个基本元素样式与不可修改工具轻量级集合
  • Bourbon – 用于Sass的简单且轻量的混合库
  • Corpus – 另一个CSS工具集
  • Susy – 用于Sass的响应式工具集。

团队协作

  • Slack:为团队打造的交流应用,我们部门就在用,强力推荐。
  • Trello:完全免费,灵活性高,可视化,和任何人一起管理任何事情。
  • Glip:支持实时消息、视频、视频会议、日历分享等等功能。
  • Asana:帮助追踪、记录团队成员的工作情况。
  • Jira:这个大家应该都用过吧,老牌团队协作应用。

图片 10

7、Alloy UI – 功能强大的CSS UI框架

Alloy UI是基于YUI 3的前段UI框架,包含一套丰富的(超过60)UI 部件,如图片库,对话框,树形结构,面板,自动完成,按钮,日历控件,工具条等。

图片 11

官方网站:

代码风格指导

  • 编写符合语言习惯的 CSS by Nicolas Gallagher.
  • CSS 指南 by Harry Roberts.
  • Sass 指南 by Hugo Giraudel.
  • Mark Otto 编写的风格指南,受「GitHub 风格」和「编写符合语言习惯的 CSS」所激发 by Mark Otto.
  • ThinkUp 的 CSS 风格指导,作者ThinkUp
  • Google 的 HTML/CSS 风格指导
  • WordPress 的 CSS 代码标准

对于 Web 工程师来说做好和最糟糕的事都是 Web 技术的日新月异。这也意味着作为一个 Web 开发者来说一定要不断的学习,适应变化。
因此,作者列举出了自己开发和学习过程中遇到的好工具和资源,在这里分享给大家:

图片 12

8、Cardinal – 移动端的CSS UI框架

Cardinal 是一个小型的移动优先的 CSS 框架,提供很多有用的默认样式、可缩放排版、可重用模块和一个简单的响应式表格系统。

图片 13

官方网站:

大型网站的CSS开发

  • Github 的 CSS方案 by Mark Otto.
  • CodePen 的 CSS 方案 by Chris Coyier.
  • Lonely Planet 的 CSS 方案 by Ian Feather.
  • Groupon 的 CSS方案 by Mike Aparicio.
  • Buffer 的 CSS 方案 by Brian Lovin.
  • HOOTSUITE 的 CSS 方案 by Steve Mynett.
  • 我们是如何精简 Trello 的 CSS 架构的 by Bobby Grace.
  • Bugsnag 的 CSS 架构 by Max Luster.
  • Ghost 的 CSS 方案 by Paul Davis.
  • Medium 的 CSS 方案 by Jacob Thornton.

数据库

  • MySQL:最流行的关系型数据库管理系统。
  • MariaDB:由 MySQL 早期员工开发,属于 - MySQL 的一个分支。
  • MongoDB:基于分布式文件存储的数据库。
  • Redis:一个开源、支持网络、基于内存、键值对存储数据库。
  • PostgreSQL:开源的对象 - 关系型数据库管理系统,Uber 早期就是用得这个。

Task Runners / Package Managers

  • Grunt:JavaScript 世界的构建工具。
  • Gulp:基于流的自动化构建工具。
  • Bower:Web 包管理器,包括 HTML,CSS,JavaScript,字体、甚至图片资源。
  • NPM:Node 包管理器。

图片 14

预处理器

更快地编译 CSS

  • GCSS – 一个用GO语言编写的CSS预处理器。
  • LESS – 向下兼容CSS并为当前的CSS增加额外的功能。
  • Myth – 只用写纯CSS而不用担心浏览器加载缓慢。
  • PCSS – 一个用Python语言编写的CSS预处理器。
  • PostCSS – 通过JS插件来转换CSS
  • Sass – 成熟、稳定且强力的专业CSS扩展语言
  • Stylus – 用于nodejs的直观、强健、极具特色的CSS语言
  • YACP – 另一种CSS预处理器

这里有一个 CSS 预处理器汇总。

本文首发于知乎专栏「极光日报」

图片 15

本文由必威发布于必威-前端,转载请注明出处:这些前端工具与素材功能各不相同,在这里分享

相关阅读