cssflexboxbulma

Nested Tiles Bulma


I'm trying Bulma CSS Framework. There is no class tile in the bulma css-files. But still I find a lot of really nice examples like this all over the place. Did it have a tile class before, but gone now?

  <div class="tile is-ancestor m-2">
    <div class="tile is-vertical is-8">
      <div class="tile">
        <div class="tile is-parent is-vertical">
          <article class="tile is-child notification is-primary">
            <p class="title">Vertical Tile...</p>
            <p class="subtitle">Top Tile</p>
          </article>
          <article class="tile is-child notification is-info">
            <p class="title">...Vertical Tile</p>
            <p class="subtitle">Bottom Tile</p>
          </article>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child notification is-success">
            <p class="title">Middle Tile</p>
            <p class="subtitle">Middle Tile</p>
          </article>
        </div>
      </div>
      <div class="tile is-parent">
        <article class="tile is-child notification is-danger">
          <p class="title">Wide Tile</p>
          <p class="subtitle">Wide Tile</p>
        </article>
      </div>
    </div>
    <div class="tile is-parent">
      <article class="tile is-child notification is-warning">
        <div class="content">
          <p class="title">Tall Tile</p>
          <p class="subtitle">Tall Tile</p>
          <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat vestibulum finibus. Nam fringilla urna sed dui aliquet pulvinar. Ut iaculis, lacus vitae posuere fringilla, quam tellus varius orci, nec.</div>
        </div>
      </article>
    </div>
  </div>

Solution

  • Yes, tile has been replaced by the Smart Grid which uses the grid class.


    The Migrate to v1 #Breaking Changes states the following:

    ⛔️ Deprecated ✅ How to fix
    Tiles are deprecated
    <!-- Before -->
    <div class="tile is-ancestor">
    <div class="tile is-parent">
    <article class="tile is-child box">
    <p class="title">Hello World</p>
    <p class="subtitle">What is up?</p>
    </article>
    </div>
    <div class="tile is-parent">
    <article class="tile is-child box">
    <p class="title">Foo</p>
    <p class="subtitle">Bar</p>
    </article>
    </div>
    </div>
    Use the new and improved Smart Grid
    <!-- After -->
    <div class="grid">
    <div class="cell">
    <article class="box">
    <p class="title">Hello World</p>
    <p class="subtitle">What is up?</p>
    </article>
    </div>
    <div class="cell">
    <article class="box">
    <p class="title">Foo</p>
    <p class="subtitle">Bar</p>
    </article>
    </div>
    </div>