深圳网站设计制作欣赏

将想法与焦点和您一起共享

深圳网站建设设计 深圳网站优化排名 深圳网站设计制作欣赏

5种流行的CSS框架+入门教程和工具

2017-07-25  阅读: 深圳网站建设设计

5种流行的CSS框架+入门教程和工具
网站建设CSS框架最近流行起来,使开发人员能够快速原型设计。CSS框架的理念是在每个站点上反复做重复的任务,让你得到更快的结果,并得到设计师们喜欢的有趣的东西。
好CSS框架的主要特点是1)快速加快我们的开发时间,2)应该有一个非常小的尺寸,3)有良好的文档和教程,4)有干净的网格结构。您需要对CSS框架有一个基本的了解,您将使用它来理解为什么和如何解决问题。

在今天的文章中我们提出的5个最流行的CSS框架概述;展示精心挑选的教程使用它们以及其他有用的工具和资源,你肯定会找到有用的和节省时间的。


1。960 CSS框架
960网格系统致力于通过提供常用的维度(基于960像素的宽度)来简化Web开发工作流。有两种变体:12和16列,可以单独使用或串联使用。的960.css文件本身只有3.6 KB的压缩。

“杰夫瑞”在960个CSS框架的密切关注,说明使用它的利弊。他还一步一步地带领我们创建一个简单的“12列”布局,有一个简单的标题和两列结构。最重要的一点是:你必须指定一个类,每个部门命名规范要求,类的名字开始与“grid_”与所需的列数端。

960 CSS框架–学习基础知识
Stefan Vervoort以沉重的工作为你解释这个基本框架让你可以从960个漂亮的快速发展。基本原则包括:不解释编辑960.css,加载网格、容器、网格/柱,空间和造型。斯特凡的另一篇文章,他解决了在使用这个框架时所面临的一些问题。

5种流行的CSS框架+入门教程和工具
流体960网格系统模板已经建立在拿芬史密夫和他的960网格系统使用来自MooTools的JavaScript库工作中的作用。

蓝图是一个CSS框架,旨在减少CSS开发时间。它给你一个坚实的CSS基础建设项目上,用一个简单易用的网格,合理的排版,漂亮的形式,甚至一个样式表打印。它的主要功能之一是对浏览器默认样式进行批量重置,提供了一种用于可定制布局网格的方法,最重要的是所有元素都可以重写。

有几个可用的蓝图插件,可以覆盖框架的各个方面,或者添加新样式供您使用。
说明如何使用CSS CSS框架和工具的教程

BlueprintCSS 101

Jeff Croft解释蓝图的核心特征,我们如何使用它,它已经影响了我们的工作流程,我们喜欢它。

仔细看看Blueprint CSS框架

在本教程中,我们将了解蓝图的内部工作,我们将看一看演示应用程序,它使用蓝图来更好地了解如何实际使用框架。

蓝图CSS备忘单

蓝图网格CSS生成器

此工具将帮助你产生更灵活的蓝图的grid.css和compressed.css版本和grid.png使用图像文件在发展背景图像非常方便,确保一切线正确。你是否喜欢8、10、16或24在你的设计中的列,该发电机现在使你的灵活性与蓝图。


pxtoem.com是一个网站,让他们更容易转换像素值的值。你选择的价值观的CSS文件可以得到基于CSS的蓝图typography.css部分设置一个默认的字体。

5种流行的CSS框架+入门教程和工具

构建一个可视化的布局编辑器,基于蓝图和jQuery,构建一个有用的工具和CSS设计师证明视觉布局编辑器可以实现干净的CSS和语义化的HTML。

jQuery包含一个健壮的CSS框架,用于构建定制的jQuery小部件。该框架包括类,涵盖范围广泛的通用用户界面的需求,并且可以使用jQuery UI themeroller操纵。通过使用jQuery CSS CSS框架构建UI组件,您将采用共享标记约定,并允许整个插件社区轻松实现代码集成。

一个真实世界的例子,主题化的按钮和工具栏使用jQuery UI的CSS框架,一类开发的jQuery UI插件,可以很容易地应用到任何插件系统,甚至静态内容。下面是按钮示例,演示如何将CSS框架类的力量集成到自定义小部件中。

5种流行的CSS框架+入门教程和工具
4. YAML
YAML(另一个多列布局)专注于灵活的布局和提供列和网格柔性基础的设计元素,弹性或固定的布局。你需要许可证才能使用它。

YAML是一个很不错的Ajax生成器,基于CSS布局允许你把布局容器视觉通过拖放的YAML的可视化开发一个方便的工具。有效的HTML和CSS代码是自动生成的。

Dirk Jesse,YAML开发者(另一个多列布局),一个(x)HTML和CSS框架,阐述了他在文章的最后一段,YAML的动机,提供什么是可能与YAML的概述和可能对你未来的布局提供一些思路。

5种流行的CSS框架+入门教程和工具
5。雅虎YUI网格的CSS
基本的YUI网格CSS提供四种预设的页面宽度,六个预置模板,并且能够栈巢细分地区两,三,或四列。4KB文件提供了超过1000的页面布局的组合。特点包括:自动清理页脚,定制宽度为固定宽度布局,支持流体宽度(100%)布局和更多。

YUI网格生成器网格定制一个简单的界面。

别忘了检查CSS重置/基/字体/网格备忘单。

看看这里的现场演示

复杂的流体布局在三个简单的步骤

本教程介绍了如何在三个简单的步骤创建CSS布局在所有现代浏览器毫不费力地使用YUI网格工作。

YUI CSS网格:太棒了,但没用?

5种流行的CSS框架+入门教程和工具

Jeff Croft问YUI CSS网格的网站比750px有一定的局限性,Dustin Diaz在解释了一些有趣的功能和使用方法我们可以使用YUI CSS网格。“一个很酷的事情我已经做了它是几乎与一类名称除相同的HTML七不同的模板(yui-t(1-7))。这很好,因为它完全独立于源代码。如果我想在我的网站上你可以换出一个类名,而不是一个全新的CSS文件的方法的一个样式切换器。因此,没有理由为整个“入侵身体的开关”

值得检查的CSS框架

–typogridphy

流行的CSS框架:10个有用的教程

一个排版布局CSS框架允许网页设计师和前端开发人员快速的代码typograhically愉悦的网格布局和网格。基于960网格系统,typogridphy允许你创建它是通用的,大电网布局看。

将文章分享到..