资讯专栏INFORMATION COLUMN

【译】编写更好的CSS必备的40个工具

moven_j / 1988人阅读

摘要:一个叫的人用纯重绘并模拟了种不同的移动设备包括可以给你的网站添加不相关的独立组件的一个库。每一个组件都是针对移动设备定制的,并且它有很多你在传统的框架中看不到的功能。如果你用开发移动优先的网站,并想要网站正常运行在低版本的上,可以考虑。

众所周知,CSS是非常棒的,它使网站看起来很漂亮,可以为网站添加动画,并让呈现和内容分离。去了解CSS的一切是非常难做到的,它只会变得更加困难,因为我们想让我们的代码跨浏览器兼容。
这里介绍了很多第三方工具,从简化工作流程到生成真正的CSS,这些工具都提供了我们需要的代码,并且比我们自己写出的代码运行的更快。

Pure

Pure并不是一个框架。相反,它只是集成一些已经应用到模块中的CSS代码,方便我们使用。只需要为你的项目抓取你想要的那部分CSS代码。当然,所有组件都是可用的。Pure中包含了网格系统、按钮、表格、表单和菜单,这些都是建立在normalize.css上的。

Magic Animations CSS3

Magic Animations CSS3集成了 CSS3 Animations,可以被应用在任何元素上,包含元素替换、滑出、变形和消褪等效果

Jeet Grid System

Jeet和semantic.gs有点类似,是以SASS为基础的网格系统。你可以在CSS中定义列(有时定义行),而不是为标记元素添加Class。Jeet使响应式布局更加容易,并进一步分离了内容和呈现。

10 Pure CSS Flat Mobile Devices

一个叫Oleg的人用纯CSS重绘并模拟了10种不同的移动设备(包括iPhone 6, iPad Mini, Nexus 5, and Lumia 920)

CodyHouse

可以给你的网站添加不相关的、独立组件的一个库。CodyHouse是用HTML、CSS和JavaScript建立的,你可以选择各种各样的导航、视差效果、分页、模态窗口、页面布局等等,每一个组件独有让你快速使用的教程。

Ratchet

如果你使用HTML、CSS和JavaScript是移动APP,Ratchet应该是一个不错的框架。每一个UI组件都是针对移动设备定制的,并且它有很多你在传统的HTML/CSS框架中看不到的功能。组件的默认效果都是非常棒的。

Animo.JS

Animo基于JQuery,能帮你更好的触发CSS动画。你可以叠加动画,或者第一次完成后触发第二个动画,并能同时利用CSS动画提供的硬件加速优点。

Adobe Extract

将一个Photoshop图层样式文件转换为CSS是一件很痛苦的事。幸运的是,Adobe做了一个工具(运行在浏览器中),允许你选择某个图层,将其属性转换为CSS代码。您也可以选择任何在线网站在PSD文件中使用的文本。

Sculpt

Sculpt基于SASS,是一个很好的框架。与其他已经发布的框架相比,Sculpt支持被遗弃的低版本浏览器。如果你用SASS开发移动优先的网站,并想要网站正常运行在低版本的IE上,可以考虑Sculpt。

CSS3 Generator

一个简单通用的CSS3属性生成器。它不是很新,但是当你忘了一些精确的语法时,它是非常有用的。

Bourbon Neat

SASS的最爱了,Bourbon Neat是一个简单的语义网格系统,可以多带带使用,但它的设计是用 Bourbon mixin库。

Enjoy CSS

Enjoy CSS也是一个CSS3生成器,但有趣的是,它不仅仅是生成CSS3-related代码,你还可以选择你想要应用的元素:一个div,文本输入,一个按钮,等等,用一种简单可视的方式得到你想要的确切效果。

Keyframer

从这里开始创建你的keyframe-based CSS animations。只需要去这个网站学习一些教程。

Gumby

Gumby是一个HTML/CSS框架,为那些喜欢在Ruby环境中工作的人设计的。你可以多带带下载它,当然,但也打包为一个Ruby gem,Ruby gem是由那些这种技术的人创建的。

CSShake

这有更多的CSS动画,重点是做出一些改变(知道我说什么吗?),但是,他们在炫耀他们的在线赚钱艺术(我不能容忍!)。

Bounce.JS

Bounce.JS结合了可视化(用于设计CSS3 动画)和JS库(用于实现),对于那些喜欢视觉设计的人来说,它的使用是非常简单的。

GridLover

需要一个简单、可视化的方式去调整字体大小吗?GridLover提供了一种简单的方式来预览排版、设置匀称的垂直和抓取CSS。你可以抓取CSS中字体的像素值、EMs, or REMs, 这些值会被格式成普通的CSS, SASS, LESS或其他代码风格。

ExtractCSS

想要快速设置CSS文件?一种方式是首先写HTML,然后设置ID、class等,将HTML代码粘贴到ExtractCSS,Web APP会列出所有的选择器,最后将它们放入CSS文件就行就可以了。

Kite

Kite是一个用于布局的CSS库,其设计用到了CSS Flex模块,但并不是完全使用Flex。Kite兼容IE8+。

Pesticide

需要确切地找出你的布局发生了什么?添加PesticideCSS文件。它将给页面上的每个元素添加边框,当元素作为子层次结构时,会巧妙地改变边框颜色。简单,但让人印象深刻。

