前端野人

我是Louis,自詡為野生的前端工程師,在網路中求生存

前端開發流-Prototyping-Builder (2)改進

發布於

後來我測試一下後,我發現之前的版本有一些瑕疵詳情可參考前端開發流-Prototyping-Builder

上一版我沒有考慮到輸出的檔案,我後來參考一些,css framework的框架如 Bulmagetbse,我回頭想想我需要Prototyping-Builder做什麼?我要怎麼應用它?

我為什麼需要Prototyping-Builder?

因為我需要將前端工程與設計做分離,設計師做完稿之後可以進階製造專案所需的css

我要怎麼應用?

我這個 start-kit,它可能不能稱之為架構,姑且先說他是一個start-kit,方便設計師測試他的css,我目前期望設計師與工程師之間的程式碼分工就是從這個Prototyping-Builder產出。

如參考 bulma的專案結構及css的設計,我預期設計師從他的設計稿產出接近 css framework的css出來,這些框架都是用 gulp產出,而且只負責css邏輯,我設計的Prototyping-Builder就是讓設計師能應用簡單的網頁demo做測試,將他的設計寫成css並逐步歸納成屬於她設計風格或是公司設計風格的css framework,這就是我的Prototyping-Builder預期達到的目標。

而這個Prototyping-Builder仍然可以做js或是jquery的組合,甚至要在上面開發前端也可以。但這邊我是不打算用來做專案開發,僅只是讓設計師做Demo而已。

另外我加了簡單的樣版引擎,減少設計師重複撰寫一樣的程式碼,方便設計師好管理程式。

最終,設計師所用到得icon或是css跟最後產出給工程師套版的html都是放在public

而工程師只要看public的html跟轉移public內的assets就可以達到設計與工程分工的效果,

開發期間,工程師也可以協助設計師怎麼樣設計css跟html的結構,也比起傳統的傳靜態檔案一來一往更加有效率,設計師也不會接觸到太深的技術,只要知道git push git pull git clone跟基本的npm install npm run start 剩下的就是 scss的專研跟部分簡單的前端效果。

以上是我最近參考主流的Css framework的專案後改進的start-kit

歡迎參考:https://github.com/wildfrontend/prototyping-builder

前端開發流-Prototyping-Builder

看不過癮?

一鍵登入,即可加入全球最優質中文創作社區