1

Frameless グリッドを (Rails ループで) 動的に埋めようとしていますが、うまくいきません..

LESS と @1col (@2cols など) を変数として使用する概念を理解しています。しかし、サイトに示されている例 (または、サイトに埋め込まれているもの、framelessgrid.com/) は、多数のハードコーディングされた列の使用を示しています..

これがframelessgrid.comのコードの一部です

LESS ファイル:

@font-size: 17;
@line: 24;
@em: @font-size*1em;

@column: 48;
@gutter: 24;

   @1col:( 1 * (@column + @gutter) - @gutter) / @em;
  @1cols: @1col;
  @2cols:( 2 * (@column + @gutter) - @gutter) / @em;
  @3cols:( 3 * (@column + @gutter) - @gutter) / @em;
  @4cols:( 4 * (@column + @gutter) - @gutter) / @em;
  @5cols:( 5 * (@column + @gutter) - @gutter) / @em;
  @6cols:( 6 * (@column + @gutter) - @gutter) / @em;
  @7cols:( 7 * (@column + @gutter) - @gutter) / @em;
  @8cols:( 8 * (@column + @gutter) - @gutter) / @em;
  @9cols:( 9 * (@column + @gutter) - @gutter) / @em;
@10cols: (10 * (@column + @gutter) - @gutter) / @em;
@11cols: (11 * (@column + @gutter) - @gutter) / @em;
@12cols: (12 * (@column + @gutter) - @gutter) / @em;
@13cols: (13 * (@column + @gutter) - @gutter) / @em;
@14cols: (14 * (@column + @gutter) - @gutter) / @em;
@15cols: (15 * (@column + @gutter) - @gutter) / @em;
@16cols: (16 * (@column + @gutter) - @gutter) / @em;

.width (@cols:1) {
    width: (@cols * (@column + @gutter) - @gutter) / @em;
}
//....


 article section, #colophon {
padding: 0 18/@em;
margin: 0 auto;
max-width: @8cols;
}

#grid {
height: @4cols;
position: relative;
overflow: hidden;
}

.col {
    background: @highlight;
    height: 100%;
    width: @1col;
    position: absolute;
    left: 50%; top: 0;
    margin-left: 12/@em;
}

#grid .col {
    .transition(background-color 0.382s ease-out);
}

    .col2 {margin-left: (1*72+12)/@em;}
    .col3 {margin-left: (2*72+12)/@em;}
    .col4 {margin-left: (3*72+12)/@em;}
    .col5 {margin-left: (4*72+12)/@em;}
    .col6 {margin-left: (5*72+12)/@em;}
    .col7 {margin-left: (6*72+12)/@em;}
    .col8 {margin-left: (7*72+12)/@em;}
    .col9 {margin-left: (8*72+12)/@em;}
    .col10 {margin-left: (9*72+12)/@em;}
    .col11 {margin-left: (10*72+12)/@em;}
    .col12 {margin-left: (11*72+12)/@em;}
    .col13 {margin-left: (12*72+12)/@em;}
    .col14 {margin-left: (13*72+12)/@em;}
    .col15 {margin-left: (14*72+12)/@em;}
    .col16 {margin-left: (15*72+12)/@em;}
    .col17 {margin-left: (16*72+12)/@em;}
    .col18 {margin-left: (17*72+12)/@em;}
    .col19 {margin-left: -(1*72-12)/@em;}
    .col20 {margin-left: -(2*72-12)/@em;}
    .col21 {margin-left: -(3*72-12)/@em;}
    .col22 {margin-left: -(4*72-12)/@em;}
    .col23 {margin-left: -(5*72-12)/@em;}
    .col24 {margin-left: -(6*72-12)/@em;}
    .col25 {margin-left: -(7*72-12)/@em;}
    .col26 {margin-left: -(8*72-12)/@em;}
    .col27 {margin-left: -(9*72-12)/@em;}
    .col28 {margin-left: -(10*72-12)/@em;}
    .col29 {margin-left: -(11*72-12)/@em;}
    .col30 {margin-left: -(12*72-12)/@em;}
    .col31 {margin-left: -(13*72-12)/@em;}
    .col32 {margin-left: -(14*72-12)/@em;}
    .col33 {margin-left: -(15*72-12)/@em;}
    .col34 {margin-left: -(16*72-12)/@em;}
    .col35 {margin-left: -(17*72-12)/@em;}
    .col36 {margin-left: -(18*72-12)/@em;}

    .col1, .col2, .col3, .col4, .col19, .col20, .col21, .col22 {
        background: @emphasis;
    }

HTML ファイル:

