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

CSS 专栏收录该内容
56 篇文章 0 订阅

众所周知,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

  • 1
    点赞
  • 1
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值