Grid Layout w/ UiKit alt-1

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

Grid Layout w/ UiKit alt-1

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', 'https://images-na.ssl-images-amazon.com/images/M/MV5BMjNlMzNjMTMtNDAxYi00M2QxLTlmYWQtMTdkZDljMmIzYjI5XkEyXkFqcGdeQXVyMzM4NjcxOTc@._V1_SY1000_CR0,0,685,1000_AL_.jpg'];

// tooltip
- var tooltip='<div class="uk-text-lead uk-text-small uk-light">Lorem ipsum dolor sit amet</div><div class="uk-text-meta uk-text-small">Lorem</div><br><div class="uk-text-muted uk-text-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nisl risus, eleifend a tincidunt in, tempor eu nisl. Donec a sodales elit. In hac habitasse...</div>'

- var text='Lorem ipsum dolor sit amet'

// section
.uk-offcanvas-content
  .uk-section.uk-section-secondary
    // container
    .uk-container.uk-container-large.uk-flex-uk-flex-center
      .uk-grid-medium.uk-grid-match(uk-grid)
        div(class="uk-width-auto")
          .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.uk-card-secondary.uk-card-small.uk-card-hover(style="margin: 10px; margin-right: 20px;" title=tooltip uk-tooltip="pos: right; delay: 100")
                    a(href="#" title=text)
                      .uk-card-media-left.uk-cover-container
                        //span.uk-badge.uk-position-relative.uk-position-top-center.uk-position-z-index(title=text) 9.9
                        img(src=val alt=text uk-cover)
                        canvas(width="171.25" height="250")
                    .icons-meta.uk-text-meta.uk-text-truncate
                      each val in [1,2,3]
                        span(uk-icon="icon: comments")
                      span=text
                    .uk-card-body
                      .uk-card-badge.uk-label(title=text)
                        a(href="#").uk-link-text 9.9
                      .uk-text-lead.uk-text-small.uk-text-capitalize.uk-text-truncate.uk-text-bold.uk-light
                        a(href="#" title=text)=text
                      .uk-text-meta.uk-text-small.uk-text-capitalize.uk-text-break
                        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
    max-width: 171.25px
    &.uk-card-secondary
      background-color: (#222 + 5)
    .icons-meta
      position: relative
      margin-bottom: 0
      padding: 5px
      bottom: 30px
      width: calc(100% - 10px)
      background-color: rgba(0,0,0,.7)
      color: (#222 + 150)
      span
        margin-right: 5px
    .uk-card-body
      margin-top: -30px
      .uk-card-badge
        top: 10px
        right: 10px
        background-color: #ffaa00
        color: #fff
        .uk-link-text
          &:hover
            color: inherit

styles

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