🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 思源笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

精选 15 个国外 CSS 框架

什么是css框

实际上还是让我 们从框架说起吧
框架就是一个 你可以用于你的 网站项目的基本 的概念上的结构 体。

css框架通常 只是一些css 文件的集合,这 些文件包括基本 布局、表单样式 、网格或简单结 构、以及样式重 置。比如:

  • typogra phy.css  基本排版规则
  • grid.cs s 基于网格的 布局
  • layout. css 通常的 布局
  • form.cs s for 表 单样式
  • general .css 更多 通用规则

您还可以参考以 下前端开发/C SS相关资源:

推荐12款可用 于前端开发的免 费文本编辑器
Web前端开发 必备手册下载
推荐20个让你 学习并精通CS S的网站
300+Jqu ery, CS S, MooT ools 和 JS的导航菜单 资源

下面一起来了解 一下各种不同的 CSS框架吧:

1. 960 Gri d Syste m

CSS-框架-960

960网格系统 是一个通过提供 通常使用的尺寸 简化网站开发流 程的努力的结果 ,基于960像 素的页面宽度。 它有两种类型, 12和16列, 他们可以独立使 用或是协同使用

2. WYMstyl e CSS F ramewor k

CSS-框架-WYMstyle

这个项目的目的 是提供一组经过 良好测试的模块 化的CSS文件 ,能够用于网站 的快速设计。W YMstyle 是一组 CSS 文件,你可以很 容易的组合这些 文件来快速的创 建你的网站的布 局。通过提供可 靠的、经过良好 测试的CSS模 块,WYMst yle 力求让 每个网站防止枯 燥的跨浏览器兼 容性测试。

3. YAML CS S Frame work

CSS-框架-YAML

Dirk Je sse的强大的 (X)HTML /CSS框架为 许多的简单或更 复杂的网站项目 提供完整的默认 模板包。YAM L基于网页标准 并支持所有现代 浏览器。所有的 Intern et Expl orer的主要 渲染漏洞都被解 决。YAML 完全支持从5. x到7.0的所 有的IE版本。

4. YUI Gri ds CSS

CSS-框架-YUI

基本的YUI网 格CSS提供4 种预设的页宽、 6种预设模板和 再分为2、3、 4卷的区块的功 能。 这个4K B的文件可提供 超过1000中 页面布局组合。

有国外作者曾指 出YUI Gr ids CSS 中最值得学习的 网格布局CSS 写法:

  • 负Margin 技术
  • 使用度量单位e m
  • 清除布局的浮动

5. Logicss  Framew ork

CSS-框架-logicss

Logic C SS 框架是用 来减少开发符合 web标准的x HTML布局的 时间的一个由C SS文件和PH P程序组成的集 合。通常跨浏览 器表现行为(不 是Meyer的 reset文件 或是用“*”) ,排版支持文本 字体大小调整( 使用EMs) 和垂直居中,符 合可定义的灵活 的布局网格利用 css代码生成 工具

6. CleverC SS

国外-CSS-框架

CleverC SS是一个用于 css的受Py thon启发的 小型的标记语言 ,它可用于以整 洁的和结构化的 方式创建一个样 式表。在很多方 面它都比CSS 2整洁和强大。 与CSS最明显 的区别是句法: 它基于缩进而且 不单调。虽然这 显然违反了Py thon的规则 ,它依然是组织 样式的很好的主 意。

7. Element s CSS F ramewor ks

CSS-框架-elements

Element s 是一个实用 的CSS框架。 它是为了帮助设 计师更快更高效 的来写CSS而 建立。Elem ents 已经 超越了仅仅作为 一个框架,它有 自己的项目工作 流。它拥有你完 成项目所需的所 有东西,这也让 你和你的浏览者 感到愉悦。阅读  概述 了解更多。

8. Bluepri nt CSS

CSS-框架-blueprint

Bluepri nt 是一个  CSS 框架 ,它的目的是减 少你的css开 发时间。它提供 一个可靠的cs s基础去创建你 的项目,BP由 一个易用的网格 、合理的布局和 一个打印样式。

9. Schema Web Des ign Fra mework

CSS-框架-schema

Schema 是一个为了提 供在重复的设计 任务中必须的C SS和HTML 标签而设计的表 现层的网页框架 设计。 与为每 一个新的网站项 目从零开始创建 HTMl/CS S不同,Sch ema提供必要 的基础来开始并 立马让你的设计 跑起来。

10. Emastic CSS Fr amework

CSS-框架-emastic

Emastic  是一个CSS 框架,它有连续 的任务:探索陌 生的新世界,寻 找新生活和新的 网站空间,大胆 的去CSS框架 尚未到达的领域 。它是轻量的、 在页面宽度上比 较人性化,在网 格中使用固定和 不固定的列宽。 Elasti c 用“em” 布局。

11. That St andards Guy CS S Frame work

CSS-框架

* 只能调用单 个样式文件
* 主样式需 要取得CSS认 证(WCAG 1.0);
* 跨浏览器 兼容性—包括I nternet Explor er (IE) 5.x fo r Mac;
* IE H acks使用独 立文件;
* 快速创建 模板;
* 少量注释 /实例演示,可 以节省时间来理 解。

12. Content with S tyle Fr amework

CSS-框架-content

下一个逻辑步骤 就是将这个扩展 为CSS框架, 允许使用写好并 通过测试的组件 来快速开发网站 。实际上所需的 是搞定一套命名 习惯和一个灵活 的基本模板…

13. Boilerp late CS S Frame work

CSS-框架-boilerplate

14. ESWAT W eb Proj ect Fra mework

CSS-框架-eswat

ESWAT正在 重新整理。如果 你是冲着我的网 站框架来的,那 么你就可以在这 里下载。也许你 也想看看我的其 他项目gmac hina、Ap pleSeed

15. Tripoli CSS Fr amework

CSS-框架-tripoli

Tripoli 是一个用于HT ML表现的通用 css规范。通 过重设和重建浏 览器标准,Tr ipoli 为 你的网站项目提 供了一个标准的 、跨浏览器表现 的基础。

彬Go会经常更 新前端开发/网 页设计等相关技 术及教程文章, 欢迎 订阅本博客 来及时浏览本博 客的最新教程及 资源。

英文原文: CSS Fra meworks
翻译原文: css框架收集


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步