Grunt 系列(2) 設定

這篇教學將會解釋如何使用 Gruntfile 為你的專案設定任務。如果你還不知道什麼是 Gruntfile 請回到上一篇 Grunt 入門 閱讀。

繼續閱讀

分享到

Sails 實作筆記

何謂 sails.js



sails 其實就跟 RailsASP.NET MVC 類似,是一個 MVC 的 Web 框架。目標是協助您快速的用 nodejs 開發出企業等級的網站(註:由於開發團隊仍在開發中,所以要採用前請先審慎評估XDD)。所以就跟其他框架一樣,他讓我們不用再重新造輪子,整合一般網站開發常用的功能,並且重點是支援許多 nodejs 特有的強項,特別是在開發聊天室這類的應用程式更顯得出效能。本篇文章僅僅透過實作一些基礎,讓我們快速的感受一下 sails 。

繼續閱讀

分享到

Grunt 系列(1) 基礎教學

Grunt 入門

GruntGrunt 擴充套件 都是透過 npm 來安裝和管理。Grunt 這個工具大概就等於 Ruby 中的 rake ,它可以透過一些設定讓你輕鬆完成一些例行性的任務,例如壓縮檔案,編譯 coffee less,搬移到目標目錄,單元測試等等。之後就可以透過一個指令,就把所有的事情做好。

安裝

為了能夠使用 Grunt 你必須安裝 grunt-cli 就是 Grunt 的 Command Line Interface 到您的系統。
安裝過程可能會需要 sudo 或這在 windows 底下使用管理者身份執行。

繼續閱讀

分享到

HTML Tag

  • <h1> - <h6> 標題
  • <p> 文字段落,注意在裡面的空白,無論連續幾個都會被當做一個。此時可以使用 &nbsp;

    繼續閱讀

分享到

Compass 整理筆記

使用 Compass 之前需要先安裝 ruby,這裡我們可以透過官方
的教學來安裝,建議使用 rvm 的方式來管理各種版本的 ruby。

繼續閱讀

分享到

Bower 簡介

Bower 是一套管理網頁套件的工具,他提供了一種通用且不受限制的方案來解決管理前端相關的套件如:jquery。
支援的系統非常廣泛,並沒有太多相依性的東西。開發者也可以透過他管理套件的相依性和升級等等的問題。
有了它,就不用到處去下載套件檔案(jquery, bootstrap)。

繼續閱讀

分享到

Box 屬性意義

  • display: block : 前後會插入換行,寬會填滿父元素,高則是配合內容。可以用 width, height 設定。
    預設: h1, p, div

  • display: inline : 不會換行,會連成一行。寬高都是依照內容,且不能使用 width, height。
    預設: span, a, em

  • display: inline-block : 跟 inline 一樣,但能夠使用 width, height 設定寬高。

  • display: list-item : 變成 marker + block。

  • display: run-in : 如下圖 h2 被指定 run-in 它就會變成 inline 後續的元素如果是 block 就會如圖一樣合體。但是後續的元素如果是 inline 或者套用了 float, position ,那麼 h2 就會是 block。 註: Firefox 和 IE7 目前都不支援 run-in

繼續閱讀

分享到

viewport 與 media query

簡易觀念

整個 Responsive Web Design 最主要的就是靠 css 中的 media query 搭配 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 這兩個部分來達成。

簡言之就是透過

繼續閱讀

分享到

CSS 選擇器筆記

*


通用選擇器 -> 套用所有元素

1
* {color: yellow;}

繼續閱讀

分享到

CSS 覆寫規則

你是否曾經遇過這種情形,當您試著要套用某個 CSS 規則到元素的時候,它就是不產生變化。
網頁看起來就是忽略了您的 CSS ,然後根本搞不清楚到底是為什麼。
也許您使用了 !important 作為您最後的手段,這裡就有一個很好的機會來理解 CSS 選擇器的優先順序。

繼續閱讀

分享到