RokSprocket Module
RokSprocket這套模組主要能將文章以不同排列方式呈現，有五種文章呈現型態可做選擇，其中還許多細部的設定，讓呈現的效果更為豐富。另外，這套模組除了能支援Joomla! content外，也能支援k2 content，對於k2的使用者來說又多了一種文章呈現的模組可供選擇。當然還有一個最重點，一定要推見的原因：就是RokSprocket這套模組使用是不需要付費的，完全提供免費下載使用，真是佛心來的。
但今天這裡不加以介紹RokSprocket這套模組的使用方式（詳細使用方式請各位再自行摸索，有問題可以在下面留言版提問喔。）
模組名稱:RokSprocket 下載連結
讓RokSprocket在Responsive框架下正常運作
這裡要介紹：如何讓RokSprocket能在Responsive框架下運作。當然，前提是你所使用的版型是以Responsive框架做設計，這樣下面所說明的才作用。
範例說明：首先，在模組設定裡，選擇呈現型態為mosaic。
設定完成並儲存後，前台所呈現樣貌。
然而，雖然所選擇的佈景主題有支援Responsive，但RokSprocket模組裡css並沒有額外寫入與Responsive相關的語法在裡頭，因此當我們用手機瀏覽時，會呈現這樣。
而真正加入Responsive語法後，正常用手機瀏覽應該會呈現這樣。
接下來，我們開始將Responsive語法寫入RokSprocket模組裡。
由於剛剛介紹的文章呈現類型為mosaic，因此我們要針對這部分進行修正，就必須進入mosaic.css裡填加語法。
打開 /templates/佈景主題名稱/roksprocket/layouts/mosaic/themes/default/mosaic.css
在mosaic.css檔案裡，將這一段加在最後面:
/* Responsive */
@media only screen and (min-width: 960px) and (max-width: 1199px) {
.sprocket-mosaic-item .sprocket-mosaic-title {font-size: 1.4em;}
.sprocket-mosaic-text-container {margin: 15px -5px 0 -5px;}
.sprocket-mosaic-item .sprocket-mosaic-text {font-size: 100%;}
@media only screen and (min-width: 768px) and (max-width: 959px) {
.sprocket-mosaic-item .sprocket-viewicon, .sprocket-mosaic-item .sprocket-viewicon span {width: 28px;height: 29px;}
.sprocket-mosaic-item .sprocket-viewicon span {background-position: 7px 8px;}
.sprocket-mosaic-item .sprocket-mosaic-title {font-size: 1.5em;}
.sprocket-mosaic-columns-1 [data-mosaic-item], .sprocket-mosaic-columns-2 [data-mosaic-item], .sprocket-mosaic-columns-3 [data-mosaic-item], .sprocket-mosaic-columns-4 [data-mosaic-item], .sprocket-mosaic-columns-5 [data-mosaic-item], .sprocket-mosaic-columns-6 [data-mosaic-item] {width: 33.34%;}
.sprocket-mosaic-text-container {margin: 15px -5px 0 -5px;}
.sprocket-mosaic-item .sprocket-mosaic-text {font-size: 100%;}
}
@media only screen and (max-width: 767px) {
.sprocket-mosaic .sprocket-mosaic-order li, .sprocket-mosaic .sprocket-mosaic-filter li {padding: 10px 5px;font-size: 0.8em;}
.sprocket-mosaic-item .sprocket-viewicon {display: none;}
.sprocket-mosaic-item .sprocket-mosaic-text {font-size: 100%;}
.sprocket-mosaic-item .readmore {padding: 2px 6px;}
.sprocket-mosaic-item .sprocket-mosaic-title {font-size: 1.3em;}
.sprocket-mosaic-text-container {margin: 15px -5px 0 -5px;}
}
@media only screen and (min-width: 481px) and (max-width: 767px) {
.sprocket-mosaic-columns-1 [data-mosaic-item], .sprocket-mosaic-columns-2 [data-mosaic-item], .sprocket-mosaic-columns-3 [data-mosaic-item], .sprocket-mosaic-columns-4 [data-mosaic-item], .sprocket-mosaic-columns-5 [data-mosaic-item], .sprocket-mosaic-columns-6 [data-mosaic-item] {width: 50%;}
}
@media only screen and (max-width: 480px) {
.sprocket-mosaic-text-container {display: none;}
.sprocket-mosaic-columns-1 [data-mosaic-item], .sprocket-mosaic-columns-2 [data-mosaic-item], .sprocket-mosaic-columns-3 [data-mosaic-item], .sprocket-mosaic-columns-4 [data-mosaic-item], .sprocket-mosaic-columns-5 [data-mosaic-item], .sprocket-mosaic-columns-6 [data-mosaic-item] {width: 100%;}
.sprocket-mosaic .sprocket-mosaic-order, .sprocket-mosaic .sprocket-mosaic-filter {float: none;display: inline-block;margin-left: 2px;}
.sprocket-mosaic .sprocket-mosaic-filter li:first-child {margin-left: -2px;}
.sprocket-mosaic .sprocket-mosaic-order li {margin-left: -2px;}
.sprocket-mosaic .sprocket-mosaic-filter li {margin-right: -2px;}
.sprocket-mosaic .sprocke
如此RokSprocket的mosaic文章呈現類型就可以支援Responsive框架，其他呈現類型，就依此類推了。
