Grid Layout w/ UiKit alt-2

grid-layout-w-uikit-alt-2.markdown

Grid Layout w/ UiKit alt-2

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'];

// tooltip
- var tooltip='<span class="uk-text-lead uk-text-small uk-light">Lorem ipsum dolor sit amet</span><br><span class="uk-text-muted">Lorem ipsum</span><br><br><span class="uk-text-meta uk-text-small uk-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta purus sit amet tellus varius.</span>'

// 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;" title=tooltip uk-tooltip="pos: right; offset: 5")
                    .uk-badge.uk-position-small.uk-position-center-right(title="9.9")
                      a(href="#") 9.9
                    .uk-inline-clip.uk-transition-toggle
                      img(src=val alt="Lorem ipsum dolor sit" uk-cover)
                      canvas(width="150" height="223.2")
                      .uk-transition-slide-bottom.uk-position-bottom.uk-overlay.uk-overlay-primary(style="padding: 5px;")
                        a(href="#").uk-h4.uk-margin-remove.uk-text-lead.uk-text-small.uk-text-capitalize.uk-text-truncate.uk-text-bold(title="Lorem ipsum dolor sit amet") Lorem ipsum dolor sit amet
                        .uk-text-meta.uk-text-small.uk-text-capitalize(title="Lorem ipsum dolor sit amet")
                          a(href="#" title="Lorem").uk-text-muted Lorem
                          span= " / "
                          a(href="#" title="Ipsum").uk-text-muted ipsum
                          span= " / "
                          a(href="#" title="Dolor").uk-text-muted dolor
                          span= " / "
                          a(href="#" title="Sit").uk-text-muted sit
                          span= " / "
                          a(href="#" title="Amet").uk-text-muted amet

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
    .uk-badge
      width: 24px
      height: 24px
      padding: 18px
      font-size: .875em
      margin-right: 5px
      margin-top: -75px //calc(50% - 50px)
      z-index: 1
      box-shadow: 0 0 1px rgba(0, 0, 0, 0.25)
      background-color: #ffaa00
      color: #fff

styles

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