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

图片来源：

Jason Baker 为 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 开发