<article>


            <figure id="grid">
                <div class="col col1"></div>
                <div class="col col2"></div>
                <div class="col col3"></div>
                <div class="col col4"></div>
                <div class="col col5"></div>
                <div class="col col6"></div>
                <div class="col col7"></div>
                <div class="col col8"></div>
                <div class="col col9"></div>
                <div class="col col10"></div>
                <div class="col col11"></div>
                <div class="col col12"></div>
                <div class="col col13"></div>
                <div class="col col14"></div>
                <div class="col col15"></div>
                <div class="col col16"></div>
                <div class="col col17"></div>
                <div class="col col18"></div>
                <div class="col col19"></div>
                <div class="col col20"></div>
                <div class="col col21"></div>
                <div class="col col22"></div>
                <div class="col col23"></div>
                <div class="col col24"></div>
                <div class="col col25"></div>
                <div class="col col26"></div>
                <div class="col col27"></div>
                <div class="col col28"></div>
                <div class="col col29"></div>
                <div class="col col30"></div>
                <div class="col col31"></div>
                <div class="col col32"></div>
                <div class="col col33"></div>
                <div class="col col34"></div>
                <div class="col col35"></div>
                <div class="col col36"></div>
            </figure>


</article>

したがって、クラス col2 から col18 の列が画面の中央に表示され始めて右に移動し、сcol19 から col36 の列は中央から左に移動します。

列の動的作成でこの概念を使用するにはどうすればよいですか??

私は次のようなことをしたい:

   <figure id="grid">
  <% My_model.all.each do |m| %>
   <div class="col col1"> <%= m.content %> </div>
  <% end %> 
   </div>

ただし、これは画面の中央からグリッドへの入力を開始します (.col の CSS のため)。

 .col{left: 50%;}

もちろん left:0 に切り替えることもできますが、フレームレスの概念を否定するものです (Framelessgrid.com の pt. 3 :

  1. ビューポートの中央に配置します。グリッドをビューポートの中央に水平に合わせます。列数が偶数のグリッド (図) の場合、ビューポートの中心点を、中央にある 2 つの列の間のガターの中央に合わせます。奇数のグリッドの場合は、最も中央の列の中央に揃えます。

では、この概念に固執する方法はありますが、ループから列を動的に作成/移入するにはどうすればよいでしょうか?

4

1 に答える 1

0

したがって、この質問が投票されたので。

これが、Rails erbコードを介してグリッドを再作成した方法です（絶対位置を維持）。幅が約12列の列が必要だったので、左右にループしました。

LESSファイルに追加：

.contain{

    width: @6cols;
    height: @2cols;
    margin-bottom: @gutter/@em;
}

コントローラ：

def index
    @counter = 0
    @ticker =  0
end

HTML：

<figure id="grid">
        <% MyModel.all.each_with_index do |p, i| %>         
    <div class = "contain" >                
            <% @counter = @counter + 2 %>               
            <div class="col col<%= @counter  %>" id ="message_text"> <%= @counter %> || <%= i %> 

            </div>
                <% if @counter == 5  %>
                    <% @counter = 18 %>
                            </div>
                        <div class ="return"></div>
                <% elsif @counter == 24 %>
                    <% @counter = -1 %> 
                            <% if  @ticker == 0 %>

    </div>
    <div class ="return"></div>
                        <% end %>

                <% end %>
        <% @ticker = 1 %>               
        <% end %> 
</figure>

ただし、固定幅の列レスポンシブグリッドを実行するより良い（より現実的な）例を次に示します。

LESSファイル：

@column: 85;    // The column-width of your grid in pixels
@gutter: 20;    // The gutter-width of your grid in pixels
@half_gutter : @gutter / 2;

@model_fix : 7.5/@em;


#build figure {
    height: 100%;
    background: @background;
    position: absolute;
    overflow: none;
    margin: 0 @gutter/@em;


}

#build .col {
    float: left;
    left: 0;
        background: white;

}


.col {

    height: @1col;
    width: @1col;
    position: absolute;
    margin: 0 @half_gutter/@em @gutter/@em @half_gutter/@em;

}

@media screen and (min-width: 78.750em) {


    .offset {
    left: 50% -  @8cols ; 

    }

    #build figure {
        height: 100%;
        background: @background;
        position: relative;
        overflow: none;
        margin: 0 auto 0 (@half_gutter - 4)/@em;
        width: @12cols + @gutter/@em;

    }
}


.message_text .col {
    width: @2cols;
    height: @2cols - @model_fix*2;
    position: relative;
    color: @grey_text;

}

.message_text #mess_text{
    font-size: 14/@em;
    margin: @half_gutter / @em;
}

HTMLファイル：

<body>
<article>
    <section id="build">                
        <figure id = "models" class ="offset">
            <% @scenes.each_with_index do |s, i | %>
                <div class ="message_text ">
                    <div class="col">
                        <div id = "model_text" >

                <%= link_to s.title, scene_path(s) %> 


                        </div>
                        </div>
                </div>
            <% end %>   
        </figure>
    </section>
</article>
</body>
于 2012-08-22T00:23:03.647 に答える