quickly 1.4 版本发布,快速前端切图css框架

演示地址

http://www.qietu.com/quickly/v1.4/

关于框架

quicklyCSS框架曾用名 ThinkCSS,QuickCSS ,是武汉切图网络技术有限公司(简称切图网)基于多年前端外包经验开发的一套快速响应式切图框架。

更新记录

增加了html基值的设置,采用rem重置了字体大小

重新定义了响应式区间

  1. /* 电脑大屏--lg*/
  2. .qui-wrapper{
  3. width: 1170px;
  4. }
  5. /* 电脑小屏--md */
  6. @media screen and (max-width:1200px){
  7. .qui-wrapper{
  8. width: 970px;
  9. }
  10. }
  11. /* 平板--sm */
  12. @media screen and (max-width:992px){
  13. .qui-wrapper{
  14. width: 750px;
  15. }
  16. }
  17. /* 手机 xs*/
  18. @media screen and (max-width:768px){
  19. .qui-wrapper{
  20. width: 100%;
  21. }
  22. }

通过font-family定义了数字字体样式

集成了swiper.js滑块插件

/*判断了插件是否存在,无插件的情况不报错*/

if(typeof(Swiper)!= "undefined"){
        var swiper = new Swiper('.swiper-container',{
        observer:true,
            //observeParents:true,
            //slidesPerView: 3,
            autoplay:4000,
            pagination:  '.swiper-pagination',
            prevButton:'.swiper-button-prev',
    nextButton:'.swiper-button-next',
            //paginationType: 'fraction', //缺省是原点
        });
    }
    else{
    
    }

集成了wow.js动画效果插件

/*判断了插件是否存在,无插件的情况不报错*/

if(typeof(WOW)!= "undefined"){
        if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
            new WOW().init();
        };
    }

基于BEM命名重新设计了组件(尝试)

.qui-card{}

.qui-card--colorful{} /*修饰符*/

.qui-card__head{}  /*子元素*/

.qui-card__body{} /*子元素*/

.qui-card__foot{} /*子元素*/

猜你喜欢

转载自www.oschina.net/news/112384/quickly-1-4-released
1.4