金沙澳门官网网址_金沙国际登陆

欢迎加入金沙澳门官网网址体验更多不一样的精彩.,金沙国际登陆提供最丰厚回馈!,因为金沙澳门官网网址这里的游戏是多种多样的,为大家打造一个最专业的化的超级五星酒店。

金沙澳门官网网址 > 金沙澳门官网网址 > 如何编写轻量级金沙澳门官网网址:,设置选项

原标题:如何编写轻量级金沙澳门官网网址:,设置选项

浏览次数:72 时间:2019-10-12

奇妙的 CSS shapes(CSS图形)

2017/06/13 · CSS · 1 评论 · shapes

本文作者: 伯乐在线 - chokcoco 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

CSS 发展到今天已经越来越强大了。其语法的日新月异,让很多以前完成不了的事情,现在可以非常轻松的做到。今天就向大家介绍几个比较新的强大的 CSS 功能:

  • clip-path
  • shape-outside

shape 的意思是图形,CSS shapes 也就是 CSS 图形的意思,也就是使用 CSS 生成各种图形(圆形、矩形、椭圆、多边形等几何图形)。

CSS3之前,我们能做的只有矩形,四四方方,条条框框。

如何编写轻量级 CSS 框架

2017/08/08 · CSS · CSS

本文作者: 伯乐在线 - 叙帝利 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

金沙澳门官网网址 1

Github:

Demo: 

PostCSS深入学习:设置选项

2015/10/28 · CSS · POSTCSS

原文出处: Kezz Bracey   译文出处:大漠   

欢迎开启我们PostCSS深入学习系列之快入门指南。在这些初级教程中,可以让我们快速的了解PostCSS和如何最有效的使用PostCSS。

在这篇文章中,我们将先告诉你如何设置PostCSS选项,所以你现在开始使用PostCSS只要几分钟。接下来将告诉你如何在Codepen和Prepros中设置PostCSS。

马上让我们看看如何开始玩PostCSS。

CSS3

CSS3出来后,我们有了更广阔的施展空间,通过

  • border-radius
  • border
  • transform
  • 伪元素配合
  • gradient 渐变

我们能够作出非常多的几何图形。

除去最常见的矩形,圆形(border-radius),下面稍微列举一些其他几何图形:

前言

这篇文章我已经酝酿了半年之久,或者说拖沓了这么久吧。想说的东西很多,却又无从说起。如今轻量级框架如雨后春笋,层出不穷。我想每个人都应该归纳总结工作中的常见需求,编写一套适合自己的 CSS 框架。在之前的文章中,我提到了面向对象的 CSS(比如 BEM、OOCSS、SMACSS,详见 )。这是一种思想,并不涉及具体的 CSS 问题,主要是类命名的策略!现在仍然有很多人对于前端框架的认识还停留在表面,认为 Bootstrap 是后端人员专用,前端没必要等等。我不知道这种说法从何而来,我最开始也不喜欢使用框架,或许和很多人的想法一样,畏惧新知识、害怕难以驾驭、遇到问题的时候无法解决等等。最关键的一点是很多人认为框架的样式是固定的,修改起来太麻烦,还不如自己根据设计图写起来方便。

CodePen中设置PostCSS

如果你是第一次接触PostCSS,那么通过CodePen来使用它是最快方式。

CodePen已预先集成了PostCSS,并且还支持下面所列的PostCSS插件:

  • cssnext
  • postcss-simple-vars
  • postcss-discard-comments
  • postcss-custom-media
  • postcss-media-minmax
  • postcss-conditionals
  • postcss-each
  • postcss-for
  • postcss-nested
  • postcss-transform-shortcut

这些插件可以让你支持未来的CSS语法、像Sass一样的函数、注释的删除和代码的缩写等等。

首先在CodePen在线编辑器上点击”NewPen“创建一个新的页面。然后单击CSS窗口左上角的小齿轮图标,在弹出的面板中设置。

金沙澳门官网网址 2

单击“CSS Preprocessor”下拉选项,你可以选择下拉选项中的“PostCSS”选项。你也可以在”Vendor Prefixing“中选择“Autoprefixer”插件。

