摘要：發(fā)布一周以來，獲得了，登上了，在上進入了前三。為什么要創(chuàng)造當我在設(shè)計一個新的移動端用戶的網(wǎng)站比如面向微信用戶的網(wǎng)站的時候，調(diào)研了一些現(xiàn)有的框架，應用比較廣泛的有等。否則只能有中國人來關(guān)注你的項目了。要知道，外國開發(fā)者比中國開發(fā)者多很多倍的。

受邀寫一篇 Mobi.css 的誕生歷程，請原諒我吸引眼球的標題，我會努力把這篇文章寫得有一些干貨的。

GitHub Repo | Homepage

提要：

Mobi.css 是一個輕量、靈活的移動端 CSS 框架。發(fā)布一周以來，獲得了 600+ stars，登上了 GitHub Trending Top1（CSS），在 Hacker News 上進入了前三。
這篇文章會先介紹一下創(chuàng)造 Mobi.css 的思路，再介紹一下我在推廣 Mobi.css 中的心得。

當我在設(shè)計一個新的 Focus on 移動端用戶的網(wǎng)站（比如面向微信用戶的網(wǎng)站）的時候，調(diào)研了一些現(xiàn)有的 CSS 框架，應用比較廣泛的有 Bootstrap, Foundation, Pure.css, Framework7, Skeleton 等。

他們都很優(yōu)秀，但是都有一些缺點。

Bootstrap: 太大太笨重了，對于桌面端用戶我希望展示與手機端一樣的頁面，可能再加上一個二維碼，將用戶導向微信（類似于微信公眾號的文章在網(wǎng)頁中的樣式）

Foundation: 沒有實踐過，看上去也很大，大部分都是我不需要的功能

Skeleton: 在移動端有一些 bug，overflow:auto; 的滑動不平滑， 樣式太丑，官網(wǎng)的

 在 iPhone 里根本不 work，說明他們沒有在手機上測試過

Framework7: 適合做 WebApp，而我不太喜歡那種仿原生 App 的設(shè)計

Pure.css: 很優(yōu)秀，足夠小巧，沒什么特別的缺點，如果定制一下應該也可以滿足需求。不過我還希望框架層面能夠有一些針對移動端的設(shè)計


于是我決定自己造一個輪子。
造新輪子之前一定要做好調(diào)研，否則可能白費了功夫。
開發(fā)過程中的心得
善用工具
CSS 框架相比于 JavaScript, React 等簡單得多，但是也不能忽視了工具的使用。我選擇了以下工具：

Sass (scss)/Autoprefixer: CSS 預處理器都大同小異，Sass 功能比較全，所以選擇了它。移動端也需要兼容不同設(shè)備，Autoprefixer 可以自動加上 -webkit- 等前綴

Ejs/Marked/Highlight.js: 構(gòu)建 website 的工具，一開始是手寫 HTML，發(fā)現(xiàn)根本 hold 不住。這些工具后期可以用靜態(tài)網(wǎng)站生成器替換

Gulp: 構(gòu)建工具，串起其他工具

Travis CI/GitHub Pages/Coding Pages: 靜態(tài)頁面服務(wù)，一開始手動部署網(wǎng)站，后來發(fā)現(xiàn)太麻煩了，就用 Travis 自動部署了


磨刀不誤砍柴工，善用工具可以大大提高開發(fā)效率。
站在巨人的肩膀上
開源社區(qū)上的代碼都是別人的積累，如果離開了它們，Mobi.css 很難在短時間內(nèi)完成開發(fā)，我借鑒了以下開源項目：

Normalize.css: 大部分 _reset.scss 部分是借鑒它的。沒有直接引入它的原因是有少部分它的代碼是不需要的

Bootstrap v4: 使用最廣泛的 CSS 框架，可借鑒的太多了

Pure.css/Skeleton: 借鑒了手機上的樣式

微信公眾號的 desktop 版: 借鑒了在 desktop 上的樣式，以及中文字體

以及很多其他框架


重視寫文檔
開源項目要受歡迎，文檔是非常重要的。README.md 要讓大家能在短時間內(nèi)了解項目的特點。網(wǎng)站要能夠盡可能輸出自己的理念。
如果可以的話，最好用英文（或者雙語）寫。否則只能有中國人來關(guān)注你的項目了。要知道，外國開發(fā)者比中國開發(fā)者多很多倍的。
不要擔心自己英語不好，只要表達的內(nèi)容能讓外國人看得懂即可。等項目成熟了，自然會有人幫你修改文檔。
注意社區(qū)的一些規(guī)則

標明 License

遵守版本號規(guī)則，不要亂做 Breaking changes


如何推廣
不要覺得不好意思推廣，我們推廣不是功利性的求贊求關(guān)注（逃。
而是因為沒有人關(guān)注的項目，是不可能向好的方向發(fā)展的。而如果自己不做主動的推廣，項目也很難被關(guān)注。
推廣這部分其實我并不是很擅長，這里只寫出一些我自己的心得吧。
在對的時間發(fā)對的帖
一般在下班的時間，大家都會拿出手機刷一刷。這時你的貼最容易被曝光。等到人氣上去了，晚上睡覺之前大家再刷一波手機，就有更多人看到了。
發(fā)帖的時候只需要簡要的說重點，引導用戶到 GitHub 或你的網(wǎng)站。但是慎用「求 star」等字眼，功利性太強。
推廣渠道
我用了以下推廣渠道（按推廣效果排序）：

Hacker News

V2EX

開發(fā)者頭條

SegmentFault

Hacpai

Startup News

光谷社區(qū)

Reddit


