前端框架及实施流程
1、制定前端框架（前端框架会议-分工）
负责前端团队的管理及与其他团队的协调工作，提升团队成员能力和整体效率；
带领团队完成研发工具及平台前端部分的设计、研发和维护；
带领团队进行前端领域前沿技术研究及新技术调研，保证团队的技术领先 ；
负责前端开发规范制定、功能模块化设计、公共组件搭建等工作，并组织培训。
构建工具（webpack、grunt、gulp）
前端框架（vue、angular、react）
后端框架（koa、express）
2、根据设计规范制定样式规范
//常用 css
.nowrap{
white-space: nowrap;
word-break:keep-all; /* 不换行 */
overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis; /*...代替*/
}
.pointer{cursor: pointer}
.fr{float:right}
.text-center {text-align: center}
//Global css
*{
padding:
0;margin: 0
}
html{height:
100%}
body{position:absolute;height:
100%;width:100%;font-family:@font-family-base}
a{cursor: pointer;text-decoration: none}a,a:hover,a:focus{text-decoration: none}
ul{list-style:
none}
input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{
-webkit-box-shadow: 0 0 0 1000px white inset;
}
input[type=text]:focus,
input[type=password]:focus, textarea:focus {
-webkit-box-shadow: 0 0 0 1000px white inset;
}
textarea{resize:none}
button{
outline: none;
}
变量
Main color
Main grey
Main border radius
Main width
Font-family
…
//Mixin
.border-radius(@radius){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-mz-border-radius: @radius;
border-radius: @radius;
}
.transition(@transition){
-webkit-transition: @transition;
-moz-transition: @transition;
-ms-transition: @transition;
transition: @transition;
}
.transform(@transform){
-webkit-transform: @transform;
-moz-transform: @transform;
-ms-transform: @transform;
transform: @transform;
}
.transform-origin(@origin){
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin;
transform-origin: @origin;
}
.box-shadow(@shadow){
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
-ms-box-shadow: @shadow;
box-shadow: @shadow;
}
.animation(@animation){
-webkit-animation: @animation;
-moz-animation: @animation;
-ms-animation: @animation;
animation: @animation;
}
.calc(@width,@sub, @diff) {
width : calc(~"@{width} @{sub}@{diff}");
}
