有哪些css sprite工具方便修改,添加

html-css013

有哪些css sprite工具方便修改,添加,第1张

1. Bootstrap Magic

这是一个 Bootstrap 主题生成器,使用最新的 Bootstrap 3 版本和 Angular JS 版本,提供一个鲜活的用户修改预览。它包括了各种各样的导入,一个颜色选择器和智能的预先输入。更神奇的是,Bootstrap 会根据用户的每个选择来重新简历框架,方便用户的下载和使用。

2. BootSwatchr

BootSwatchr 是由 Drew Strickiand 独立开发和维护的,是唯一支持从右到左语言显示的 Bootstrap 自定义构建工具,这也是它的特色之一。BootSwatchr 是个可视化的工具,可以从底层开始创建 Bootstrap 主题。

3. Bootstrap Live Editor

Bootstrap Live Editor 是个所见即所得的构建 Bootstrap 的编辑器。在 Bootstrap 准备好的内容和代码片段的基础上提供一个又好又优雅的方法来编辑和美化 html,也因此它是个明智的选择。除此之外,它还包括高级的选项比如按钮配置,自定义标签和为用户做最明智最有益的选择。

Tailwindcss 是一个功能类优先的 CSS 框架,通过 flex, pt-4, text-center 和 rotate-90 这种原子类组合快速构建网站,而不需要离开你的 HTML。就是记住原子类,不要再自己想 CSS 命名一股脑子写 HTMl 就行了!

它与常规的 Bootstrap、Bulma 和 Material UI 不同之处在于没有提供预设的组件,比如:按钮、菜单和面包屑等。在 Bootstrap 中创建一个按钮:

得到如下:

而 Tailwindcss 没有固定的预设样式,所以需要自己组合:

结果:

一个方法、一个库、一个框架或者说一个新的东西的出现肯定是为了解决一个问题,不然它的出现可能毫无意思。就算是手工耿做的一些无厘头的东西,实际看着还有点用呢(最近他给僵尸做了一辆自行车):

那 Tailwindcss 解决了什么问题?可以从作者的意图看出:

他认为语义化的 CSS 并不是很好维护。

其实想想自己项目初始的时候自己起的很有语义化的名字,随着业务的变化和不同人员的更改那个起初很有意义的名字已经 名不符实

还有我们在使用 Bootstrap 预设类的 UI 框架时遇到设计风格和公司内部不同时,重置样式也会带来头疼的问题。

我们这里使用的是 V3 版本的 CDN(不推荐),若想配合构建工具看看官网如何使用的。V2 的 CDN 是引入一个 CSS 文件,而 V3 引入的是一个 script 。

结果:

https://tailwindcss.com/docs/hover-focus-and-other-states

结果:

看下 hover 是如何实现的:

我们之前给某个样式添加 hover 如何做?

在 Tailwindcss 中不是给现有的 class 添加一个 hover 状态,而是新增一个特定功能的 class :

这样有类似 hover 样式的就可以复用了。

学习 Tailwindcss 的期初负担在于记忆类名,还好都是有规律可循的:

1. 【调试服务器】首先如果你是一个准备做WEB开发实践的,不管前端、后台,首先需要了解一两种服务器apache,tomcat,nginx啥的,至少能够配置一个基本的本地服务和修改索引路径,前端页面使用http/https协议访问,而不是本地文件协议(file协议下很多jsAPI都是受限的)。

2. 【调试自动更新】服务器搭建好了,那么现在开始调试网页,然后你修改一点代码,去浏览器里面F5刷新页面看看效果,再修改一点代码,再去浏览器里面F5刷新页面看看效果...如此循环往复, maybe让工具帮助你检测本地文件修改然后实时刷新网页更靠谱。

3. 【换种方式写代码】然后就是写代码了,less/sass是不错的css组织工具,ES6也能让你的javascript代码显得更严谨和逻辑清晰,要是能够在访问页面的时候实时获取css/babel(es6编译器)编译结果神马的应该显得很cool。

4. 【模块化】当然在完成逻辑相对复杂的交互功能时候,可能需要你组织非常复杂的代码功能,这个时候了解一下模块化的开发思想显得很有必要require.js事实上更早,也更广泛一点,sea.js在国内也不错。

5. 【模板引擎】然后就是对于js生成HTML(或者其他什么的)的一种包装方式, 即:js模板引擎(handlebars,jade), 你可以尝试在开发时候使用这样的模板工具生成自己想要的HTML文档什么的,也是一种不错的体验,这个就像你用less写css代码一样,或者说用php,jsp这样的服务端语言工具生成实时HTML页面。

6. 【代理调试】有的时候你开发的东西并不只是前端代码,牵扯到跟服务端应用之间的数据交互,难免需要使用ajax,ajax这货基于安全考虑是不允许跨域的,因此可能需要通过代理的方式实现数据调试这样的工具也有不少,nginx服务器是其中的佼佼者。

7. 【资源合并优化】OK, 如果到完成开发阶段,你需要提交自己开发的代码到线上服务器了,在提交之前,你需要考虑将开发的资源进行最优化(合并,压缩神马的), js方面有uglify,css有cssmin神马的,图片压缩还可能根据不同的类型进行不同程度和配置的压缩,这些事情交给别个工具处理显得很有必要,要是能够一键处理那简直了, 百度的fis,业内最流行的grunt.js、gulp.js神马的,事实上它们在配置化编译LESS/Coffee这类工作在自己的流程中也很在行。

8. 【Combo】使用异步模块化开发带来的弊端就是对于大量零碎依赖文件需要分别开辟多个http链接去获取,这可不是一个好现象,要知道单个浏览器单域名并发获取资源的数量是很有限的, 因此例如KISSY就支持了简单配置一个combo参数来组织一个获取nginx的 http-concat格式资源的路径,当然这样的动态合并模式也适用于普通的资源请求合并。

9.【资源缓存和更新】 CDN 能够确保你已经发布到服务器上的资源以最快的响应时间到达浏览器,但是带来的问题是,你的代码更新,CDN则傻乎乎的不理你,除非你在使用的地方告诉它需要更新了( 时间戳、MD5文件名啥的 )。

事实上,我觉着凡是重复进行的工作总有可以程序和代码可以替你完成的部分,前端开发中这种事情尤其多,工具啥样的自己去定义才最合适自己,而nodejs的出现使得前端自己可以方便的开发这类东西(上面的less、coffee、uglify、gruntjs、fis、gulp这些个单词可以说:都依赖nodejs)。