金沙澳门官网网址 3

然后你可以点击“Need an add-on”按钮,在弹出的面板中选择你需要的插件。在弹出的面板将会显示@规则插件,复制粘贴这些@规则对应的PostCSS插件到你的CSS面板中,并且开始使用。

金沙澳门官网网址 4

三角形

通常会使用透明的border模拟出一个三角形:

.traingle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid yellowgreen; }

1
2
3
4
5
6
7
.traingle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid yellowgreen;
}

金沙澳门官网网址 5

为什么使用框架

为什么使用框架?答案显而易见,效率。除此之外,使用框架或者研究框架的意义还有很多,比如面向对象思想的具体实现。在上一家公司工作的时候,开始的几个项目我也是用最原始的方法书写 CSS 。项目之中最让我头疼的就是类的命名。我想大多数人都是根据功能去命名,这就造成了很多的冗余,相同的组件可能写很多次。简单举一个例子,如下图,个人中心的登录界面。

金沙澳门官网网址 6

很多人包括我刚开始的时候可能会选择下面的类命名及布局方式,其通用性非常差

JavaScript

<div class="login-area"> <div class="login-img">     <img src="..." />   </div> <div class="login-text">     <a href="...">请点击登录</a>   </div> </div>

1
2
3
4
5
6
7
8
<div class="login-area">
    <div class="login-img">
    <img src="..." />
  </div>
    <div class="login-text">
    <a href="...">请点击登录</a>
  </div>
</div>

然而了解 Bootstrap 的人应该一眼就发现上图就是一个 media 对象,无非一些小细节需要调整一下

JavaScript

<div class="media"> <div class="media-left"> <img src="..." /> </div> <div class="media-body media-middle"> <a href="...">请点击登录</a> </div> </div>

1
2
3
4
5
6
7
8
<div class="media">
    <div class="media-left">
        <img src="..." />
    </div>
    <div class="media-body media-middle">
        <a href="...">请点击登录</a>
    </div>
</div>

为了让文字与图片居中对齐,我们可以使用 Bootstrap 的 .media-middle 的辅助类。如果在工作中还要根据需求自定义一些辅助类调整细节,当然这是一个移动端的例子,可以选择移动端框架相关的 media 对象。

另外,在项目改版的时候,原始的方法的修改更是惨不忍睹,可以说是噩梦,冗长的 CSS 文件、混乱的功能划分、类名、色值等等。最后也只能硬着头皮一点一点修改。那一刻我才体会到框架的意义以及前端工具的重要性。我从工作中总结出,要么你可以熟练的使用某一个框架,要么就自己实现一个框架

CodePen用法的例子

让多们看看如何在CodePen中使用PostCSS的插件cssnext示例。

在CSS面板顶部,添加你想要的cssnext插件代码:

@use cssnext;

1
@use cssnext;

有了这条代码,你将可以使用cssnext官网上描述的所有功能特性。比如,我们使用CSS的变量和函数给body设置一个background颜色。

首先,使用:root定义CSS变量。在CSS面板中添加像下面这样的代码:

:root { --body_bg_color: black; }

1
2
3
:root {
  --body_bg_color: black;
}

可以像下面的代码那样调用CSS的变量:

body { background: var(--body_bg_color); }

1
2
3
body {
  background: var(--body_bg_color);
}

这个时候你应该看到了预览面板上的背景颜色变成了black。你也可以点击CSS面板右上角的”View Compiled“按钮看到生成的代码:

金沙澳门官网网址 7

接下来,假设我们想让背景颜色不要是全黑色,想变亮一点。我们可以使用未来的语法修改颜色。

在上面声明的CSS变量中,修改--body_bg_color变量值,从black变成:

--body_bg_color: color(black lightness(20%));

1
--body_bg_color: color(black lightness(20%));

这是一个lightness()函数,在black颜色上调20%的亮度,这个时候你可以看到背景颜色从黑色变成了深灰色。

金沙澳门官网网址 8

可以在CodePen以这种方式使用任何支持的PostCSS插件:

  • 通过@规则引入你想要的使用的PostCSS插件
  • 根据插件的指令在CSS面板中使用(在上面你能找到对应插件使用说明的链接地址)

