rivendellweb pattern library

Simple: 6 Columns 

<div class="grid--six">
     <div class="grid-item">1</div>
     <div class="grid-item">2</div>
     <div class="grid-item">3</div>
     <div class="grid-item">4</div>
     <div class="grid-item">5</div>
     <div class="grid-item">6</div>
     <div class="grid-item">7</div>
     <div class="grid-item">8</div>
     <div class="grid-item">9</div>
     <div class="grid-item">10</div>
     <div class="grid-item">11</div>
     <div class="grid-item">12</div>
     <div class="grid-item">13</div>
     <div class="grid-item">14</div>
     <div class="grid-item">15</div>
     <div class="grid-item">16</div>
     <div class="grid-item">17</div>
     <div class="grid-item">18</div>
     <div class="grid-item">19</div>
     <div class="grid-item">20</div>
     <div class="grid-item">21</div>
     <div class="grid-item">22</div>
     <div class="grid-item">23</div>
     <div class="grid-item">24</div>
 </div>
 
<div class="grid--{{ name }}">
  {{#each gridItems as |item|}}
    <div class="grid-item">{{ item.text }}</div>
  {{/each}}
</div>
 
{
  "gridItems": [
    {
      "text": "1"
    },
    {
      "text": "2"
    },
    {
      "text": "3"
    },
    {
      "text": "4"
    },
    {
      "text": "5"
    },
    {
      "text": "6"
    },
    {
      "text": "7"
    },
    {
      "text": "8"
    },
    {
      "text": "9"
    },
    {
      "text": "10"
    },
    {
      "text": "11"
    },
    {
      "text": "12"
    },
    {
      "text": "13"
    },
    {
      "text": "14"
    },
    {
      "text": "15"
    },
    {
      "text": "16"
    },
    {
      "text": "17"
    },
    {
      "text": "18"
    },
    {
      "text": "19"
    },
    {
      "text": "20"
    },
    {
      "text": "21"
    },
    {
      "text": "22"
    },
    {
      "text": "23"
    },
    {
      "text": "24"
    }
  ],
  "name": "six"
}
  • Content: 
    .grid-item {
  background-color: var(--color-anchor);
  color: var(--color-white);
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  height: 200px;

  &:nth-child(even) {
    background-color: var(--color-cloud);
    color: var(--color-charcoal);
  }
}

.grid--default,
.grid--four {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  grid-auto-flow: row;
}

.grid--six {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  grid-auto-flow: row;
}

.grid--eight {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1rem;
  grid-auto-flow: row;
}

.grid--twelve {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  grid-auto-flow: row;
}

.grid--fifteen {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 1rem;
  grid-auto-flow: row;
}

.grid--compound12 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr;
  gap: 1rem;
  grid-auto-flow: row;
}


.grid--three-uneven-center {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  gap: 0 2rem;
  grid-auto-flow: row;
}

.grid--three-uneven {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  gap: 0 2rem;
  grid-auto-flow: row;

  & > .video {
    grid-column: 2 / 2;
  }

}
  • URL: /components/raw/simple/simple.css
  • Filesystem Path: src/components/03-grids/01-simple/simple.css
  • Size: 1.3 KB

No notes defined.