KILLKISS / 网页设计 / 如何选择合适的CSS框架

0 0

   

如何选择合适的CSS框架

2010-03-24  KILLKISS

The first step you need to take is to make sure you decide upon a framework that has an established and accurate representation of detailed documentation. This is vital to the steps you’ll take in implementing and utilizing your framework the way it was intended.
首先要做的是确保你要使用的框架有确定、能够精确表现详细文档的形式。这一步至关重要,将决定你能否运用框架来达到它的设计初衷。

Next, you should analyze what problems the specified frameworks of your choice will solve. As you come across frameworks that you believe might “fit the bill” for the project(s) at hand, then it would be wise to compare each of them and elaborate on which framework addresses which concerns and satisfies your needs.
接下来,你应当分析应用某个框架可能会遇到的问题。当你手边拿到你认为可能适合你的项目的框架时,比较聪明的做法是把这些框架做一下对比,详细比较各个框架主要涉及的方面,哪个更适合你。

CSS Frameworks allow you to rapidly improve and speed up your development time when used correctly, and provide a powerful way to style our websites and applications with flexibility and effectiveness.
正确地运用CSS框架,可以迅速提高我们的开发速度,并为整个站点和应用的样式化提供一种强大、高效的而且富有弹性的工具。

Also, don’t hesitate to ask other developers and colleagues which framework has worked best for them and why? This will help you gain valuable insight based on the experience of others, something that can’t be bought. Another point I would like to make is the role your chosen framework’s community plays. How big is it? Are the members helpful? Does it provide invaluable resources? Every one of these questions help you determine if your framework’s community is going to be of use. The logical point of view is, the larger and more involved the community is, the better your chances are at finding the right type of help when you need it.

还有,不要犹豫去问一下其他的开发人员或者同事哪些框架他们用得最好,为什么?这将使你获得其他经验丰富人员的一些有价值的想法,这是无法用金钱买来的。另一点是你所选框架的社区所扮演的角色。它有多大?这些成员有用吗?它提供毫无用处的资源吗?每一个问题都会帮助你决定能否用的上所选框架的开发社区。从逻辑上说,社区规模越大、用户数量越多,你获得所需帮助的机会就越多。

Below we will take a look at 8 of the best frameworks we found to be useful for both developers and designers.

下面是我们找到的8种对开发人员和设计人员都很有用的CSS框架:

Blueprint CSS

The Blueprint CSS framework uses a grid-system that has pre-built typography and includes various plugins, built-in form styles and more. With BP you’ll also find good stable documentation, a wiki, an active discussion group, and examples of sites built on the Blueprint system.

Blueprint CSS使用预置了字体排印的网格系统,包含了各种插件,还有内置的forms样式等。你还能找到非常棒的帮助文档,它有一个wiki系统,还有讨论组,以及很多基于BP的站点示例。

Elements CSS Framework

Overall, the Elements framework makes it much easier and efficient to write CSS code. It’s a way to keep your files organized, benefit from a collection of present classes that can make your development process much friendlier, and it’ll automatically add respective icons for external links so that users will be able to quickly find and access them as well.

总的来说,Elements框架能让我们写CSS代码变得更加轻松和高效。它收集了很多的表现类,能够让你的开发进程更加友好,使你很好地组织代码文件。并且它会自动地为外部链接添加相关联的图标,以使用户能很快地发现并访问它们。

Content with Style

Content with Style is a CSS framework that helps you style and structure your website with amazing design and typographical elements. With six different layouts to choose from that include vertical navigation, two content columns, horizontal navigation with two columns of content and useful one content columns. Content with Style is an efficient way to “prioritize” the content on your site and focus on areas such as the header, main content, sub content, and more.

Content with Style能帮助你为站点提供令人惊奇的设计和排版元素。它提供了6种不同的布局,包括垂直导航、两栏布局、带水平导航的两栏布局以及一栏布局。Content with Style是把站点内容按照重要性排序的一个非常有效的方法,它集中强调了header,main content,sub content等区域。

Emastic

This lightweight CSS framework uses PX, EM, or % widths for the process of signaling a page width, and it is also based on an elastic layout. Emastic comes with various pre-defined styles for your typography and much more. Predominantly, the grid is made up of blocks that are sized from 5 to 75em units. The default sizes can be changed at any time and the frameworks design options depend on the grid layout.

这个轻量级的CSS框架基于弹性布局,使用了px,em和百分比来度量页面的宽度。Emastic为字体排印等效果预定义了各种样式。多数情况下用于分割块的网格使用了5-75em的长度。默认大小可以任意改变,框架的设计选项取决于网格的布局结构。

960 Grid System

The 960 grid system is a powerful CSS framework that lets us develop and prototype websites rapidly. The layouts are based on 12-16 columns and the layout templates are for Illustrator, Photoshop, Expression Design, Fireworks and more. You can also print a variety of templates for use with pen and paper if that’s what suits you best.

960 grid system是一个非常强大的CSS框架,让我们快速构架和开发站点。它的布局是基于12-16个栏,并且它的布局模板可以用于Illustrator,Photoshop,Expression Design,Fireworks等设计软件。如果你认为合适,你甚至可以把模板打印出来用于写字。

Yui Grids

The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations. Features included are support for fluid-width, easy customization, flexible template columns, and more.

YUI Grids CSS提供了4种预置宽度,6种预置模板,以及能够堆叠或嵌套多个栏的功能。用4kb的文件就可以提供超过1000种网页布局组合。它的特性包括:支持流式布局、自定义、弹性模板等等。

Yaml

“Yet Another Multicolumn Layout” (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users. YAML is focussed on web standards and accessibility, slim framework core with numerous extensions, complete multilingual documentation, and robust, flexible layout concept (columns & grids).

“Yet Another Multicolumn Layout” (YAML)是一个能创建时髦的弹性浮动布局的(X)HTML/CSS框架。这个结构在编程上非常多样化,终端用户可访问性高。YAML着力于web标准和可访问性,虽然很苗条,但它内置了多种扩展,提供多语言相关文档,是一个健壮的、具有弹性布局概念的框架。

SenCSs

SenCSs stands for Sensible Standards CSS baseline, (pronounced “sense”). It supplies sensible styling for all repetitive parts of your CSS, and doesn’t force a lay-out system on you. This allows you to focus on actually developing your website’s style. SenCSs isn’t a framework like other CSS frameworks, it doesn’t include a layout system littered with silly classes and pre-set grids, so what does SenCSs do? SenCSs does everything else: baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms and more.

“SenCSs”全称Sensible Standards CSS baseline(发音“sense”).它为CSS中所有重复的部分提供了朴素而实用的样式,并且你不用强制应用某个布局系统,这就让你把注意力真正地集中于开发站点的样式。SenCSs与其他的框架不同,它没有包含那些由乱七八糟的类和预置网格组成的布局系统,SenCSs只使用baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms等基本元素。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。如发现有害或侵权内容,请点击这里 或 拨打24小时举报电话:4000070609 与我们联系。

    猜你喜欢

    0条评论

    发表

    请遵守用户 评论公约

    类似文章
    喜欢该文的人也喜欢 更多