使用線上免費網頁樣式CSS風格(以JSP為例)

在撰寫網頁時，我們通常會為html另外寫CSS來設定其樣式，讓網頁各頁面的版面可以有一個統一的樣式風格，也比較好管理。

除了自己撰寫CSS外，還可以從網路上找到許多免費的樣式資源，可以免費的下載下來使用，有的是就是一個單統的CSS檔，而有的稍微用了其他的方法來匯入CSS檔(例如JQuery)，而CSS的路徑的也要設正確。總之根據不同的免費CSS資源，需要稍微的修改一下才能使用。

Templated是一個提供各種網頁樣式的網站，有許多的免費樣式可以下載使用。因為在之前的使用上花了一點時間搞定，特在此紀錄一下以Templated網站中的一個樣式Transit為例的使用方法。

進入Transit頁面後(如下圖)，可以在上面橫幅的右邊下載其樣式，在Elements的連結中可以點進去看到此樣式的各個html元件的樣子，可以看看自己喜不喜歡在下載使用。

下載下來解壓縮後，可以看到如下的檔案結構，其中根目錄的三個html是網頁範例，css、fonts、images、js各是CSS、字型、圖片和JQuery資料夾。

將css、fonts、images、js四個資料夾複製到自己的網頁專案裡後(例如使用Tomcat寫Servlet、JSP時就是放在Webapps裡)，首先先打開它提供的網頁例子來參考，例如index.html，可以看到它在html的head區中有使用JQuery和CSS的語法，必須將這幾行複製貼上到自己的網頁head中，這裡以JSP網頁為例子，因為有可能JSP網頁不是放在根目錄中，但css、fonts、images、js四個資料夾是放在根目錄中，所以要在匯入script和CSS的語法中加入${pageContext.request.contextPath}來取得根目錄的路徑，如下例這幾行:

<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/skel.min.js"></script>
<script src="${pageContext.request.contextPath}/js/skel-layers.min.js"></script>
<script src="${pageContext.request.contextPath}/js/init.js"></script>
<noscript>
     <link rel="stylesheet" href="${pageContext.request.contextPath}/css/skel.css" />
     <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" />
     <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style-xlarge.css" />
</noscript>

其中<noscript>標籤是指如果瀏覽器不支援JavaScript的話會執行的動作，即匯入CSS，如果瀏覽器有支援JavaScript的話，就會改採用JavaScript匯入CSS的動作，其中

<script src="${pageContext.request.contextPath}/js/init.js"></script>

這行表明了它使用了init.js檔來匯入CSS，所以我們就要來修改init.js來得到正確的CSS匯入。
打開css資料夾中的init.js，可以看到它根據不同的螢幕大小使用不同的CSS，有global、xlarge、large、medium、small、xsmall。

因為JSP網頁可能不是在根目錄的關係，所以跟剛剛一樣，我們需要取得網頁專案的根目錄路徑，只不過這裡是使用JQuery來取得根目錄錄徑，在breakpoints下的global中的href指定的路徑中，在前面加上"window.location.pathname.substring(0, window.location.pathname.indexOf("/",2))"來取得根目錄路徑，修改過後init.js會呈現如以下所示:

/*
 Transit by TEMPLATED
 templated.co @templatedco
 Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
*/

(function($) {

 skel.init({
  reset: 'full',
  breakpoints: {
   global: {
    href: window.location.pathname.substring(0, window.location.pathname.indexOf("/",2))+'/css/style.css',
    containers: 1400,
    grid: { gutters: ['2em', 0] }
   },
   xlarge: {
    media: '(max-width: 1680px)',
    href: window.location.pathname.substring(0, window.location.pathname.indexOf("/",2))+'/css/style-xlarge.css',
    containers: 1200
   },
   large: {
    media: '(max-width: 1280px)',
    href: window.location.pathname.substring(0, window.location.pathname.indexOf("/",2))+'/css/style-large.css',
    containers: 960,
    grid: { gutters: ['1.5em', 0] },
    viewport: { scalable: false }
   },
   medium: {
    media: '(max-width: 980px)',
    href: window.location.pathname.substring(0, window.location.pathname.indexOf("/",2))+'/css/style-medium.css',
    containers: '90%!'
   },
   small: {
    media: '(max-width: 736px)',
    href: window.location.pathname.substring(0, window.location.pathname.indexOf("/",2))+'/css/style-small.css',
    containers: '90%!',
    grid: { gutters: ['1.25em', 0] }
   },
   xsmall: {
    media: '(max-width: 480px)',
    href: window.location.pathname.substring(0, window.location.pathname.indexOf("/",2))+'/css/style-xsmall.css'
   }
  },
  plugins: {
   layers: {
    config: {
     mode: 'transform'
    },
    navButton: {
     breakpoints: 'medium',
     height: '4em',
     html: '',
     position: 'top-left',
     side: 'top',
     width: '6em'
    },
    navPanel: {
     animation: 'overlayX',
     breakpoints: 'medium',
     clickToHide: true,
     height: '100%',
     hidden: true,
     html: '


',
     orientation: 'vertical',
     position: 'top-left',
     side: 'left',
     width: 250
    }
   }
  }
 });

 $(function() {

  var $window = $(window),
   $body = $('body');

  // Disable animations/transitions until the page has loaded.
   $body.addClass('is-loading');

   $window.on('load', function() {
    $body.removeClass('is-loading');
   });

 });

})(jQuery);

這樣配置基本上就完成了，已經可以開始使用修改CSS來套用至自己的網頁了。