使用Laravel跟Foundation設計Web App (2) 前端設計

結合Laravel(後端)跟Foundation(前端)第一個遇到的問題是他們都有各自檔案管理的方式,如果把Foundation結合到Laravel裡面需要去修改檔案路徑然後又要去.gitignore告訴Git哪個檔案要忽略不要上傳至Github。

 

Foundation設置

因為卡卡要使用擁有Sass功能的Foundation做一些客製化。為了不必要的錯誤所最後決定先把Foundation跟Laravel分開編寫並先行選寫前端的Foundation。
首先要用command line(PC)或terminal(Mac)安裝Foundation。(在執行以下命令前要確定電腦有安裝node.js,node.js的npm擁有目前最強大的軟體套件管理系統)
接著在在指令欄裡打上

在安裝完成後移到想要設立Project的路徑然後打上

當電腦下載完所以檔案後就可以開始編寫啦!

Foundation的使用上跟Bootstrap相差不遠,有興去了解的可以至官網看看。

在設計方面卡卡參考了InstagramVine,與Flipagram的設計希望做出簡單舒服的UI。在版面設計上也選用未來趨勢(?)的Flexbox。

 

Flexbox
根據andyyou大Rhadow大在 Flexbox出現之前, 工程師大量濫用 float 來達成一些複雜佈局的需求, 但本質上 float 並不是用來協助我們佈局的, 它只是一個舊有的對齊屬性。最初被設計出來的主要原因是為了提供更有效率的方式來完成傳統 CSS 無法輕易達成的效果。Facebook推出基於Javascript的React Native框架開發手機App就是使用Flexbox。

因為有Foundation框架的支援,Flexbox的編寫概念跟一般的float是相差無幾的。首先是用row的div元素定義一個新的列,然後再定義欄寬與位置。
欄寬可以設置small-* medium-或large-。small、medium、large分別是在小螢幕(手機)、中螢幕(平板)、與大螢幕(電腦)上顯示的布局。Foundation已經預定義小中大的大小範圍,但是還是可以進去_setting.scss修改。

在一陣編寫後完成以下的template

 

主頁面
main_page_template

 
創建頁面

create_page_template


建設好基本的的頁面後就可以開始寫後端的程式碼。

發表迴響