Grid Layout w/ UiKit

grid-layout-w-uikit.markdown

Grid Layout w/ UiKit

A Pen by Beibit Sakhanov on CodePen.

License.

index.pug

doctype html

// images
- var image=['https://images.unsplash.com/photo-1468549940493-46152524296c?auto=format&fit=crop&w=952&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D', 'https://images.unsplash.com/photo-1473042904451-00171c69419d?auto=format&fit=crop&w=1075&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D', 'https://images.unsplash.com/photo-1505168125601-4ddfdea4c7e7?auto=format&fit=crop&w=1051&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D', 'https://images.unsplash.com/photo-1466854076813-4aa9ac0fc347?auto=format&fit=crop&w=1489&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D'];

// section
.uk-offcanvas-content
  .uk-section.uk-section-secondary
    // container
    .uk-container.uk-container-small.uk-flex-uk-flex-center
      .uk-grid-medium.uk-grid-match(uk-grid)
        div(class="uk-width-auto@m")
          .uk-grid-collapse.uk-grid-match(uk-grid).uk-flex.uk-flex-center
            each val in image
              each val in image
                // grid
                #grid-item
                  .uk-card(style="margin: 10px; margin-right: 20px;")
                    .uk-card-media-left.uk-cover-container
                      img(src=val alt="Lorem ipsum dolor sit" title="Lorem ipsum dolor sit" uk-cover)
                      canvas(width="150" height="223.2")
                    .uk-card-body(style="padding:15px 0 0 0;")
                      .uk-text-lead.uk-text-small.uk-text-capitalize.uk-text-truncate.uk-text-bold.uk-light(title="Lorem ipsum dolor sit amet") Lorem ipsum dolor sit
                      .uk-text-meta.uk-text-small.uk-text-capitalize.uk-text-truncate(title="Lorem ipsum dolor sit amet") Lorem ipsum dolor sit amet
                      .uk-badge.uk-position-small.uk-position-center-right(title="9.9") 9.9

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.33/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.33/js/uikit-icons.min.js"></script>

style.sass

#grid-item
  .uk-card
    img
      filter: grayscale(100%)
      transition: .2s filter linear
      &:hover
        filter: grayscale(0%)
    .uk-badge
      width: 24px
      height: 24px
      padding: 18px
      font-size: 1em
      margin-right: -18px
      margin-top: 20%
      background-color: #f68d01
      color: #fff
      box-shadow: 0 0 1em rgba(0, 0, 0, 0.25)
    

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.33/css/uikit.min.css" rel="stylesheet" />