有沒有一個例子或更多的文件，如何做到可視化網格？

我在計算如何打開網格可視化時遇到了一些問題：https://github.com/Team-Sass/Singularity/wiki/Creating-Grids#visualizing-your-grids。有人能指點我更多的幫助或分享一個例子嗎？有沒有一個例子或更多的文件，如何做到可視化網格？

來源

2013-08-21 jmoughon

「有點麻煩」是指錯誤信息還是什麼？ –

我無法想象它。我不是100％確定如何正確調用mixin。 – jmoughon

這可以內singularitygs紅寶石寶石深中找到：

電網覆蓋&背景

有三種方法可以顯示網格：

後臺手動適用於元件

.container { 
    @include background-grid; 
}

添加一個開關切換覆蓋 -

@include grid-overlay（'。container'）;
用JavaScript切換網格 @include grid-toggle在SCSS * {...}或html {...}元素中。添加[數據開發網格=「秀」]項要應用到電網加入「grid.js」的HTML頭

第一個將應用網格背景使用您的格計算你的容器設置斷點媒體等

第二個將增加一個開關，你的頁面，它允許您通過將鼠標懸停切換到查看網格覆蓋在你的容器（或如果沒有提供）。如果您需要使用鼠標進行其他操作，則可以通過檢查並檢查以永久性地切換覆蓋：將鼠標懸停在您的樣式面板中。

第三個將允許您通過按下鍵盤上的'g'來打開和關閉背景網格。

我無法獲得grid.js的工作，所以我用一些jQuery重寫了它。這裏是我的版本：

//用於隱藏/顯示網格中的工作的jQuery/JavaScript的腳本

$(document).ready(function() { 
    $('html').keypress(function(event) { 

    if (event.which === 103) { 
     var wrap = document.getElementById("wrap"); 
     var dev = wrap.getAttribute('data-development-grid'); 
     if (dev === null || dev === 'hide') { 
      wrap.setAttribute('data-development-grid', 'show'); 
     } 
     else { 
      wrap.setAttribute('data-development-grid', 'hide'); 
     } 
    } 

});

}）;

我覺得方法2相當整齊。您會在網頁左下角獲得4個豎線的符號，網格將顯示鼠標懸停。類似於Susy的主頁

來源

2013-09-07 19:18:23 prasutagus

有沒有一個例子或更多的文件，如何做到可視化網格？

回答

相關問題