2

グリッドの視覚化を有効にする方法を理解するのに少し苦労しています: https://github.com/Team-Sass/Singularity/wiki/Creating-Grids#visualizing-your-grids。誰かが私にもっと助けを求めたり、例を共有したりできますか?

4

1 に答える 1

2

これは、singularitygs Ruby gem の奥深くにあります。

グリッドオーバーレイと背景

グリッドを表示するには、次の 3 つの方法があります。

  1. 背景を要素に手動で適用する

    .container {
  @include background-grid;
}

  2. オーバーレイを切り替えるスイッチを追加 -

    @include grid-overlay('.container');

  3. SCSS * { … } または html { … } 要素で JavaScript @include grid-toggle を使用してグリッドを切り替えます。グリッドを適用したい項目に[data-development-grid="show"]を追加HTMLのheadに「grid.js」を追加

    1 つ目は、グリッド設定、メディア ブレークポイントなどを使用して計算されたグリッド バックグラウンドをコンテナーに適用します。

    2 つ目は、ページにスイッチを追加します。これにより、スイッチの上にカーソルを置くことで、コンテナー (または提供されていない場合) の上にグリッド オーバーレイを表示できます。他の目的でマウスが必要な場合は、スタイル パネルで :hover を調べてチェックすることで、オーバーレイを永続的にオンに切り替えることができます。

    3 つ目は、キーボードの「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 はかなりきちんとしていると思います。Web ページの左下に 4 つの垂直バーのシンボルが表示され、マウスオーバーでグリッドが表示されます。Susyのホームページに似ている

于 2013-09-07T19:18:23.060 に答える