Tiles

A single tile element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids

Untuk membangun tata letak 2 dimensi yang rumit, Anda hanya perlu elemen tunggal: tile


<div class="tile">
    <!-- Elemen tile ajaib! -->
</div>

Vertical...

Top tile

...tiles

Bottom tile

Middle tile

Dengan gambar

Wide tile

Selaras dengan tile kanan

Tall tile

Dengan lebih banyak konten

<template>
    <div class="tile is-ancestor">
        <div class="tile is-4 is-vertical is-parent">
            <div class="tile is-child box">
                <p class="title">Satu</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
            </div>
            <div class="tile is-child box">
                <p class="title">Dua</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
            </div>
        </div>
        <div class="tile is-parent">
            <div class="tile is-child box">
                <p class="title">Tiga</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
                <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
                <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
            </div>
        </div>
    </div>
</template>

# Modifikasi

Elemen tile memiliki 16 modifikasi:

  • 3 kontekstual modifikasi
    • is-ancestor
    • is-parent
    • is-child
  • 1 directional modifikasi
    • is-vertical
  • 12 ukuran horisontal modifikasi
    • dari is-1
    • sampai is-12

Cara kerjanya: Bersarang

Semuanya adalah tile! Untuk membuat kotak tile, Anda hanya perlu membuat elemen tile

Mulailah dengan tile ancestor yang akan membungkus semua tile lain.

<div class="tile is-ancestor">
    <!-- Semua elemen tile lainnya -->
</div>

Tambahkan elemen tile yang akan mendistribusikan diri secara horizontal.

<div class="tile is-ancestor">
    <div class="tile">
        <!-- Tambahkan konten atau tile lain -->
    </div>
    <div class="tile">
        <!-- Tambahkan konten atau tile lain -->
    </div>
</div>

Anda dapat mengubah ukuran ubin apa pun sesuai dengan 12 column grid. Misalnya, is-4 akan mengambil 1/3 dari ruang horizontal:

<div class="tile is-ancestor">
    <div class="tile is-4">
        <!-- 1/3 -->
    </div>
    <div class="tile">
        <!-- tile ini akan mengambil sisanya: 2/3 -->
    </div>
</div>

Jika Anda ingin menumpuk tile secara vertikal, tambahkan is-vertikal pada tile induk:

<div class="tile is-ancestor">
    <div class="tile is-4 is-vertical">
        <div class="tile">
            <!-- Top tile -->
        </div>
        <div class="tile">
            <!-- Bottom tile -->
        </div>
    </div>
    <div class="tile">
        <!-- tile ini akan mengambil seluruh ruang vertikal -->
    </div>
</div>

Segera setelah Anda ingin menambahkan konten ke tile, cukup:

  • tambahkan kelas yang Anda inginkan, seperti box
  • tambahkan is-child modifikasi di tile
  • tambahkan pengubah is-parent pada induk tile
<div class="tile is-ancestor">
    <div class="tile is-4 is-vertical is-parent">
        <div class="tile is-child box">
            <p class="title">Satu</p>
        </div>
        <div class="tile is-child box">
            <p class="title">Dua</p>
        </div>
    </div>
    <div class="tile is-parent">
        <div class="tile is-child box">
            <p class="title">Tiga</p>
        </div>
    </div>
</div>

Satu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Dua

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Tiga

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

<template>
    <div class="tile is-ancestor">
        <div class="tile is-4 is-vertical is-parent">
            <div class="tile is-child box">
                <p class="title">Satu</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
            </div>
            <div class="tile is-child box">
                <p class="title">Dua</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
            </div>
        </div>
        <div class="tile is-parent">
            <div class="tile is-child box">
                <p class="title">Tiga</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
                <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
                <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
            </div>
        </div>
    </div>
</template>

Persyaratan bersarang

3 level paling tidak...

Anda membutuhkan setidaknya 3 level susunan bertingkat:

