Hello, Flask!
首发于Hello, Flask!

让你的Web项目好看起来!

简单和好看,两个都要

想起来刚学Python的时候,学了很长时间还是在黑黑的窗口里输出字符,感觉很没劲。用Tkinter做了第一个GUI窗口时,虽然显示的都是“Hello,World”,却感觉这个要漂亮多了(肤浅!)。后来学Web开发,发现CSS真让人头疼,别人网站上的一个小效果就要查半天才能实现。简单和好看,总是走不到一起,直到发现了Bootstrap,世界美好了。

学习初期,尽量把时间和精力放在实现后端功能上。可以多使用前端框架和库来减少劳动量,比如Bootstrap和jQuery。但也要了解CSS和JavaScript,要不用起来也会有困难。等到有了时间,就好好补一下基础,避免过度依赖框架。



好看很重要

长相天生,项目的外观却由你决定。尽管不是自己实现的效果,但看到自己的APP美观大方,你会不顾一切的在脑子里形成一个“我创造了美好的事物”的念头,由此带来的巨大的成就感会激励你继续学习(和自恋)下去。而且,你的外行朋友们会对你一脸崇拜~

我想大家对Bootstrap应该很熟悉了,但是因为它太流行了,很多人照着《Flask Web开发》做出来的博客从功能到外表,全都一个模样……

那么,我就来推荐三个不同风格的优秀的CSS框架。



Materialize —— Material Design风格

Documentation - Materialize

Google(design.google.com)在2014年推出了一个设计语言——Material Design(译作“原质化设计”,“质感设计”或是“原质设计”),代号是Quantum Paper(量子纸)。看看下面这张图片你就明白了,这些卡片和圆形悬浮按钮你肯定不陌生:

Materialize就是基于Material Design的CSS框架(同类的还有一个Material UI),使用它你可以轻松做出来很清新的页面效果。专栏下一个实践项目(to-do list App)用的就是这个框架,我找来了另一个同样使用Flask做的to-do list App,做个简单对比:

这是使用Bootstrap的页面:

这是使用Materialize的页面:

另外,评论区知友@刘二强烈推荐了Google自家的Material Design Lite

Semantic-UI —— 语义化

Semantic UI

Semantic-UI是一个语义化的前端框架,因为它是围绕自然语言架构的,所以使用起来也很方便。看看下面这个例子你就可以理解它的语义化特点了:

再举个例子,在Bootstrap你想创建一个蓝色按钮,你需要这样:

<button class="btn btn-primary btn-large">Hello!</button>

在Semantic-UI里,只需要这样:


<button class="ui blue button large">Hello!</button>

不光对搜索引擎友好,而且很容易理解和使用。

而且Semantic-UI的按钮很丰富:



Pure —— 轻量级

Pure

Bootstrap是Twitter推出的开源框架,而Pure是Yahoo!推出的开源框架。它的特点是纯CSS实现,而且体积很小,整个框架压缩后只有5.7k左右。这是一个典型页面:


如果你已经习惯了Bootstrap,不想尝试新东西,那么可以尝试基于Bootstrap的Flat UI(扁平化UI工具包)和Bootswatch(提供了各种Bootstrap主题)。



网页背景图片

顺便推荐两个网页背景网站。

背景纹理:subtlepatterns.com/

第一个网站提供了很多好看的纹理图片(数量更多和质量更好):


透明纹理+自定义颜色:transparenttextures.com

后一个网站提供了很多透明纹理,你可以自定义背景颜色,且支持定制不同设备的壁纸:

二者均可免费下载。


快动手让你的Web项目变漂亮一点吧,下次谈谈怎么让你的Web项目变得有趣起来。


- - - - -

更多关于Flask和Web开发的优质原创内容,欢迎关注Hello, Flask! - 知乎专栏

文章被以下专栏收录

    大家好,我是李辉,一个Python程序员。在这个专栏,你会看到我学习和使用Flask的经验和总结,你还会看到我所有的发明创造,以及它们的实现方法。 欢迎加入这场Flask之旅,拿好你的小键盘,上车吧! Github Organization:https://github.com/helloflask