后台模板 开源

在过去,从头开始创建网站很容易。

有了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 >

当然,今天您仍然可以对这样的页面进行编码。 期望无论好坏,都在改变。 随着Internet连接速度的提高,浏览器变得更加标准化和强大,人们对Web的要求越来越高。 随着网站的规模和复杂性的增长,越来越多的人甚至看到有经验的设计师,他们对使用原始HTML和CSS感到满意,他们使用设计工具和具有高级功能的代码编辑器来确保所有内容的完整性。

如今,很少有人从头开始设计网页。 大多数人选择使用预构建的模板设计,以适合其选择的内容管理系统进行自定义。 即使是开发复杂的Web应用程序的开发人员也开始依赖于模板库来将大多数应用程序组合在一起。

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

仍然有100万个理由手动编码网页。 对我来说,最重要的原因是控制。 随着时间的流逝,网页变得越来越肥胖 。 但是,当您从头开始设计页面时,可以省去一些您不需要的东西。 我真的需要加载网络字体才能使此页面看起来不错吗? jQuery是我需要的东西,还是可以用几行Vanilla JS完成同一件事? 可以使用SVG代替复杂的图像吗?

同时,每次坐下来为Web设计东西时,都没有必要重新发明轮子。 可能在构建的每个页面上都有一些共同的元素,而现代开发工具(如Sass和Less)使处理复杂CSS变得比以前容易得多。

由于这些原因,使用HTML样板模板和框架可帮助您将两全其美。 它可以帮助为页面带来标准化,易于使用的布局网格和现代功能支持,但同时,它们通常非常简单,可以减少您实际上不使用的任何内容。

这是三个开源HTML5模板,供您在下一个Web项目中考虑。

引导程序

Twitter的Bootstrap可能是用于创建新网页的最著名的模板框架之一。 它的普遍存在导致Web设计社区中的一些人强烈反对,这并不是因为框架本身,而是因为非常简单,几乎完全非定制化的实现普遍存在。

但是,如果它已被过度使用,那么它的作用可能说明一切。 Bootstrap使得创建响应式设计变得容易,并且具有许多开箱即用的功能:从图标到样式输入,并使标准化成为许多常见页面元素的一部分,从面包屑到警报再到分页。 万一主题不关你的事,那么这里还有很多现成的主题。

Bootstrap在MIT许可下可在GitHub上 使用 。

HTML5样板

我最喜欢的一个新项目是HTML5 Boilerplate 。 它包含了我最终添加到任何新的Web项目中的大多数元素:分析代码段,我最终忘记查找的所有各种图标大小,以及一些可以帮助我保留的默认CSS和JavaScript模板有条理。

但是它也相当轻巧,如果我不需要项目的特定组件,那么将其剪裁就很容易了,并且永远不会回头。 如果您想在简约与功能齐全之间寻求平衡,HTML5 Boilerplate可能会为您带来最佳效果。

HTML5 Boilerplate已获得MIT许可, 位于GitHub上 。

骨架

骨架是同类产品中最轻的框架。 重约400行代码,使用起来也非常容易。 如果您以前使用过Web框架,却发现它们过于庞大或无法满足您的需求,Skeleton可提供一些良好的基础知识(哈!)来使用:简单的网格; 格式良好的表格,列表,表格。 版式和其他基本元素; 和跨浏览器支持。 其他一切都取决于您。

Skeleton在MIT许可下位于GitHub上 。


您应该使用其中之一吗?

我的建议是货比三家,尝试一些选择,然后使用哪种选择最适合您的需求。 讨厌这三个选项吗? 还有很多其他选择 。 并且,如果您花费大量时间用于网络创建,请考虑构建一个适用于您的通用网络模板。 尽管您可能会有一些想法,但无论是传统的信息页面还是轻量级的Web应用程序,都不需要复杂JavaScript框架来构建简单的前端。

您还可以签出Initializr ,这是一个开放源代码Web应用程序,可以仅将HTML5 Boilerplate配置为经典页面或响应页面,或者将Bootstrap预先配置为仅具有所需选项。

那么你呢? 您是否有喜欢的网页设计模板或框架? 还是您完全采用其他方法进行网页设计? 在下面的评论中让我们知道。

翻译自: https://opensource/article/17/4/boilerplate-web-design-templates

后台模板 开源

更多推荐

后台模板 开源_3个开源样板网页设计模板