HTML5/CSS3 无类框架

Question

HTML5/CSS3 无类框架

htmlcss

13

有没有人知道一个简单的HTML5/CSS3框架，它只应用最少的格式，并且不需要自定义类名？理想情况下，它只需要正确布局的HTML5，使用常见规则（例如侧边栏宽度等）就可以定位元素，具有最小灵活性。

使用HTML5时，很少需要自定义类名，有像

、

或

- Berislav Lopac

你想要没有类的CSS框架吗？ - Vladimir Starkov

1

个人而言，我使用 Twitter Bootstrap，我认为它设计得非常好，并且相当灵活。http://twitter.github.com/bootstrap/ - Dale

1

我想使用子选择器和兄弟选择器可能是可行的，但一旦需要更改HTML，它就像一堆纸牌一样不稳定。 - Diodeus - James MacFarlane

1

你所描述的更接近于CSS预处理器。尝试使用SASS。 - Madara's Ghost

1

我已经收集了所有我能找到的无类CSS样式表在这里，并最终将把列表添加到项目的README中。欢迎任何补充！ - waldyrious

8个回答

4

听起来你想要的不是CSS框架，而只是一个简单的自定义样式表。并不是为了打击你寻找已经存在的东西的努力，但是你最好自己编写它。也许可以从现有的reset.css之一开始。没有通过类名钩入（或钩出）的默认样式并不是非常灵活。

你真的不应该避免使用类，而应该利用它们。没有任何框架会根据标签名称单独知道HTML元素的嵌套位置和外观，这就是为什么我们通常使用类的原因之一。

如果你密切关注新的HTML5元素的语义，你会发现header并不总是指"带有logo的页面顶部"，footer不仅仅是整个页面底部的元素，aside也不总是等同于“侧边栏”。

- Wesley Murch

1

你是正确的，“样式表”比“框架”这个词更准确。 - Berislav Lopac

3

你可以使用HTML5 Boilerplate来启动你的HTML5应用程序。

Dan Wahlin发布了一篇关于设置它的好博客文章。

http://weblogs.asp.net/dwahlin/archive/2011/06/05/getting-started-using-html5-boilerplate.aspx

- David East

2

https://github.com/herrshuster/style.css

这是我目前的项目。虽然它还没有准备好部署，但它正是你想要的。如果你有任何建议或想要讨论它，我很乐意听取。

这是一个测试页面，你可以看到语义布局。

- Tyler Shuster

谢谢，这似乎是一个很棒的项目，我会进一步了解它！ - Berislav Lopac

2

在https://github.com/dbohdan/classless-css上有一份很好的无类和轻量级CSS主题列表，包含截图！此外，在https://dohliam.github.io/dropin-minimal-css/上使用下拉菜单可以预览几个不同的主题，很好地展示了它们各自的外观。

- weiji14

1

对于任何对此话题感兴趣的人，我建议阅读Heydon Pickering的文章，他构建了他的博客主题而不使用任何类。

我还建议查看我的项目，旨在为博客和类似博客的网站（每个网站都有标题、作者、页面、帖子和章节）创建一个基本无类HTML模板，并在其上添加纯CSS主题。该模板大量使用HTML5分段、头部和底部，并假定您应该将每个网站内容放在哪个部分中。主题是互联网上其他框架特定主题的移植。

有一个游乐场，您可以在基于基本模板的各种HTML页面上测试不同的主题（只需在框中输入主题名称或粘贴CSS URL）。我还写了一篇糟糕的老文章，试图思考这个主题。

- fiatjaf

1

我个人没有太多的经验，但你可能会发现Twitter Bootstrap很有帮助。它使用了一个网格系统，可以让你轻松地定位页面上的元素。这对于创建侧边栏和其他常见页面特性的区域可能特别有用。

然而，它与你所建议的相反，因为它非常重视类。不过从我所看到的来看，这些类被以非常结构化的方式处理，可能接近你所寻找的东西。

- Zhihao

我也是这么想的。它非常依赖类，但确实提供了出色的UI组件。 - David East

1

Pico CSS有一个无类版本，它完全符合您的要求。

- minder

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- oxalorg · Accepted Answer

我发现一个类似的需求并最终自己完成了这个项目： https://github.com/oxalorg/sakura。

您只需要放入sakura.css，就可以开始使用了，无需更改HTML代码。

这里有一个演示：https://oxal.org/projects/sakura/demo/。