诸如 Bootstrap 或 HTML5 样板之类的 Web 框架是否为设计人员(而不是开发人员)提供了任何东西?

平面设计 网站设计 css 网站模板 html
2022-01-01 05:21:09

请注意,这是关于设计而不是开发。

我使用完全手写的 CSS 和 HTML 从头开始​​构建网站。

一段时间以来,我已经了解了诸如BootstrapHTML5 Boilerplate 之类的预构建 css 模板。我过去曾简短地看过它们,但从未真正将它们用于任何事情。我在重置 CSS 或在需要时包含 javascript 或配置视口时没有任何问题。

今天晚上,我编写了一个基本的 HTML5/CSS 页面。在布局方面没有什么真正惊天动地的。简直就是一个起点。之后,我决定试一试具有相同布局的 Bootstrap。这是一个非常标准的 960 像素,3 列的英雄图像页面。

页

当我改变 Bootstrap 时,我突然想到,我 80% 或更多的时间都花在了学习什么类或 id 被应用到某个东西上,然后在 CSS 中找到它来调整。很明显,Bootstrap 根本不会救我。事实上,由于 *overly 模板化的 CSS,Bootstrap 会大大增加生产时间。

*(“过度模板化”是指我可能不会将大量 CSS 用于任何给定的网站。并不是说整体上没有不必要的 CSS。

我知道,如果我熟悉 Bootstrap,我就会熟悉样式表中的类/ID 名称和一般位置。所以,我愿意在它花费我的时间里稍微弯腰,意识到其中一些是由于我自己的不熟悉。

但是,我不禁想知道 Bootstrap 等。人。只是拐杖,它们通过勺子喂给他们自己品牌的代码来削弱设计师。因此锁定了一个完全依赖第三方解决方案的消费者群,它的功能适用于一切,或者至少是大多数。它让我想起了那些只能使用 Dreamweaver 才能设计网站的人。如果他们无法访问 Dreamweaver 并且需要进行更改,那么天堂禁止他们这样做。

当我建立一个站点时,我使用我自己的一组标准类和 ID 名称。我构建 CSS 对我来说是多么直观。我有一套自己的预构建模板,用于快速设置。因此,我建立的任何网站都可以相当快地进行编辑。使用任何预配置的前端包只意味着我需要了解它们的命名约定和它们的结构,而不是依赖我自己的。

  • 任何人都可以向我赞美BootstrapHTML5 Boilerplate等模板系统的伟大优点吗?
  • 是什么让它们对你有价值?
  • 您是否只是熟悉您使用的系统以便可以轻松浏览它,还是您仍然需要寻找物品?
  • 如果必须的话,你能在没有它们的情况下建立一个网站吗?
4个回答

优势往往主要是:

  • 快速原型制作(即速度)
  • 内置跨浏览器一致性

如果您需要创建一个网格,并且您需要创建的网格适合预先构建的 CSS 框架,那么逻辑是您使用该框架已经成功了一半。

说了这么多,我倾向于同意你的看法。CSS 框架,恕我直言,就像可视化设计模板,如果它们满足您 90% 的目标,它们就很棒,但如果它们不满足,那么您将花费更多的时间和精力来修改默认值而不是仅仅构建你自己的从头开始。

附录:

我应该再添加一个潜在的好处:

  • 这是一个记录在案的系统

在企业环境中,您可能有多个前端开发人员,并且项目可能跨越数年,有多个不同的前端开发团队,拥有文档化的底层表示层框架会有所帮助。

这并不是说您自己的自制框架无法记录,只是文档通常不是优先事项。

我熟悉 HTML5 Boilerplate,但我更熟悉 Bootstrap,所以我会谈谈。请记住,两者都针对两个不同的任务,(H5BP 是响应式规范化模板,Bootstrap 是 HTML/CSS/JS 小部件和响应式网格的集合。)实际上它们可以一起使用

但是,我不禁想知道 Bootstrap 等。人。只是拐杖,它们通过勺子喂给他们自己品牌的代码来削弱设计师。因此锁定了一个完全依赖第三方解决方案的消费者群,它的功能适用于一切,或者至少是大多数。它让我想起了那些只能使用 Dreamweaver 才能设计网站的人。如果他们无法访问 Dreamweaver 并且需要进行更改,那么天堂禁止他们这样做。

类比在这里失败了,因为您可以完全访问 Bootstrap 源代码。如果你不喜欢某样东西的工作方式,你可以改变它。对我来说,它与拐杖相反——你可以使用源代码来学习css 技术。

我不同意“设计网站”需要如此接近金属,就像我认为 C 编码人员需要对汇编语言有深入了解一样。尽管即使是这个类比也无法实现,因为调整 HTML/CSS 只是扩展选择器并添加所需内容的问题。

任何人都可以向我赞美 Bootstrap 或 HTML5 Boilerplate 等模板系统的伟大优点吗?

对我来说,Bootstrap 的杀手级功能是一致且易于应用的小部件样式和 Javascript 组件。想要一个链接看起来像一个按钮?添加一个“.btn”类。想要一张桌子?添加一个“.table”类。想要导航元素?设置无序列表并添加导航类。

下拉菜单、弹出框、警报等很容易添加到具有数据属性的元素中。Bootstrap 包含一组非常漂亮的图标,可以轻松集成到小部件中。

是什么让它们对你有价值?

  • 可以快速原型网站
  • 跨浏览器和跨平台css的所有调试都已经帮我完成了。
  • 使用多种变量轻松自定义 CSS,因此我可以快速试验和原型布局。
  • 标准导航小部件
  • 源代码开放且免费,如果我需要新的 mixin 或以我需要的方式改变行为,我可以亲自动手并自定义 LESS。

您是否只是熟悉您使用的系统以便可以轻松浏览它,还是您仍然需要寻找物品?

Bootstrap 的最大特点之一是其出色的文档我可以轻松浏览它,并且 css 选择器直观且易于记忆。

如果必须的话,你能在没有它们的情况下建立一个网站吗?

是的,但显然工作量更大。我可以专注于 UX 和快速原型布局,并具有美观的小部件和一致的功能。

模板系统和框架的好处是,如果您按照他们希望的方式工作,它们可以为您节省大量时间因此,使用 Bootstrap,一旦你了解了它们用于 JS 轮播的语义,实现起来几乎是极其简单的。此外,如果您在开始之前自己动手或者在 Rails 中使用类似bootstrap-sass的东西来动态更改这些变量,Bootstrap 似乎会变得更简单。它将使您免于以后更改所有内容。

DA01 谈到了浏览器的一致性……这对我来说是一个重要因素。这就是我使用 jQuery 的原因,尽管 SO 的许多人会提醒您添加一个大型库只是为了做一些事情是浪费资源。我知道当我使用 jQuery 时,它可以在特定的浏览器集合中工作,因此即使我自己可以实现更轻量级的解决方案,我发现了解 jQuery 希望我如何编写更有益JavaScript,然后按照他们的方式去做。

最后,我倾向于发现 HTML/CSS 框架具有限制性。我已经够控制狂了,我仍然喜欢在可能的情况下手动编写代码。但是,我尊重这样一个事实,即比我更聪明、更先进的人花了很多时间来设置这些模板/框架。

上个月左右我一直在研究框架。我实际上并没有深入研究任何解决方案,但我的候选名单上的几个框架替代方案是FoundationIntuitYAMLBase

这些的好处是它们没有“引导”外观,并且似乎鼓励设计师从事他们的工作(设计),同时他们照顾响应能力。

这是本文中的框架列表和更多信息

如前所述,我已经完成了研究工作,但还没有开始测试它们,所以任何支持任何框架的评论都会有所帮助。