PostCSS

We can register and use any postcss plugin we want. This boilerplate come with some plugins already configured.

LostGrid

Basic Columns

1234
<section>
  <span class="bg-red-200">1</span>
  <span class="bg-green-200">2</span>
  <span class="bg-blue-200">3</span>
  <span class="bg-yellow-200">4</span>    
</section>

section {
    lost-utility: clearfix;
}

span {
  lost-column: 1/2;
}

Controlling Cycle

1
2
3
<section class="row">
  <div class="quarter">1</div>
  <div class="half">2</div>
  <div class="quarter">3</div>
</section>

.row {
  lost-utility: clearfix;
}

.quarter {
  lost-column: 1/4 0;
  background-color: lightseagreen;
}

.half {
  lost-column: 1/2 0;
  background-color: lightgoldenrodyellow;
}

Masonry

<section class="masonry-container">
        <div class="masonry-item">
          <g-image src="~/assets/images/cats/cat06.jpg" />
        </div>
        <div class="masonry-item">
          <g-image src="~/assets/images/cats/cat01.webp" />
        </div>
        <div class="masonry-item">
          <g-image src="~/assets/images/cats/cat08.png" />
        </div>
        ...

.masonry-container {
  lost-masonry-wrap: no-flex;
}

.masonry-item {
  lost-masonry-column: 1/2;
}