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

受邀寫一篇 Mobi.css 的誕生歷程，請?jiān)徫椅矍虻臉?biāo)題，我會努力把這篇文章寫得有一些干貨的。

GitHub Repo | Homepage

提要：

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

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

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

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

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

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

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

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

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


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

Sass (scss)/Autoprefixer: CSS 預(yù)處理器都大同小異，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 很難在短時(shí)間內(nèi)完成開發(fā)，我借鑒了以下開源項(xiàng)目：

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

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

Pure.css/Skeleton: 借鑒了手機(jī)上的樣式

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

以及很多其他框架


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

標(biāo)明 License

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


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

Hacker News

V2EX

開發(fā)者頭條

SegmentFault

Hacpai

Startup News

光谷社區(qū)

Reddit


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

                 

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

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

                 
                                  
上一篇：如何實(shí)現(xiàn) font-size 的響應(yīng)式
  
                                                
                                       
下一篇：WEB基礎(chǔ)之HTML的各個標(biāo)簽的默認(rèn)樣式
                                  
              
              

                
相關(guān)文章
                

                             
                                                                                                    

                                                

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

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

GitHub
Homepage

PS ：將來 ...
                                                   
                          

                                

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

                                                

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

今天的知識點(diǎn) (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)建的，是一個免費(fèi)的開源框架。官網(wǎng)在壓縮后僅為，以移動優(yōu)先的理念為中心。官網(wǎng)被稱為輕量級響應(yīng)式現(xiàn)代化，是一個基于的框架。通過添加主題或自定義組件能夠幫你進(jìn)一步開發(fā)個性化的。官網(wǎng)有時(shí)框架可以包含僅對其原始開發(fā)人員有意義的類名。

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


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

                                

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

                  
                  
發(fā)表評論
                   

                                      
                      

                        登陸后可評論
                      
                   
               
              

                

                  
0條評論
   
                
 
                      

              
           
           

              
 
                

                    
                    
CoderStudy
                    
男|高級講師
                    

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

                          
TA的文章
                          閱讀更多
                    
                      

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

                   
              
  

                  
最新活動
 
           
         

                    

                      

                                                                                                                       

                          
                                                             
                          
                        
                                                

                          
                                                             
                          
                        
                                                                   
                    
                        
                      
                    
                      
                    
                    
              



                                
              
           
        
       
    
    
     

      
    
    
    

    
       
       

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