下面就是我们前面在CodePen中使用PostCSS得到的最终效果:

链接地址

切角

《CSS Secret》里面的方法,采用多重线性渐变实现切角。

.notching { width: 40px; height: 40px; padding: 40px; background: linear-gradient(135deg, transparent 15px, yellowgreen 0) top left, linear-gradient(-135deg, transparent 15px, yellowgreen 0) top right, linear-gradient(-45deg, transparent 15px, yellowgreen 0) bottom right, linear-gradient(45deg, transparent 15px, yellowgreen 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; }

1
2
3
4
5
6
7
8
9
10
11
.notching {
    width: 40px;
    height: 40px;
    padding: 40px;
    background: linear-gradient(135deg, transparent 15px, yellowgreen 0) top left,
        linear-gradient(-135deg, transparent 15px, yellowgreen 0) top right,
        linear-gradient(-45deg, transparent 15px, yellowgreen 0) bottom right,
        linear-gradient(45deg, transparent 15px, yellowgreen 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

金沙澳门官网网址 9

前端框架对比

目前市面上前端框架主要分重量级与轻量级。重量级主要有 Bootstrap、Semantic、UIkit、Foundation 等,轻量级有 Pure、Skeleton、Miligram 等。经常关注前端动态的工程师会发现轻量级框架每年都层出不穷。在我上面提到的主流轻量级框架之外还有很多类似的框架。我一直问自己,为什么要重复造轮子。经过研究,我发现这些轻量级框架其实大多都不能胜任工作需求,而且模仿的痕迹很重,基本上都或多或少的有 Bootstrap 的影子。那么这些轻量级框架有没有意义呢?当然有。但是就我个人观点,选择轻量级框架反倒不如自己实现一个框架。因为大多轻量级框架就像是工作总结,是根据自己的业务需求实现的。所以大多不具有通用性。

前端框架的对比主要以 Bootstrap、Semantic、UIkit 为主,因为我个人感觉这三个最具有代表性,而且设计风格各有特色。Foundation 也有很多大公司在用,但以我个人观点,无论是框架的易用性还是设计风格,相比其它几个框架稍逊一筹。

其中 Bootstrap 和 Semantic 是面向对象的最好体现。

我先说一下 Bootstrap 的优势,不是设计风格,不是模块,不是特效,而是栅格,响应式栅格。Bootstrap 的栅格在与其它框架对比中占有绝对优势,无论是栅格的划分还是类名的风格都堪称经典。如果读者有心看一下 Bootstrap 的 Less 源文件,就会感受到 Bootstrap 对于响应式栅格的独具匠心。其实在 Bootstrap 之前也有很多栅格方案,但是给人的感觉就是不够利索,类名繁琐不好记。而后来的很多框架,尤其轻量级的框架大多都有 Bootstrap 的影子。

下面我们通过对比几个框架的栅格和按钮来看一下类命名的策略。

Bootstrap

JavaScript

<div class="row"> <div class="col-md-8"></div> <div class="col-md-4"></div> </div> <button class="btn btn-primary" type="submit">Button</button>

1
2
3
4
5
6
<div class="row">
  <div class="col-md-8"></div>
  <div class="col-md-4"></div>
</div>
 
<button class="btn btn-primary" type="submit">Button</button>

Semantic

JavaScript

<div class="ui grid"> <div class="ten wide column"></div> <div class="six wide column"></div> </div> <button class="ui primary basic button">Primary</button>

1
2
3
4
5
6
<div class="ui grid">
  <div class="ten wide column"></div>
  <div class="six wide column"></div>
</div>
 
<button class="ui primary basic button">Primary</button>

Foundation

JavaScript

<div class="row"> <div class="small-3 columns"></div> <div class="small-9 columns"></div> </div> <button type="button" class="primary button">Primary</button>

1
2
3
4
5
6
<div class="row">
  <div class="small-3 columns"></div>
  <div class="small-9 columns"></div>
</div>
 
<button type="button" class="primary button">Primary</button>

UIkit

JavaScript

<div class="uk-grid"> <div class="uk-width-1-2"></div> <div class="uk-width-1-2"></div> </div> <button class="uk-button uk-button-primary" type="button">Primary</button>

1
2
3
4
5
6
<div class="uk-grid">
    <div class="uk-width-1-2"></div>
    <div class="uk-width-1-2"></div>
</div>
 
<button class="uk-button uk-button-primary" type="button">Primary</button>

Pure

JavaScript

<div class="pure-g"> <div class="pure-u-1-2"></div> <div class="pure-u-1-2"></div> </div> <button class="pure-button pure-button-primary">A Primary Button</button>

1
2
3
4
5
6
<div class="pure-g">
    <div class="pure-u-1-2"></div>
    <div class="pure-u-1-2"></div>
</div>
 
<button class="pure-button pure-button-primary">A Primary Button</button>

通过上面的对比,大家应该已经发现了这些框架的命名策略的不同。不可否认,Bootstrap 的命名最经典。

之前在网上看到有人讨论关于框架的易用性,有人说 Bootstrap 的类名太长,然而通过上面几个框架的对比,Bootstrap 的类并不繁琐,而且用预处理器编写框架时嵌套会比较灵活。

Semantic 的类名最简洁,通过多个定语的修饰组成一句话,确实很有意思。但是过多的修饰类在编写框架时会稍显凌乱,有利有弊,因人而异吧。

Foundation 的栅格应该是最丰富的,策略上类似 Bootstrap,只是对公共属性进行了拆分,大家也可以看看其中的具体细节。

UIkit 和 Pure 的策略相同,都加了前缀以区分其它框架,但是很显然类名过于冗长了。我在编写框架时也这样想过,但是最终放弃了这种方式。

在Prepros中使用PostCSS

Prepros中可能没有像CodePen中那么多插件可使用,但它包括了Autoprefixercssnext插件,可以在Prepros面板中选中,从而激活对应的PostCSS插件。你可以点击这里下载Prepros。

打开Prepros面板,可以将项目拖到面板中,而且这个面板包括一个CSS文件。然后点击CSS文件,将会在右边打开一个设置面板。在这个面板中你可以看到Prepros支持的PostCSS插件,你可以选择你想用的PostCSS插件。比如说你选择Autoprefixercssnext表示你使用了PostCSS这两个插件。

金沙澳门官网网址 10

如上图所示,你现在可以使用cssnext插件的所有功能以及Autoprefixed插件功能。

梯形

利用伪元素加旋转透视实现梯形:

.trapezoid{ position: relative; width: 60px; padding: 60px; } .trapezoid::before{ content:""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: perspective(20px) scaleY(1.3) rotateX(5deg); transform-origin: bottom; background: yellowgreen; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.trapezoid{
    position: relative;
    width: 60px;
    padding: 60px;
}
 
.trapezoid::before{
    content:"";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: perspective(20px) scaleY(1.3) rotateX(5deg);
    transform-origin: bottom;
    background: yellowgreen;
}

当然,还有另一种更简单的方法是利用border实现,借助上面的构造三角形的方法,在矩形两侧构造两个透明的三角形:

.trapezoid { position: relative; width: 60px; border-top: 60px solid yellowgreen; border-left: 40px solid transparent; border-right: 40px solid transparent; }

1
2
3
4
5
6
7
.trapezoid {
    position: relative;
    width: 60px;
    border-top: 60px solid yellowgreen;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
}

金沙澳门官网网址 11

关于 CSS 预处理器

CSS 预处理器早已不是什么新鲜事,但是真正能够在工作中运用的人有多少呢?熟练使用预处理器特性的人又有多少呢?

我之前工作的时候也没有用预处理器,因为不用,所以也意识不到预处理器的好处。主要是觉得麻烦,因为要使用编译器编译一下,还不如直接写 CSS 方便。但是在项目维护的时候就意识到预处理器的好处。后来在几个项目中尝试了预处理器,但是对于模块化的写法不太明确。预处理器作为工具,可以实现模块化编写 CSS,那么应该如何划分模块?另外,预处理器有很多特性,但是大多数人刚开始只用到变量和嵌套,其它的特性几乎很少用到。我相信在自己动手实现一个轻量级框架的过程中,我们可以对预处理器有一个全面的了解。

目前流行的预处理器有 Less,Sass,Stylus 三个,选择哪个完全是看自己的习惯。我最开始因为 Bootstrap 了解的 Less,但是因为习惯选择了 Sass,其次 Sass 的功能要更全面一些。

无论是工作还是自己写项目,都要搭建一个项目环境,也就是安装一系列的 npm 包。相比刀耕火种的开发方式,使用工具开发的前期准备过程稍显麻烦,然而一旦环境建好,后期的开发将会游刃有余。

Miligram 这个轻量级框架在 Github 上有很高人气,但是说实话,用处并不大。不过这个框架的构建方式非常值得学习。虽然 CSS 对于很多人俩说很简单,但是真要去写一个框架,还是非常棘手,这时候就需要借鉴一些优秀的框架。

编写框架大致会用到的 npm 如下:

JavaScript

--autoprefixer --node-sass --npm-run-all --rimraf --onchange

1
2
3
4
5
--autoprefixer
--node-sass
--npm-run-all
--rimraf
--onchange

其实最主要的就是一个 node-sass,其它的都是辅助 CSS 文件的生成修改,大家感兴趣的话可以去 npm 官网搜索这些插件,了解具体用法,如有不懂可以给我留言,我就不啰嗦了。

总结一下

好吧,快速将上面的内容做个总结:

  • 试着在CodePen或Prepros中使用PostCSS
  • CodePen中提供了PostCSS十个插件
  • 在CodePen中的CSS面板中激活PostCSS插件,然后通过引入@规则,就可以使用特定的PostCSS插件
  • Prepros提供了Autoprefixer和cssnext插件
  • 在Prepros中点击项目中任何CSS文件可以设置PostCSS给Prepros提供的PostCSS插件

五边形

梯形加上三角形,很容易就组合成一个五边形,这里需要借助一个伪元素实现:

.pentagon { position: relative; width: 60px; border-bottom: 60px solid yellowgreen; border-left: 40px solid transparent; border-right: 40px solid transparent; } .pentagon::before { content:""; position: absolute; top: 60px; left: -40px; border-top: 60px solid yellowgreen; border-left: 70px solid transparent; border-right: 70px solid transparent; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.pentagon {
    position: relative;
    width: 60px;
    border-bottom: 60px solid yellowgreen;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
}
 
.pentagon::before {
    content:"";
    position: absolute;
    top: 60px;
    left: -40px;
    border-top: 60px solid yellowgreen;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

金沙澳门官网网址 12

编写轻量级框架

终于到了本篇文章的重头戏。

简单介绍一下,我给自己编写的框架取名 Snack,原意“零食”,主要表达简单之意。虽然是轻量级框架,但我并不想拿轻量级做为噱头,毕竟体量轻意味着某些功能的缺失以及疏漏。这个框架的意义更多的是交流学习,我试图借鉴其它框架的优秀之处,尽量简化类名,以及尝试探索一些更通用的组件。

大多数的轻量级框架只是 CSS 框架,不涉及 JS 部分,主要用于网页的布局。我之所以打算自己编写框架,是因为工作中重复的东西太多,通过框架可以很好的将这些零散组件整合到一起。另一方面,写个小项目,学点新知识是一件趣事。

编写框架是去年想做的事情,但因为时间原因,拖了很久。写框架之初我曾陷入一个误区,我打算设计一些比较前卫的样式,立体的按钮、浮动的面板等,比如下图中的风格。

金沙澳门官网网址 13

但是在断断续续编写框架的过程中,我逐渐找到了方向,上图的样式只是一种皮肤,编写框架之初不应该把重点放在这上面。当然,好的 UI 设计也是框架成功的一部分。

下一节:集成任务

CodePen和Prepros可以通过设置启用PostCSS插件。然而不利的一面是,你无法决定使用哪个插件。

当你准备使用PostCSS更多你想要的插件时,可以通过配置自己选择的插件。最容易的方法是通过gulp或grunt设置需要的PostCSS插件任务,并且让其跑起来。

在下一节中,你将可学习到如何在Glup或Grunt中配置PostCSS插件任何,并且让其跑起来为你所用。感兴趣的同学,欢迎持续关注接下来的内容。(^_^)。

1 赞 1 收藏 评论

金沙澳门官网网址 14

六边形

看看上面的梯形,如果两个反方向且底边同样大小的梯形,叠加在一起,是不是就能得到一个六边形呢?

.pentagon { position: relative; width: 60px; border-bottom: 60px solid yellowgreen; border-left: 40px solid transparent; border-right: 40px solid transparent; } .pentagon::before { content: ""; position: absolute; width: 60px; height: 0px; top: 60px; left: -40px; border-top: 60px solid yellowgreen; border-left: 40px solid transparent; border-right: 40px solid transparent; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.pentagon {
    position: relative;
    width: 60px;
    border-bottom: 60px solid yellowgreen;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
}
.pentagon::before {
    content: "";
    position: absolute;
    width: 60px;
    height: 0px;
    top: 60px;
    left: -40px;
    border-top: 60px solid yellowgreen;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
}

金沙澳门官网网址 15

模块划分

编写框架的第一步就是要确定框架应该包含哪些模块。因为是轻量级框架,所以模块肯定没有重量级框架那么全面,只有核心的一些组件。通过比较一些轻量级框架以及工作总结,大致常用的模块包括栅格、媒体、按钮、排版、表单、表格、面板以及辅助工具。

在常用的这几个组件中,需要重点关注的是栅格、表单及面板,媒体组件也很重要,但是自由发挥的空间不大,我直接用了 Bootstrap 的媒体组件。

八边形

六边形都解决了,八边形也不在话下,一个矩形加上两个梯形,可以合成一个八边形。

.octagon { position: relative; width: 40px; height: 100px; background: yellowgreen; } .octagon::before { content: ""; height: 60px; position: absolute; top: 0; left: 40px; border-left: 30px solid yellowgreen; border-top: 20px solid transparent; border-bottom: 20px solid transparent; } .octagon::after { content: ""; height: 60px; position: absolute; top: 0; left: -30px; border-right: 30px solid yellowgreen; border-top: 20px solid transparent; border-bottom: 20px solid transparent; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.octagon {
    position: relative;
    width: 40px;
    height: 100px;
    background: yellowgreen;
}
.octagon::before {
    content: "";
    height: 60px;
    position: absolute;
    top: 0;
    left: 40px;
    border-left: 30px solid yellowgreen;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}
.octagon::after {
    content: "";
    height: 60px;
    position: absolute;
    top: 0;
    left: -30px;
    border-right: 30px solid yellowgreen;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}

金沙澳门官网网址 16

命名策略

首先是类命名的层次与结构。类命名一直是我比较纠结的地方,刚开始工作的时候为了起一个见名知意又简洁的类名总是抓耳挠腮。我在编写框架时尽量避免与 Bootstrap 的类名重叠,但也不能完全避免。对比其他框架会发现,这种情况不可避免的会出现,毕竟类名会有一定的规律性以及层次性。在这一点上我比较喜欢 Bootstrap 的风格。下面和 Bootstrap 的表单做一个对比。

Bootstrap 的表单结构及类名

JavaScript

--div.form-horizontal --div.form-group --label.control-label --input.form-control

1
2
3
4
--div.form-horizontal
  --div.form-group
    --label.control-label
    --input.form-control

Snack 的表单结构及类名

JavaScript

--div.form-row --div.form-item --label.form-label --input.form-field

1
2
3
4
--div.form-row
  --div.form-item
     --label.form-label
     --input.form-field

这个表单结构整体而言还算不错,只是个别地方需要修改。有一些框架不给 input 等元素起类名,而是给父元素一个类名,个人对这种做法表示疑问,不起类名会降低框架编写及使用的灵活性。

第二个策略是组件的修饰,比如按钮及面板都存在多个语境(颜色、大小等),在这一点上我编写框架时做了一些简化,风格上有些 Semantic 的影子。

JavaScript

<button class="btn primary">primary</button> <table class="table bordered striped">...</table> <div class="boxes primary">...</div>

1
2
3
<button class="btn primary">primary</button>
<table class="table bordered striped">...</table>
<div class="boxes primary">...</div>

关于修饰类的策略是一个仁者见仁智者见智的问题,至于哪种方法更好,还需要在编写框架的过程中摸索。

五角星

好的,探索完多边形,我们继续探索X角星。

先来看看五角星,要怎么实现呢?当然是直接打出来啦 — ★☆

金沙澳门官网网址 17

开个玩笑,这里使用 3 个三角形叠加旋转在一起实现。

.star { margin: 50px 0; position: relative; width: 0; border-right: 100px solid transparent; border-bottom: 70px solid yellowgreen; border-left: 100px solid transparent; transform: rotate(35deg) scale(.6); } .star:before { content: ''; position: absolute; border-bottom: 80px solid yellowgreen; border-left: 30px solid transparent; border-right: 30px solid transparent; top: -45px; left: -65px; transform: rotate(-35deg); } .star:after { content: ''; position: absolute; top: 3px; left: -105px; border-right: 100px solid transparent; border-bottom: 70px solid yellowgreen; border-left: 100px solid transparent; transform: rotate(-70deg); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.star {
   margin: 50px 0;
   position: relative;
   width: 0;
   border-right: 100px solid transparent;
   border-bottom: 70px  solid yellowgreen;
   border-left: 100px solid transparent;
   transform: rotate(35deg) scale(.6);
}
.star:before {
    content: '';
    position: absolute;
    border-bottom: 80px solid yellowgreen;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    top: -45px;
    left: -65px;
    transform: rotate(-35deg);
}
.star:after {
    content: '';
    position: absolute;
    top: 3px;
    left: -105px;
    border-right: 100px solid transparent;
    border-bottom: 70px solid yellowgreen;
    border-left: 100px solid transparent;
    transform: rotate(-70deg);
}

金沙澳门官网网址 18

栅格系统

演示示例:

任何框架必须建立在栅格的基础上才能灵活布局。我在前面提到了 Bootstrap 的精华就是栅格系统。栅格系统的编写需要使用预处理器的循环功能,否则就要做无谓的重复劳动了。我遇到过一些轻量级框架是用 Less 编写的,其栅格系统就没有用循环,这样的源码稍显唐突,可能是作者对 Less 的循环功能不熟,当然 Less 本身的循环比较弱,用起来有些别扭。关于预处理器的循环,可以参照我之前翻译的《CSS 预处理器中的循环》,比较详细地对比了三种流行预处理器的循环功能。简单说一下,Less 没有循环,但可以用递归实现,而 Sass 和 Stylus 有真循环。

我编写的栅格系统也是默认 12 列,但是后来发现 12 列的栅格缺少最常用的列宽(比如 10%、20%、30%等),比如下面 CodePen 展示的例子用 12 列栅格是无法完成的,所以我又添加了 10 列栅格,但仍然无法面面俱到,不过已经很灵活了。

See the Pen snack-grid by Zongbin (@nzbin) on CodePen.

栅格的使用和 Bootstrap 是一样的,除了 12 列栅格外,10 列栅格以及均分栅格都要添加 .cols-

JavaScript

<!-- 默认 12 列栅格,所以省略 cols-12 --> <div class="row"> <div class="col-5"></div> <div class="col-7"></div> </div> <!-- 10 列栅格 --> <div class="row cols-10"> <div class="col-3"></div> <div class="col-7"></div> </div>

1
2
3
4
5
6
7
8
9
10
11
<!-- 默认 12 列栅格,所以省略 cols-12 -->
<div class="row">
    <div class="col-5"></div>
    <div class="col-7"></div>
</div>
 
<!-- 10 列栅格 -->
<div class="row cols-10">
    <div class="col-3"></div>
    <div class="col-7"></div>
</div>          

这个栅格并没有响应式,只有一个断点,小屏手机上的话所有栅格都会单行显示。一方面,这样的设计符合大多数轻量级框架的初衷;另一方面,我打算再写一个针对移动端的框架,毕竟 Web 端和移动端的风格差距较大,按照业务需求分开会更好。不过最近我更改了源文件,为响应式预留了扩展方式。

六角星

六角星呢?想象一下,一个向上的三角形 ▲,叠加上一个向下的三角形 ▼,就可以得到一个六边形:

.sixstar { position: relative; width: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid yellowgreen; } .sixstar:after { content: ""; position: absolute; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid yellowgreen; top: 30px; left: -50px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.sixstar {
    position: relative;
    width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid yellowgreen;
}
.sixstar:after {
    content: "";
    position: absolute;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid yellowgreen;
top: 30px;
left: -50px;
}

金沙澳门官网网址 19

表单

演示示例:

在上面的命名策略中已经展示了 Snack 表单的基本结构,基本表单除了结构之外,样式上并没有太多可以讨论的地方。在此说一下表单中 checkbox 的结构调整,先看一下 Bootstrap 的 checkbox 结构。

JavaScript

<!-- checkbox --> <div class="checkbox"> <label> <input type="checkbox" value=""> checkbox </label> </div> <!-- checkbox-inline --> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> checkbox </label>

1
2
3
4
5
6
7
8
9
10
11
<!-- checkbox -->
<div class="checkbox">
  <label>
    <input type="checkbox" value=""> checkbox
  </label>
</div>
 
<!-- checkbox-inline  -->
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> checkbox
</label>

以上两种结构不能有偏差,稍有偏差样式就会错乱,灵活性较差。其次我在想两种结构能不能整合在一起,增强灵活性。想了很久,找到了方法,Snack 结构如下:

JavaScript

<!-- checkbox --> <div class="checkbox"> <label> <input type="checkbox" value=""> checkbox </label> </div> <!-- checkbox-inline --> <div class="checkbox inline"> <label> <input type="checkbox" value=""> checkbox </label> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- checkbox -->
<div class="checkbox">
  <label>
    <input type="checkbox" value=""> checkbox
  </label>
</div>
 
<!-- checkbox-inline -->
<div class="checkbox inline">
  <label>
    <input type="checkbox" value=""> checkbox
  </label>
</div>

也可以将样式直接加到 label 标签上。另外,如果将 input 移到 label 标签外也是没有问题的,如下:

这种结构有一个好处,就是可以自定义 input 样式,详见下面的 CodePen 的 scss 文件。radio 的设置和 checkBox 是一样的。

See the Pen snack-forms by Zongbin (@nzbin) on CodePen.

八角星

八角星呢?八个角那么多呢。其实使用两个矩形进行旋转拼接就可以了。

.eightstar { position: relative; width: 100px; height: 100px; background-color: yellowgreen; transform: rotate(30deg); } .eightstar::before { content: ""; position: absolute; top: 0; left: 0; width: 100px; height: 100px; transform: rotate(45deg); background-color: yellowgreen; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.eightstar {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
    transform: rotate(30deg);
}
 
.eightstar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
    background-color: yellowgreen;
}

金沙澳门官网网址 20

辅助类

辅助类是一系列类的组合,比如字号大小、颜色值、padding、margin 以及左右浮动等。在一些 Bootstrap 搭建的后台管理系统中尤为常见,这样布局起来就会比较灵活。以下是一个边框的辅助类。

JavaScript

.border-left-right { border-left: 1px solid #eee; border-right: 1px solid #eee; } .border-top-bottom { border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .border-left { border-left: 1px solid #eee; } .border-right { border-right: 1px solid #eee; } .border-top { border-top: 1px solid #eee; } .border-bottom { border-bottom: 1px solid #eee; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.border-left-right {
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}
.border-top-bottom {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.border-left {
  border-left: 1px solid #eee;
}
.border-right {
  border-right: 1px solid #eee;
}
.border-top {
  border-top: 1px solid #eee;
}
.border-bottom {
  border-bottom: 1px solid #eee;
}

关于辅助类的详细内容可以阅读这篇文章《如何编写通用的 Helper Class》

本文由金沙澳门官网网址发布于金沙澳门官网网址,转载请注明出处:如何编写轻量级金沙澳门官网网址:,设置选项

关键词:

上一篇:最核心的几个概念,初步认识

下一篇:没有了