Pleeease

疲惫的寻找不同的工具来对CSS进行预处理,添加特定的前缀,包括IE过滤器?不介意使用命令行吗?这是给你的。兼容SASS,LESS和Stylus

CSS Colours

CSS友好的颜色名称列表,包含了十六进制和rgba格式。

CSS Vocabulary

一个小应用程序,提供了一个方便的css相关的术语列表。选择其中一个,它将通过高亮一些示例代码来说明这个术语。

Tridiv

用纯CSS建立复杂的三维模型。

Buttons

用SASS和Compass建立CSS按钮库

CSS Menu Maker

CSS Menu Maker能帮助你建立简单、响应式的导航

One% CSS Grid

One% CSS Grid是一个12列的流布局网格系统,它是为构建更快、成本更低的响应式布局而设计的。

Simptip

Simptip是由SASS制作的CSS提示框工具。不仅可以设置提示框的方向(上、右、下、左),还可以设置不同的颜色,例如成功色、信息色、警告色和危险色。

Myth

Myth是一个CSS预处理器,这样你只需要写CSS,不用去担心低版本浏览器的支持,甚至低版本规范的改进。

Hover CSS

集成了CSS悬浮效果的代码,可被用在链接、按钮、logos、SVG和特色图片等等。

CSS Animation Cheat Sheet

CSS Animation Cheat Sheet是一组预设、即插即用的动画CSS库.你只需要将样式表导入到你的网站,然后给你想要添加动画的元素添加类就行。

Spinkit

Spinkit包含了一些简单但非常棒的CSS动画加载效果

Typebase.CSS

Typebase.CSS是一个很小的、可定制的排版样式表。它同时又less和sass版本,因此可以很容易地修改和合并到现代web项目。

SpriteBox

使你的CSS imager sprites变成可拖放的编辑器,并让它为你写代码。

CSS Ratiocinator

CSS Ratiocinator是一个命令行工具,通过检查实际的呈现效果,会清除掉没用的CSS代码。它非常适合应用在一些CSS文件已经超出控制的大项目。

CSS Beautifier

美化CSS,如果你已经得到了一个缩小的文件但不能找到原始(或你只是有点混乱的代码)文件时,代码的美化可以通过适当的格式化和缩进修复。

CSScomb

在使用CSS Beautifier让你的代码变得可读之后,你可以使用CSScomb运行代码,确保所有的属性都按照字母表有规则的排序。记住,不是选择器,而是属性,例如宽度总是在字体声明之后等等

Anima

一个动画库,为了扩展CSS动画的功能而设计的,并且能同时为100个元素设置动画。

Recess

Recess是一个剥绒机程序,也可以作为一个编译器运行,目的是确保你的CSS符合一组规则并保持精简。每个规则可以多带带禁以满足你的编码风格。

Bonus: A to Z CSS

Bonus: A to Z CSS不是一个工具,但是对于初学者来说是一个很好的资源。在A to Z,Guy Routledge为每一个CSS基本规则,如盒子模型及最常用的CSS属性,提供了坚实的课程。

译文出处:http://www.ido321.com/1545.html
英文原文:40 tools for writing better CSS

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111053.html

相关文章

  • []148资源让你成为CSS专家

    摘要:层叠样式表二修订版这是对作出的官方说明。速查表两份表来自一份关于基础特性,一份关于布局。核心第一篇一份来自的基础参考指南简写速查表简写形式参考书使用层叠样式表基础指南,包含使用的好处介绍个方法快速写成高质量的写出高效的一些提示。 迄今为止,我已经收集了100多个精通CSS的资源,它们能让你更好地掌握CSS技巧,使你的布局设计脱颖而出。 CSS3 资源 20个学习CSS3的有用资源 C...

    impig33 评论0 收藏0
  • CSS及布局

    摘要:经过半年的打磨,正式发布,主要是新增了一些常用组件,并使用命名,为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看...

    jaysun 评论0 收藏0
  • SegmentFault 技术周刊 Vol.40 - 2018,来学习一门新编程语言吧!

    摘要:入门,第一个这是一门很新的语言,年前后正式公布,算起来是比较年轻的编程语言了,更重要的是它是面向程序员的函数式编程语言,它的代码运行在之上。它通过编辑类工具,带来了先进的编辑体验,增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了,总结过去的 2017,相信小伙们一定有很多收获...

    caspar 评论0 收藏0
  • SegmentFault 技术周刊 Vol.40 - 2018,来学习一门新编程语言吧!

    摘要:入门,第一个这是一门很新的语言,年前后正式公布,算起来是比较年轻的编程语言了,更重要的是它是面向程序员的函数式编程语言,它的代码运行在之上。它通过编辑类工具,带来了先进的编辑体验,增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了,总结过去的 2017,相信小伙们一定有很多收获...

    nihao 评论0 收藏0
  • SegmentFault 技术周刊 Vol.40 - 2018,来学习一门新编程语言吧!

    摘要:入门,第一个这是一门很新的语言,年前后正式公布,算起来是比较年轻的编程语言了,更重要的是它是面向程序员的函数式编程语言,它的代码运行在之上。它通过编辑类工具,带来了先进的编辑体验,增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了,总结过去的 2017,相信小伙们一定有很多收获...

    Drummor 评论0 收藏0

发表评论

0条评论

moven_j

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<