众所周知,现在不是互联网诞生的时代,人们几乎已经忘记了网站,只有单段文字和一些超链接。 如果您想继续使用当前的网络标准,您必须使您的网站令人愉快而不是坦率地可见。 无论使用哪种编码语言,例如 HTML or PHP 用于构建用户界面, 的CSS 将成为您使网页看起来时尚的工具。 当我们将网页比作人体时,HTML 就像您的骨骼,而 CSS 则是接近皮肤和肌肉的东西,用于赋予形状和结构。
就像设计和开发世界中的所有其他事物一样,CSS 也获得了次要和主要更新,使其适合达到 CSS3,这是 HTML5 伴随旅程的最佳组合。 然而,这出戏的主角是你选择使用的 CSS 趋势或模式! 如您所知,有多种 CSS 框架可供您使用,它们具有不同的外观和功能,例如 引导, Zurb 等等 我们今天给大家介绍的是 纯CSS,来自领先的互联网巨头雅虎的一个简单的基于coolgrid的CSS框架。 令人高兴的是,您无需支付一分钱就可以使用这个框架。
纯CSS
您可能已经使用其他框架(如 Zurb Foundation)来构建有吸引力的网页和网站。 使用 CSS 框架非常有用,因为您可以获得页面中各种元素的模板,例如分区、表单、菜单等。这与 雅虎的纯 CSS! 与下载文件并将其添加到“CSS”文件夹不同,Pure CSS 可以像 谷歌字体,您必须在其中添加一行代码以将框架集成到 HTML。 由于该框架是最新的,所以它是完全响应式的。 最重要的是,Pure CSS 是您可以在 Web 中找到的最简单的框架之一。 您可以使用该框架为您的网站提供动力,也可以下载用于样式部分(如表单、菜单等)的特定模块。有六个单独的模块可免费使用。 Pure CSS的模块如下,提取出来的时候看起来很轻量(小于2Kb)。
- 基地: 基本网页元素,如标题、段落、排版
- 纽扣: 各种具有活动、悬停等效果的按钮。
- 表: 基表可提供边框等。
- 菜单: 水平、垂直、下拉。
- 网格: 响应网格。
- 形式: 分组输入、多列等
也可以看看: 微妙的图案书签:在您的网站上预览背景图案.
为什么使用纯 CSS
- 较少未使用的代码: 在使用其他 css 框架时,经常会看到大量未使用的代码。 另一方面,在纯 CSS 的情况下,您永远不会遇到这个问题,因为您可以使用特定版本的框架并使用它来设置网页的特定部分的样式。 当然,更少的代码看起来更棒!
- 全部内部: 至少在其他一些框架中,他们使用第三方 JavaScript 插件和代码来改善视觉效果。 但是,Pure CSS 不使用任何类型的 JS 插件,除了用于下拉效果的插件。 较少的第三方代码可以为您提供更快的页面加载和代码整洁。
- 模板: 如果您不是为您的网站设计自己的布局的专家,Pure CSS 可以在该部分提供帮助。 该网站包含许多布局示例,匹配具有不同意图的网站,如营销、登陆页面等。
- 皮肤生成器: 如果模板和样式可以满足您的创意设计师的需求,您可以使用 Pure CSS 的皮肤构建器来构建您自己的皮肤。 您可以猜到,皮肤构建器不会考虑您的编码水平专业知识。
也可以看看: 图标字体:Font Awesome 生成器的优缺点.
使用纯 CSS
正如前面提到的纯 CSS,与其他框架相比,具有许多有利的特性。 回想我们之前说过的,你可以通过与 Google Fonts 相同的方法来使用 Pure CSS。 您必须添加单行外部文件链接才能为您的网页带来风格。 当您必须构建单个文件网页并且没有足够的空间放置所有 css 文件时,此功能非常有用(猜猜这永远不会发生)。 作为雅虎! 转动项目的轮子,您不想为加载错误或技术故障而紧张。
如果你想使用 Pure CSS 的完整 CSS 模板,你可以在主网页中添加以下代码。 您还可以单击 CSS 文件链接并下载 CSS 文件以使用它。
[HTML]
[/ html]
如果您只想使用特定的 CSS 版本,例如菜单、表单等,则可以使用特殊代码和专用 CSS 文件。 网址列表如下:
使用 Pure CSS 的皮肤生成器也是一项更容易的任务,因为您可以使用皮肤生成器页面的直观控制按钮来控制元素的属性。 但是,我们建议您应该下载 CSS 文件以了解元素的名称。 正如我们所说,放置这些小于 2 Kb 的文件不会占用您的磁盘空间。
Pure CSS 网站的设置方式使得即使是新手也可以在他们的网站中插入基于 Pure CSS 的元素。 您可以在左侧看到一个简单的侧边栏,列出了表单、按钮等部分。在每个页面中,都可以使用预览以及 HTML 代码将这种效果带入您的网站。 因此,在您的网页中插入此类元素非常容易。 下图是单登录类型表单的预览和代码。
结论
在分析 Pure CSS 的所有功能时,这是 Yahoo! 的最佳贡献之一。 设计世界。 雅虎! 用户界面,通常称为 YUI 支持所有附加到 Pure CSS 的字符串,这使得该框架在进行比较时是最好的。 除了使用预设元素,您还可以自定义 Pure CSS。 您必须引导自己访问 Pure CSS 网站,以使用和了解有关简单紧凑框架的更多信息。 在查看示例并在您的项目中使用它后,请让我们知道您对此框架的看法。
拉克什库马尔
感谢您发布对纯 css 的精彩评论。 由于我正在尝试为社区开发自己的 wordpress 主题,因此我认为来自 yahoo.com 的这个新 css 可以帮助我很多。
哈日
我觉得它真的非常有用。 稍后将逐一探究。
卡西
哇。 这真的很有趣。 感谢您分享这些信息。
雷蒙德山姆
在这一点上,您会推荐 Pure 而不是 Bootstrap 或 Foundation? 我发现 Bootstrap 作为第一次使用它的用户比最佳记录要少一些。
萨杰什
你好 Abhijith N Arjunan,我必须告诉你,你做得很好,感谢你启发我的知识和技能。
桑托斯
伟大的文章阿比吉特。 我使用 PureCSS 为名为 PyroCMS 的新内容管理系统创建了一个主题。 看看[PyroPure])。
开发主题非常有趣。 我认为它比其他框架轻得多。 样式也非常可定制。
欧文
哇.. 这是一件很有趣的事情,我知道我在编程和设计方面没有天赋,但做起来很有趣。 PureCSS 可能是我非常需要的东西。
Adam
您好,我一直在 3 个项目中使用来自雅虎的 (PureCss) 纯正性,可以说它确实是一个很棒的轻量级框架,与 Bootstrap 或基础相比,它的重点是它的轻量级并将设计带回开发人员并依赖于 300kb UI 套件无论如何你不会使用 70% 的元素,如果你从 Bootstrap 中取出部分,它仍然需要 Java,它仍然在 200kb 部分。 更不用说每个网站看起来都是 Bootstrap,这就是为什么我永远不会使用 Bootstrap 来构建网站或 Zurb 基础,它们都很重,你需要使用它们的 12 列网格,这真的很无聊。 我看到一些网站,它们看起来都不错,很酷,但它们看起来非常四四方方,而且是 Bootstrap 的基础,Yahoo PureCss 是令人惊叹的 UI 套件,轻巧且易于使用修改,最重要的是,以 WordPress 为主题的工作速度非常快! 我将它用于 4 个带有 YUI PureCss 的 WordPress 项目,客户在从 Bootstrap 切换后感到惊讶,首先注意到的是网站的速度,其次是默认漂亮的 FLAT 设计。