前端必备知识,值得收藏的

CSS 财富大全

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

本文由 伯乐在线 - iLeo 翻译,艾凌风 校稿。未经许可,幸免转发!
保加利亚语出处:github.com。迎接加入翻译组。

sotayamashita 发起维护的 CSS 财富大全,包含:预管理器、框架、CSS结构、代码风格指南、命名习贯、播客、演说摄像、大网址的 CSS 开采经历等等。

【非常提示】:伯乐在线已在 GitHub 上提倡 CSS 能源大全中文版的重新整建,链接:。招待扩散和插手。

  • 目录
    • 预管理器
    • 框架
    • CSS结构
    • CSS规范化
    • 巨型网址的CSS开垦
    • 代码风格指南
    • 体制指南
    • 命名习贯和方法
    • 参考
  • 在线能源
    • 播客
    • Twitter
    • 视频

Bootstrap,来自Instagram,是时下异常受应接的前端框架。Bootstrap 是根据HTML、CSS、JAVASC奥迪Q5IPT 的,它简洁利落,使得 Web 开荒尤其便捷。

对此 Web 程序猿来讲做好和最倒霉的事都以 Web 本事的百废俱兴。这也象征作为三个 Web 开荒者来讲分明要不断的就学,适应变化。

预管理器

更快地编写翻译 CSS

  • GCSS – 贰个用GO语言编写的CSS预管理器。
  • LESS – 向下宽容CSS并为当前的CSS扩张额外的作用。
  • Myth – 只用写纯CSS而不用顾虑浏览器加载缓慢。
  • PCSS – 贰个用Python语言编写的CSS预管理器。
  • PostCSS – 通过JS插件来转变CSS
  • Sass – 成熟、牢固且强力的正经CSS扩张语言
  • Stylus – 用于nodejs的直观、强壮、极具特色的CSS语言
  • YACP – 另一种CSS预管理器

这里有贰个 CSS 预管理器汇总。

它由推特的设计员马克 奥托和雅各布Thornton同盟开拓,是叁个CSS/HTML框架。Bootstrap提供了温婉的HTML和CSS标准,它正是由动态CSS语言Less写成。Bootstrap一经推出后颇受招待,一直是GitHub上的热销开源项目,满含NASA的MSNBC(微软全国广播集团)的Breaking News都选用了该类型。

所以,笔者列举出了和谐开垦和上学进度中蒙受的好工具和能源,在这里地享用给大家:

框架

  • 960 Grid System – 简化了web开辟职业流程
  • Blueprint – 那一个CSS框架为你提供易用的栅格系统、相符直觉的排版成效、有用的插件以致可打字与印刷的体制
  • Bootstrap – 最风靡的HTML、CSS、JS框架
  • inuit.css – 强力的、可扩充的、基于Sass的、采纳BEM命名的面向对象CSS框架
  • Foundation – 一个高级响应式前端框架
  • Material Design Lite – 很好的用于制作Material Design风格网址的框架
  • Materialize – 基于Material Design的今世响应式前端框架。
  • Pure.css – 一套可用于全部web项目标微型响应式CSS模块
  • Semantic UI – 使用人性化html的暴力框架。
  • Skeleton – 一个超轻松的响应式模板。
  • UIkit – 适用于手提式无线话机、平板以至Computer端的栅格系统。

境内部分平移开拓者较为熟稔的框架,如WeX5前端开源框架等,也是借助Bootstrap源码进行质量优化而来。

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 工具库。

工具集

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

课程目的

前端框架

  • Bootstrap:盛名的马上支付响应式 Web 应用程序的前端工具包。
  • Foundation:七个易用、强大何况灵活的前端框架,用于创设基于别的设施上的 Web 应用。
  • Semantic UI:全语义化的前端分界面开拓框架。
  • uikit:一款轻量级开源的前端框架。

CSS结构

  • RSCSS – CSS样式结构的创制规范
  • ITCSS – 用于大型UI项指标休保养息、可扩展、可决定的CSS框架结构

明白前端框架Bootstrap的施用

数据库

  • MySQL:最流行的关系型数据库管理体系。
  • MariaDB:由 MySQL 早期职员和工人支付,属于 MySQL 的多少个分层。
  • MongoDB:基于布满式文件存款和储蓄的数据库。
  • Redis:三个开源、辅助互连网、基于内部存款和储蓄器、键值对存储数据库。
  • PostgreSQL:开源的靶子 - 关系型数据库管理体系,Uber 开始的一段时期正是用得那些。

