CSS Grid Layout(网格/栅格布局)是 CSS 最强大的布局系统,随着设备和浏览器的升级,将会是未来的主流的布局方案之一。
一、介绍(Introduction)
概述(Basic)
CSS Grid Layout 简称为Grid
,网上普遍译为网格
,其实更规范的说法应为栅格
。
栅格
对有经验的 UI 和 FE 来说并不陌生,肯定会想到栅格系统(Grid Systems)
。
这“系统”早在欧洲中世纪就已经出现,当时主要用于文字排版,随着时间的推移逐步发展到平面及其他“设计”领域。
在我印象中 08~09 年左右,网页栅格化设计(Grid Design)
已经出现并被广泛使用,所定义的12栅格
、24栅格
等规范方案仍一直被沿用至今。用通俗的方式来讲:就是以一定规则的网格阵列,规范化网页布局。
CSS Grid包含了
栅格化设计的特性,是第一个专门为解决布局问题而创建的CSS 模块
。如果你熟悉栅格系统
和栅格化设计
那对栅格布局
的理解会起到一定帮助。
好的栅格布局,对于模块、元素而言都有规律可循,能在不同尺寸/分辨率下呈现最优的方式,使网页更灵活和易于扩展。但同时也考验设计师,对于不同尺寸的把握,针对前端来说也是如此。
之前使用栅格需要用到Bootstrap
等的框架,并且每个框架都有一套属于自己的栅格规范
,现在网格布局使我们可以更为简单的实现,无需依赖框架。 [ 查看全文... ]
随着最近把 nodejs 从 8.x
升级到了 10.x
,发现 Gulp3.x
早已经不能兼容新版的 node,并且环境中的部分依赖,也已经被淘汰。
于是趁此机会,把 Gulp 升级为 4.x
版本,并把整个环境重新改造了一下。
现已经发布至 Github 和 NPM 作为不定期维护的一个项目。关于后续更新和维护情况,请关注本项目的:GitHub 和 NPM 。
如果你刚接触 Gulp,可以查看我以前写的文章 Gulp构建前端自动化工作流(Gulp入门介绍)。
[ 查看全文... ]
之前主要使用Vue CLI 2.x
来搭建项目,正好遇到新的项目,便尝使用Vue CLI 3
来进行构建,玩了小半年之后抽空整理下文档。
简介
Vue CLI 作为 Vue 的官方脚手架,降低了开发者对于 webpack 的配置成本,便于快速构建项目。具体的介绍在官方文档中写的十分详细,此处就不唠叨。
用一个通俗的比喻来说,把项目作为一份晚餐:食材(vue)虽都有,可但油盐酱醋(webpack)怎么配比,并非一下就能掌握。而 Vue CLI 就像是成品大礼包,198、298、398自由搭配,营养均衡开袋即食。并且附带料包自由调整(配置),也能加热享用(可升级)。并且 Vue 是渐进式框架,需求(基础插件)无法满足时,可单独外卖(Plug-in)加餐。
[ 查看全文... ]
CSS BEM 解读
概要
BEM 分别代表着:Block(块)、Element(元素)、Modifier(修饰符),是一种组件化的 CSS 命名方法和规范,由俄罗斯 Yandex 团队所提出。其目的是将用户界面划分成独立的(模)块,使开发更为简单和快速,利于团队协作开发。
特点
- 组件化/模块化的开发思路。
- 书写方式解耦化,不会造成命名空间的污染,如:
.xxx ul li
写法带来的潜在嵌套风险。
- 命名方式化扁平,避免样式层级过多而导致的解析效率降低,渲染开销变大。
- 组件结构独立化,减少样式冲突,可以将已开完成的组件快速应用到新项目中。
- 有着较好的维护性、易读性、灵活性。 [ 查看全文... ]
微信小程序,可以说是近半年来开发和运营者们讨论最多的话题之一。
自己也尝试入坑玩了一把,感觉还挺有意思,非常适合生活服务和阅读类项目。
对于微信小程序的一些理解 :
小程序正如其名,小/轻,是一套独立封闭程序。
和以往开的发有2个最大不同:无法使用DOM,不基于window、document。所以<div>
等HTML标签,都需通过<view>
、<text>
等组件来实现,常用的jQuery、Zepto等JS框架也都无法使用。
[ 查看全文... ]
最近看到篇文章很有同感,很多时候想学习一些东西,会被一堆堆的代码所困扰,很难去读懂和理解。而用一个个小Demo的形式了解起来就更为直观,产生兴趣之后学起东西就自然相对轻松。
Demo1:创建基本形状
SVG 预定义了7个基本元素:circle 创建圆形
、rect 创建矩形
、ellipse 创建椭圆
、line 创建线条
、polyline 创建折线
、polygon 创建多边形
、path 创建路径
。
其中 path 可进行填充、勾划(沿着路径绘制直线),也可用作剪切路径(其他形状的图样),是所有绘图元素中最复杂的。
[ 查看全文... ]