frontend

A collection of 12 posts
frontend

PostCSS - A tool for transforming CSS with JavaScript

PostCSS 是一个使用 JS 插件转换 CSS 样式的工具。这些插件可以检查(lint)CSS,支持 CSS Variables 和 Mixins,编译尚未被浏览器支持的先进的 CSS 语法,内联图片,以及其它很多优秀的功能。 PostCSS 在工业界被广泛地应用,其中不乏很多有名的行业领导者,如:维基百科、Twitter、阿里巴巴、JetBrains。PostCSS 的 Autoprefixer 插件是最流行的 CSS 处理工具之一。 PostCSS 接收一个 CSS 文件并提供了一个 API 来分析、修改它的规则(通过把 CSS 规则转换成一个抽象语法树的方式)。在这之后,这个 API 便可被许多插件利用来做有用的事情,比如寻错或自动添加 CSS vendor
6 min read
frontend

BrowserSync 页面自动重载工具

网站前端开发过程中,每一次修改代码,都要手动刷新浏览器才能看到页面的变化。有了 LiveReload 工具就通过程序维护一个本地的静态服务器,实现静态资源变化,浏览器自动重新刷新的功能。 Python 下面有个名为 httpwatcher 工具,直接在静态资源根目录执行 httpwatcher 就可以实现页面变更自动刷新。 刚刚又找到一个 NodeJS 环境下的实现 BrowserSync,可以和 gulp 混合使用,相比要更灵活。 安装 Linux 环境下以普通用户身份安装时通常需要 sudo,因为模块默认会存放在 /usr/lib/node_modules 目录,另外还需要创建软连接到 /usr/bin 目录,普通用户没有这些权限。 $ sudo npm install -g browser-sync 快速使用 静态站点 $ browser-sync start --server --files "css/
1 min read
frontend

UIkit 官方文档离线部署

毕竟项目官网在国外,网络条件不好的时候,离线文档就显得比较有用了。 克隆仓库 $ git clone https://github.com/uikit/uikit-site.git 满足包依赖 $ cd uikit-site uikit-site $ yarn 编译安装 uikit-site $ yarn setup 在本地跑起来 我喜欢用 Python,所以一个命令就能把本地的离线版本跑起来: uikit-site $ python3 -m http.server 8080 Serving HTTP on 0.0.0.0 port 8080 (http://0.0.0.0:8080/) ... 本地访问 http://0.0.
frontend

HTML img 标签居中显示的方法

往常居中 img 标签,我会直接在父级标签上添加 text-align: center;,但今天碰到的情况是编辑器直接把 img 加入到了正文,即与段落 p 标签同级,同属于一个正文 div 标签。 直接在 div 上设置文本居中势必影响其他的子标签,当然也可以在编辑器上动手,比如让编辑器自动给 img 套一层 p 标签之类的,但真心杀鸡牛刀。如果能直接对 img 进行居中设置就最理想了,这里找到了一个方法,效果不错: #news-page { img { clear: both; display: block; margin: auto; } } 这里使用的是 less 语法,注意与 css 的不同。 Reference * Css设置img属性让图片水平居中/居左/居右的写法
1 min read
frontend

CSS 为 DIV 添加尖角样式

如上图,给 div 添加一个尖角样式。原理是用两个 div 叠加在一起形成该效果,一个 div 是普通的方框,另一个 div 则是通过给 4 个边设置一样粗的 border 形成四个三角形拼成的正方型,将其中 3 条边设置为透明,从而形成三角形的尖角。 // 白色小三角 .triangle { width: 0; height: 0; border-style: solid; border-width: 0 5px 8.7px 5px; border-color: transparent transparent #ffffff transparent; margin-left: 10px; } Reference * CSS triangle generator * CSS为div添加尖角样式
1 min read