CSS标准化

  • Normalize – 一套提供较好的多浏览器私下认可样式一致性的CSS标准
  • Normalize-OpenType – 为Normalize.css增多了OpenType性子,如连字、字间隔等等。
  • Reset – 一套CSS规范,将总体的HTML成分调治到平等的基准线
  • sanitize.css – 一套可即时选取的,符合现今最优实行的CSS标准。

相符人群

Task Runners / Package Managers

  • Grunt:JavaScript 世界的创设筑工程具。
  • Gulp:基于流的自动化营造筑工程具。
  • Bower:Web 包管理器,包罗 HTML,CSS,JavaScript,字体、以至图片能源。
  • NPM:Node 包管理器。

大型网址的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.

前面一个开辟者

CSS 预处理器

  • Sass:三个有力、成熟、牢固的 CSS 扩张。
  • Less:作为三个 CSS 的强大,其兼容性相当好,学习话费十分低。
  • Stylus:提供更实惠、高尚的不二法门来生成 CSS。

代码风格教导

  • 编写适合语言习于旧贯的 CSS by Nicolas Gallagher.
  • CSS 指南 by Harry Roberts.
  • Sass 指南 by Hugo Giraudel.
  • 马克 奥托 编写的品格指南,受「GitHub 风格」和「编写契合语言习贯的 CSS」所激起 by Mark Otto.
  • ThinkUp 的 CSS 风格引导,作者ThinkUp
  • Google 的 HTML/CSS 风格指引
  • WordPress 的 CSS 代码标准

原来的文章链接

Markdown 编辑器

  • StackEdit:三个开放源码无需付费应用的 马克Down 编辑器, 基于 PageDown。
  • Dillinger:也是在线编辑器,提供云存款和储蓄,并扶植HTML5,PDF 等多样导出格式。
  • Mou:Mac OS X 上一款不错的 马克down 编辑器。
  • Texts:同不经常候帮助Windows 和 Mac OS X。

作风指点

  • Atlassian 官方 UI 文档;
  • 统一计划因素 by lonely planet.
  • GitHub 的 CSS 风格教导
  • Patterns by MailChimp 的品格指南.
  • Lighting Design System by Salesforce 的风格指南.
  • SASS 风格指南 by Sass team.
  • 星Buck的作风指南 by Starbucks.
  • 有关网址风格引导的有的能源 by Awesome people.

Icon 资源

  • Font Awesome
  • IconMonster
  • IconFinder
  • Fontello

命名习贯和艺术

  • Atomic OOBEMITSCSS
  • BEM
  • SMACSS
  • Point North
  • ITCSS
  • OOCSS
  • Title CSS
  • idiomatic-css
  • Atomic Design
  • SUIT CSS
  • Kickoff CSS

Git Clients / Services

  • SourceTree:一款无需付费何况很酷的 Git 顾客端,帮助 Windows 和 Mac。
  • GitKraken (Beta):一款免费、直观、赏心悦指标跨平台 Git 顾客端。
  • Tower 2:APP 很漂亮,需付费。
  • GitHub Client:官方顾客端。
  • Gogs:四个极易搭建的自助 Git 服务。
  • GitLab:对个人项目也无偿。

参考

  • 可扩充CSS阅读清单

本地开拓条件

  • XAMPP:完全无需付费,轻易安装的 Apache 遍及式意况。满含:MariaDB,PHP,Perl。
  • MAMP:Apache MySQL PHP Python Perl。
  • WampServer:Windows 下的 Web 开荒条件,能够创造基于 Apache 2,PHP 和 MySQL 的 Web 应用。
  • Vagrant:安装和布局轻易、轻量级。
  • Laragon:飞速、轻巧搭建的 Windows 本地开拓境况。满含:MySQL,PHP,Redis,Apache。

其余能源

文本比对

  • Diffchecker:文件比对的在线网址。
  • Beyond Compare:老品牌软件,能便捷相比较文件和文件夹,功效强大。

播客

编制程序时得以听的一些剧情。

  • Shop Talk Show – Chris Coyier 和 DaveRupert 的在线播客,涉及前端、UX的宏图及开拓
  • Style Guide Podcast – 由 Anna Debenham 和 Brad Frost 主持的一部分访谈。
  • The Big Web Show – 饱含了大致全部 Web 相关的话题,比如网络出版、艺术辅导、内容攻略、版面设计、Web技能等等。
  • The Web Ahead – 与全球的大方切磋 Web 本领的变型和发展。
  • Non Breaking Space Show – 开掘出那多少个在数字艺术、设计以致支付世界最棒的、最闻明的还要最明白的创客们。
  • The Changelog – 这几个播客的口号是:“开源发展急迅,快跟上”,致力于令你跟上风行的开源技艺。