聆聽意見，及時反饋
自己的想法總歸是一個人的，吸取了別人的建議才能讓項目更好的發(fā)展。Mobi.css 就有一部分 API 是聽取了別人的建議之后修改的。
當然，自己需要有自己的判斷。Mobi.css 的準則很簡單：這個設(shè)計是不是 focus on mobile 的。
最重要的是，項目要有價值
沒有價值的項目即使推廣再多，也沒有人會關(guān)注的，只會招來一頓猛噴。
總結(jié)
Mobi.css 在短時間內(nèi)獲得了很多關(guān)注，離不開大家的支持，離不開開源社區(qū)的幫助。
我知道這只是 Mobi.css 項目的開始，后面有更長的路要走，感興趣的可以一起來建設(shè)。
GitHub Repo | Homepage
Hacker News 上的討論
           
               
                                           
                       
                 
            
                     

                 

                                                                                                                    
                         云服務(wù)器
                                             
                         GPU云服務(wù)器
                                                                                                                                                 
                                      
                     
                    
                                                                                               7天試用主機
                                                                                                           汽車互聯(lián)網(wǎng)的誕生與發(fā)展
                                                                                                           7天學會php
                                                                                                           7天試用vps
                                                         
                 
               
              
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
                 
                   
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/111528.html
               
                      
               

                 
                                  
上一篇：如何實現(xiàn) font-size 的響應式
  
                                                
                                       
下一篇：WEB基礎(chǔ)之HTML的各個標簽的默認樣式
                                  
              
              

                
相關(guān)文章
                

                             
                                                                                                    

                                                

                          
「Mobi.css」輕量，靈活的移動端 css library， built with love
                                                     
摘要：最近做了一個，頗廢了一番功夫。簡單介紹是一個輕量，靈活的移動端。特點如下只有，比等所有庫都小大量使用，非常靈活，基本上沒有寫額外的，只有不到行的，在端相當于展示的還是的頁面，不過可以在左側(cè)或右側(cè)加上側(cè)邊欄更多介紹請看最后奉上的

最近做了一個 css library ，頗廢了一番功夫。
這里先把它分享給大家，歡迎 star ，歡迎試用！

GitHub
Homepage

PS ：將來 ...
                                                   
                          

                                

                                    付倫
                                    2019-08-29 11:12
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
前端面試每日 3+1 —— 第134天
                                                     
摘要：學習不打烊，充電加油只為遇到更好的自己，天無節(jié)假日，每天早上點純手工發(fā)布面試題死磕自己。希望大家在這浮夸的前端圈里，保持冷靜，堅持每天花分鐘來學習與思考。

今天的知識點 (2019.08.28) —— 第134天

[html] Web Worker線程的限制是什么？

[css] transition、animation、transform三者有什么區(qū)別？

[js] [請寫出如下代...
                                                   
                          

                                

                                    stonezhu
                                    2019-08-30 15:44
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
13個幫你提高開發(fā)效率的現(xiàn)代CSS框架
                                                     
摘要：官網(wǎng)是圍繞構(gòu)建的，是一個免費的開源框架。官網(wǎng)在壓縮后僅為，以移動優(yōu)先的理念為中心。官網(wǎng)被稱為輕量級響應式現(xiàn)代化，是一個基于的框架。通過添加主題或自定義組件能夠幫你進一步開發(fā)個性化的。官網(wǎng)有時框架可以包含僅對其原始開發(fā)人員有意義的類名。

翻譯：瘋狂的技術(shù)宅原文：https://1stwebdesigner.com/mo...


本文首發(fā)微信公眾號：前端先鋒歡迎關(guān)注，每天都給你推送新鮮的...
                                                   
                          

                                

                                    xumenger
                                    2019-08-30 10:52
                                    評論0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                           
                
              
              
               

                  
                  
發(fā)表評論
                   

                                      
                      

                        登陸后可評論
                      
                   
               
              

                

                  
0條評論
   
                
 
                      

              
           
           

              
 
                

                    
                    
CoderStudy
                    
男|高級講師
                    

                     
                                                                      我要關(guān)注
      
                                                                                        我要私信
                     
                                            
                    
                    

                          
TA的文章
                          閱讀更多
                    
                      

                                                  
（補貨）HostYun：洛杉磯Ceranetworks機房AMD YES系列VPS，美國原生IP，去
                            
閱讀 1264·2021-10-18 13:32
                                                       
ABD — android debug bridge 簡略介紹
                            
閱讀 2331·2021-09-24 09:47
                                                       
小米回應立陶宛：遵守歐盟通用數(shù)據(jù)保護條例 尊重用戶合法權(quán)益
                            
閱讀 1322·2021-09-23 11:22
                                                       
【CSS基礎(chǔ)】Flex彈性布局
                            
閱讀 2462·2019-08-30 14:06
                                                       
HTML/CSS基礎(chǔ)知識總結(jié)
                            
閱讀 570·2019-08-30 12:48
                                                       
css權(quán)重與常見布局（1）
                            
閱讀 1996·2019-08-30 11:03
                                                       
Vue.js 渲染簡寫樣式存在的問題
                            
閱讀 534·2019-08-29 17:09
                                                       
前端小知識--為什么你寫的height:100%不起作用？
                            
閱讀 2461·2019-08-29 14:10
                                                
                      
                

                   
              
  

                  
最新活動
 
           
         

                    

                      

                                                                                                                       

                          
                                                             
                          
                        
                                                

                          
                                                             
                          
                        
                                                                   
                    
                        
                      
                    
                      
                    
                    
              



                                
              
           
        
       
    
    
     

      
    
    
    

    
       
       

         
閱讀需要支付1元查看
  
         
支付并查看
     
       
      
  
    
    













<