0

グリッドの視覚化https://github.com/Team-Sass/Singularity/wiki/Creating-Grids#visualizing-your-gridsの指示に従って、トグル機能を機能させようとしました。

まず、誰かが以下が実際に何をすることになっているのか説明できますか?

compass install singularitygs/grid-toggle

フォルダーといくつかのファイルを作成すると想定していますが、コマンドを実行しても何も起こりません。私が次のことをすると..

compass install singularitygs/box-sizing

期待どおりにディレクトリとファイルを作成します。

私のプロジェクトは Singularity で正常に動作します (これは 1 つの SASS ファイル、1 つの html ファイルです)

@include background-gridは SCSS ファイル内で機能しますが、それが最初の方法であり、トグル バージョンに興味があります。

提供された grid.js AND grid.min.js ファイルを手動で含めようとし、index.html ファイルの先頭でそれらを参照しました。提案どおり、 body タグにdata-development-grid="show"を追加しました。トグルで動作させることはもちろん、デフォルトでグリッドを表示することさえできません。

ここに私の宝石ファイルの一部があります

gem 'toolkit', '~>1.0.0'
gem 'singularitygs', '~>1.0.7'
gem 'breakpoint', '~>2.0.2'

group :development do
  gem 'guard'
  gem 'guard-compass'
  gem 'guard-livereload'
end

そして私の単純なHTMLファイル

<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/screen.css" />
<script type="text/javascript" src="javascripts/grid.min.js"></script>
<script type="text/javascript" src="javascripts/grid.js"></script>
</head>
<body data-development-grid="show">
  <h1>test</h1>
  <div id="mydiv" class="no-mqs container">
    <p>This is my div</p>
  </div>
</body>
</html>

そして私の1つのSCSSファイル

@import 'compass';
@import 'compass/reset';
@import 'toolkit';
@import 'singularitygs';
@import 'breakpoint';

上記のすべてのインポートの下に、いくつかのグリッド変数、コンテナー クラス、その他の基本的なスタイルがいくつかあります。

どんな助けでも感謝します。

ありがとう

4

2 に答える 2

2

簡単な答えは、約 2 質問前の同じトピックに関する私の質問と回答を参照することです。ただし、基本的には3つの方法があります。最初に見つけたもので、グリッドを表示したい要素に「@include background-grid」を配置できます。指示どおりに grid-toggle をインストールできないことがわかると思いますが、そうする必要はないと思います。2 番目の方法はトグルです。* { ... } セレクターまたは html{ ... } セレクターの style.scss に '@include grid-toggle' を配置する必要があります。Web ページのヘッドでスクリプト grid.js を参照します。ただし、そのスクリプトは、body div にグリッドが必要であることを前提としています。body 開始 div 内に data-development-grid="show" (または "hide") を追加します。

ラップ div に data-development-grid="show" を追加することで、ラップ div などの別の要素にグリッドを配置できます (ラップを使用していませんか?)。ただし、grid.js を変更する必要があります。ファイル。これがガイドとしての私のjavascriptバージョンです（うまくいくようですが、私はプログラマーではありません！）：

(function() { 

  window.onload = function() {
    var body = document.body;
        body.onkeypress = function(e) {
            if (e.keyCode === 103 || e.charCode === 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');
                }
      }

    };

  };

})();

ところで、ボディまたはラップ (どちらを選択しても) に背景色または画像を指定しないでください。これは、グリッドが下にあるため表示されないためです。

3 番目の方法はオーバーレイです。これは、背景色の上に配置されるため、特に気に入っています。このために、@include grid-overlay('#wrap'); を追加します。style.scss ファイルの *{ ...} または html{ ... } 要素に追加します。左下に 4 本線の記号が表示され、マウスオーバーするとグリッドが表示されます - mouseoff = 表示されなくなります。

ラップ div にグリッドが必要だと仮定しましたが、好きな場所に配置できます。

これが役立つことを願っています。

于 2013-10-01T15:58:40.563 に答える
0

私にとっては、次のコマンドを使用して機能しました: bundle exec compass install singularitygs/grid-toggle

于 2014-03-01T14:00:31.247 に答える