Code Sharing / Experimenting

  • codeshare:能和任何开垦者实时分享代码。
  • JS Bin:能够将编写制定后的代码保存到地头,或将 U福特ExplorerL 地址发给别的人,让其协助调试代码。帮衬HTML,CSS,JavaScript,马克down,Jade 和 Sass。
  • JSfiddle:能自定义景况来测验你的 HTML,CSS,JavaScript 代码。
  • Dabblet:Web playground,交互功效不错。

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、RAV4WD、UX以致无障碍开拓。
  • Ben Briggs – 首要研讨node.js、javascript、开源模块、顾客端优化、web质量相关。
  • Paul Lewis – 将代码与规划联系起来的Google职工。
  • Thierry Koblentz – Yahoo 的 CSS 开发者
  • Nicolas Gallagher – 照片墙的软件技术员
  • Harry Roberts– @google, @Etsy, @kickstarter, @BBC, @Deloitte, @FT等的前端设计顾问
  • Phil Walton -谷歌(Google)技术员、开源拥护者、开荒者、设计员、写手。
  • 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 – 谷歌(Google)的程序员,参加项目有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 的主设计员和开采者,在谷歌(Google)做 Dart 语言相关工作。
  • Brad Frost – Web设计师、演讲者、写手、顾问、音乐家。
  • Maxime Thirouin – 前端技术员,自由专门的学问者,UI/UX开采者。
  • Mark Otto – 在GitHub和Bootstrap专门的学问,曾就职于Facebook,一流书呆子。
  • Simon – UI设计师,CSS开发者
  • Connor Sears – GitHub设计师
  • Remy Sharp – 他的推都是关于CSS尺寸单元的
  • Jonathan Snook – 设计员、开垦者、写手、演讲者。作者在网络做些东西,笔者写的SMACSS。

公司合作

  • Slack:为集团创设的调换应用,大家机关就在用,强力推荐。
  • Trello:完全免费,灵活性高,可视化,和任哪个人一齐管制任何业务。
  • Glip:支持实时音讯、录制、摄像会议、日历分享等等功效。
  • Asana:扶持追踪、记录团队成员的干活情状。
  • Jira:那一个我们应该都用过吗,老品牌团队协作应用。

视频

一个很有用的一定要看录制清单,那些清单是从 908a28 的 AllThingsSmitty/must-watch-css 复制过来的,作者已经在推特上跟他说了,特别谢谢!

鼓舞灵感

  • CodePen:能在地点分享和找到卓绝的安顿性,还应该有别的开辟者为您建议建议。
  • Dribble:三个设计员分享他们小说的社区。

2015

  1. mdo-ular CSS: Mark Otto, jQuery UK 30:06.
  2. CSS Architecture with SMACSS: Caleb Meredith, DevTips channel 30:15. 用SMACSS搭建CSS结构
  3. CSS Workflow from the Ground Up: Jonathan Snook, Generate conf 2015 46:06. 从头开头学习CSS专门的学业流

网址品质测量检验

  • Website Speed Test:KeyCDN 提供的无偿网航站调度室节和测量检验工具。
  • Google PageSpeed Insights:测量试验之后还只怕会提议优化意见。
  • WebPageTest:协助环球多地点速度测验和多样浏览器。
  • Pingdom:测量试验页面加载速度,为你找寻性能瓶颈。
  • GTmetrix:不光能测量检验速度,还可以支援剖析是还是不是有法例风险,并建议优化建议。

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.

Web 开拓者社区

  • Stack Overflow:有赶过470 万的活跃开辟者在其间互相帮助。
  • Hashnode:环球性的开辟者社区,大咖非常多。
  • Refind:面向创办实业者、开采者、设计员的 Web 项目分享社区。
  • Google Web Developers Group:Web 开垦者的 Google 社区。
  • Facebook WordPress Front-end Developers Group:WordPress 的前端程序猿 Twitter 小组,切磋开荒难题、本事趋势。
  • 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。

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.

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.
迎接关切乐乎专栏「极光早报」,每一日为 Makers 导读三篇优质乌Crane语小说。

2012

  1. Open Source Tools and Libraries for Designers | 设计员的开源工具以至财富库: Julie Ann Horvath, HTML5DevConf 29:39.
  2. GitHub’s CSS Performance |  GitHub的CSS表现: Jon Rohan, CSS Dev Conf 40:50.

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 评论

至于小编:iLeo

图片 1

性别:男,单身前端新手一枚,近些日子在奥兰多做事,首要做活动端的web开采。喜欢的一句话:永恒都要保全三个初我们的心气。搜狐:@文_车_Leo_sCript 个人主页 · 笔者的篇章 · 12

图片 2

本文由星彩网app下载发布于前端技术,转载请注明出处:前端必备知识,值得收藏的

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。