tile is-ancestor
└─── tile is-parent
└─── tile is-child
...tetapi lebih banyak level jika Anda mau!
Tentu bisa, bagaimanapun, tile bersarang lebih dalam dari itu, dan lebih mudah! 
<template>
    <div class="tile is-ancestor">
        <div class="tile is-vertical is-8">
            <div class="tile">
                <div class="tile is-parent is-vertical">
                    <article class="tile is-child box">
                        <!-- Masukkan konten apa pun yang Anda inginkan -->
                    </article>
                    <article class="tile is-child box">
                        <!-- Masukkan konten apa pun yang Anda inginkan -->
                    </article>
                </div>
                <div class="tile is-parent">
                    <article class="tile is-child box">
                        <!-- Masukkan konten apa pun yang Anda inginkan -->
                    </article>
                </div>
            </div>
            <div class="tile is-parent">
                <article class="tile is-child box">
                    <!-- Masukkan konten apa pun yang Anda inginkan -->
                </article>
            </div>
        </div>
        <div class="tile is-parent">
            <article class="tile is-child box">
                <!-- Masukkan konten apa pun yang Anda inginkan-->
            </article>
        </div>
    </div>
</template>

3 Columns

1
2
3
4
5
6
7
8
9
10 
<template>
    <section>
        <div class="tile is-ancestor">
            <div class="tile is-parent">
                <article class="tile is-child box set-danger"> 1 </article>
            </div>
            <div class="tile is-parent">
                <article class="tile is-child box set-warning"> 2 </article>
            </div>
            <div class="tile is-parent">
                <article class="tile is-child box set-success"> 3 </article>
            </div>
        </div>
        <div class="tile is-ancestor">
            <div class="tile is-vertical is-8">
                <div class="tile">
                    <div class="tile is-parent is-vertical">
                        <article class="tile is-child box"> 4 </article>
                        <article class="tile is-child box"> 5  </article>
                    </div>
                    <div class="tile is-parent">
                        <article class="tile is-child box"> 6 </article>
                    </div>
                </div>
                <div class="tile is-parent">
                    <article class="tile is-child box"> 7 </article>
                </div>
            </div>
            <div class="tile is-parent">
                <article class="tile is-child box"> 8 </article>
            </div>
        </div>
        <div class="tile is-ancestor">
            <div class="tile is-parent">
                <article class="tile is-child box"> 9 </article>
            </div>
            <div class="tile is-parent is-8">
                <article class="tile is-child box"> 10 </article>
            </div>
        </div>
    </section>
</template>

4 Columns

1
2
3
4
5
6
7
8
9
10
11
12
13
14 
<template>
    <section>
        <div class="tile is-ancestor">
            <div class="tile is-parent"><article class="tile is-child box set-danger"> 1 </article></div>
            <div class="tile is-parent"><article class="tile is-child box set-warning"> 2   </article></div>
            <div class="tile is-parent"><article class="tile is-child box set-success"> 3 </article></div>
            <div class="tile is-parent"><article class="tile is-child box set-info"> 4 </article></div>
        </div>
        <div class="tile is-ancestor">
            <div class="tile is-vertical is-9">
                <div class="tile">
                    <div class="tile is-parent"><article class="tile is-child box set-light"> 5 </article></div>
                    <div class="tile is-8 is-vertical">
                        <div class="tile">
                            <div class="tile is-parent"><article class="tile is-child box set-light"> 6 </article></div>
                            <div class="tile is-parent"><article class="tile is-child box set-light"> 7 </article></div>
                        </div>
                        <div class="tile is-parent"><article class="tile is-child box set-light"> 8 </article></div>
                    </div>
                </div>
                <div class="tile">
                  <div class="tile is-8 is-parent"><article class="tile is-child box set-light"> 9 </article></div>
                  <div class="tile is-parent"><article class="tile is-child box set-light">10</article></div>
                </div>
            </div>
            <div class="tile is-parent"><article class="tile is-child box set-light"> 11 </article></div>
        </div>
        <div class="tile is-ancestor">
            <div class="tile is-parent"><article class="tile is-child box set-light"> 12 </article></div>
            <div class="tile is-parent is-6"><article class="tile is-child box set-light"> 13 </article></div>
            <div class="tile is-parent"><article class="tile is-child box set-light"> 14 </article></div>
        </div>
    </section>
</template>