3个开源样板网页设计模板

图片来源

Jason Baker for Opensource.com.

在过去，从头开始创建一个网站很容易。

只需对 HTML 有基本的了解，也许再加一点 CSS，你就可以毫不费力地搭建一个相当实用的网页。把它放到你的 Web 服务器上，一切就搞定了。

<html>
  <head>
    <title>My awesome webpage</title>
  </head>
  <body>
    <h1>This site is awesome!</h1>
    <p>And I coded it from scratch.</p>
  </body>
</html>

当然，你今天仍然可以像这样编写一个页面。改变的是期望，无论好坏。随着互联网连接速度的提高，以及浏览器变得更加标准化和强大，人们对 Web 的要求也越来越高。网站的规模和复杂性也越来越大，我们经常看到，即使是熟悉原始 HTML 和 CSS 的经验丰富的设计师，也会使用具有高级功能的设计工具和代码编辑器，只是为了保持一切井井有条。

今天，很少有人从头开始设计他们的网页。大多数人选择使用预先构建的模板设计，并为他们选择的内容管理系统量身定制。即使是构建复杂 Web 应用程序的开发人员也开始依赖模板库来组装他们应用程序的大部分内容。

但是，如果你想为你的内容管理系统或静态网站生成器构建一个新的模板呢？如果你想构建一个简单的网站，只有一个登录页面，或者少量不太可能经常更改的静态页面呢？如果你想编写一个 JavaScript 应用程序，但又不想使用复杂的框架或库来构建最终的输出呢？

仍然有一百万个理由需要手动编写网页。对我来说，最重要的原因是控制。随着时间的推移，网页变得越来越臃肿。但是，当你从头开始设计一个页面时，更容易省略你并不真正需要的东西。我真的需要加载 Web 字体才能使此页面看起来不错吗？jQuery 是我需要的东西吗，还是几行Vanilla JS 可以完成同样的事情？是否可以使用一点SVG 代替复杂的图像？

与此同时，每次坐下来为 Web 设计一些东西时，都没有必要重新发明轮子。你可能希望在构建的每个页面上都有一些常见的元素，而像Sass 和 Less 这样的现代开发工具使得处理挑剔的 CSS 比过去容易得多。

由于这些原因，使用 HTML 样板模板和框架可以让你获得两全其美。它可以帮助为你的页面带来标准化、易于使用的布局网格和现代功能支持，但同时，它们通常也足够简单，可以消除你实际不使用的任何冗余内容。

以下是三个开源 HTML5 模板，供你考虑用于你的下一个 Web 项目。

Bootstrap

Twitter 的 Bootstrap 可能是用于创建新网页的最知名的模板框架之一。它的普及导致了一些 Web 设计社区的反弹，与其说是因为框架本身，不如说是由于在野外非常简单、几乎完全未定制的实现的普遍性。

但是，如果它被过度使用，这可能在很大程度上说明了它的实用性。Bootstrap 使创建响应式设计变得容易，并且开箱即用，具有许多功能：从图标到样式化的输入，并将标准化带到许多常见的页面元素，从面包屑到警报到分页。也有很多现成的主题，以防主题不是你的菜。

Bootstrap 可在 GitHub 上获得，并采用 MIT 许可证。

HTML5 Boilerplate

我个人最喜欢从新项目开始使用的是 HTML5 Boilerplate。它包含了我在任何新 Web 项目中最终添加的大部分元素：用于分析的代码片段，我最终忘记查找的所有各种图标大小，以及一些默认的 CSS 和 JavaScript 模板，这些模板帮助我保持井井有条。

但它也相当轻量级，如果我不需要项目的特定组件，很容易将其删除并且永不回头。如果你正在寻找简约和功能齐全之间的平衡，HTML5 Boilerplate 可能会为你找到最佳位置。

HTML5 Boilerplate 在 GitHub 上获得，并采用 MIT 许可证。

Skeleton

Skeleton 是最轻量级的框架。大约 400 行代码，也很容易使用。如果你以前使用过 Web 框架，并且发现它们对于你所需要的来说过于庞大或只是矫枉过正，那么 Skeleton 提供了一些很好的骨架（哈哈！）来使用：一个简单的网格；格式精美的表单、列表、表格。排版和其他基本元素；以及跨浏览器支持。其余一切由你决定。

Skeleton 在 GitHub 上获得，并采用 MIT 许可证。

你应该使用其中之一吗？

我的建议是四处逛逛，尝试一些选项，然后使用最适合你需求的选项。讨厌所有这三个选项？还有很多其他选项。如果你将大量时间用于为 Web 创建内容，请考虑构建一个通用的 Web 模板，该模板适合你。尽管有些人可能会让你认为，你不需要一个复杂的 JavaScript 框架来构建一个简单的前端，无论是传统的资讯页面还是轻量级的 Web 应用程序。

你还可以查看 Initializr，这是一个开源 Web 应用程序，可以预先配置 HTML5 Boilerplate（无论是经典页面还是响应式页面）或 Bootstrap，仅包含你需要的选项。

那么你呢？你是否有自己喜欢的 Web 设计模板或框架？或者你对 Web 设计采取了不同的方法？请在下面的评论中告诉我们。

标签

Web 开发