Grid

All the grids in the template are based on the Isotope (opens new window) plugin. Whenever you want to create a grid, use the .section-grid class as the outer wrapper. In that wrapper, store all the items according to the markup below.

Masonry Layout

Markup

<section class="section section-blog section-grid pb-large">
  <!-- grid items -->
  <div class="container-fluid">
    <div class="grid js-grid grid_fluid-4 grid_fancy">
      <!-- sizer -->
      <div class="grid__item grid__sizer js-grid__sizer grid__item_fluid-4-fancy grid__item_fluid-4 grid__item_desktop-4 grid__item_tablet-6 grid__item_mobile-12">
        ...
      </div>
      <!-- item -->
      <div class="grid__item js-grid__item grid__item_fluid-4-fancy grid__item_fluid-4 grid__item_desktop-4 grid__item_tablet-6 grid__item_mobile-12 category-ux-design category-graphic-design">
        ...
      </div>
      <!-- item -->
      <div class="grid__item js-grid__item grid__item_fluid-4-fancy grid__item_fluid-4 grid__item_desktop-4 grid__item_tablet-6 grid__item_mobile-12 category-social-media category-marketing">
        ...
      </div>
      ...
    </div>
  </div>
  <!-- - grid items -->
  ...
</section>

Showcase

• 📄 013-portfolio-details-masthead-boxed-horizontal.html
• 📄 016-portfolio-details-masthead-boxed-vertical.html
• 📄 017-portfolio-details-masthead-fullwidth-horizontal.html
• 📄 020-portfolio-details-masthead-fullwidth-horizontal.html
• 📄 021-portfolio-details-masthead-boxed-vertical.html
• 📄 023-portfolio-details-masthead-fullwidth-horizontal.html
• 📄 026-portfolio-grid-2-columns.html
• 📄 027-portfolio-grid-3-columns.html
• 📄 028-portfolio-list-cards-fullwidth.html
• 📄 029-portfolio-list-cards-boxed.html
• 📄 040-blog-posts-grid-2-columns.html
• 📄 041-blog-posts-grid-3-columns.html
• 📄 042-blog-posts-grid-2-columns-sidebar.html

Aligned Layout

Note the .js-grid-equal-heights class on the grid container.

Markup

<section class="section section-grid pt-xlarge pb-large container">
  <div class="grid grid_fluid-h-5 grid_fluid-v-2 js-grid js-grid-equal-heights">
    <div class="grid__item grid__sizer grid__item_desktop-6 grid__item_tablet-6 grid__item_mobile-12 grid__item_fluid-h-5 grid__item_fluid-v-2 js-grid__sizer">
      ...
    </div>
    <div class="grid__item grid__item_desktop-6 grid__item_tablet-6 grid__item_mobile-12 grid__item_fluid-h-5 grid__item_fluid-v-2 js-grid__item category-interior">
      ...
    </div>
    <div class="grid__item grid__item_desktop-6 grid__item_tablet-6 grid__item_mobile-12 grid__item_fluid-h-5 grid__item_fluid-v-2 js-grid__item category-identity">
      ...
    </div>
  </div>
</section>

Showcase

• 📄 025-portfolio-grid-2-columns-aligned.html

Filter

Markup

<section class="section section-blog section-grid pb-large">
  <!-- filter -->
  <div class="container-fluid py-medium">
    <div class="filter js-filter text-center" data-arts-os-animation="true" data-arts-os-animation-name="animateText">
      <!-- optional mobile dropdown filter -->
      <div class="filter__wrapper-dropdown d-lg-none" data-arts-os-animation="true" data-arts-os-animation-name="animateJump">
        <select class="js-filter__select d-block w-100">
          ...
        </select>
      </div>
      <!-- - optional mobile dropdown filter -->
      <div class="filter__inner d-lg-block d-none">
        <div class="container-fluid no-gutters">
          <!-- items -->
          <div class="row justify-content-between">
            <!-- all (*) -->
            <div class="col-lg-auto col-12 filter__item filter__item_active js-filter__item js-arts-cursor-highlight" data-filter="*">
              <div class="filter__item-inner h6 block-counter arts-split-text js-arts-split-text" data-arts-split-text="lines, words" data-arts-split-text-set="words" data-arts-split-text-overflow-wrap="lines">
                <span class="filter__item-label">All Posts</span>
                <span class="block-counter__counter">*</span>
              </div>
            </div>
            <!-- - all (*) -->
            <div class="col-lg-auto col-12 filter__item js-filter__item js-arts-cursor-highlight" data-filter=".category-ux-design">
              <div class="filter__item-inner h6 block-counter arts-split-text js-arts-split-text" data-arts-split-text="lines, words" data-arts-split-text-set="words" data-arts-split-text-overflow-wrap="lines">
                <span class="filter__item-label">UX Design</span>
                <span class="block-counter__counter">2</span>
              </div>
            </div>
            <div class="col-lg-auto col-12 filter__item js-filter__item js-arts-cursor-highlight" data-filter=".category-graphic-design">
              <div class="filter__item-inner h6 block-counter arts-split-text js-arts-split-text" data-arts-split-text="lines, words" data-arts-split-text-set="words" data-arts-split-text-overflow-wrap="lines">
                <span class="filter__item-label">Graphic Design</span>
                <span class="block-counter__counter">2</span>
              </div>
            </div>
            ...
            <!-- - items -->
          </div>
          <!-- underline -->
          <div class="filter__underline js-filter__underline" data-arts-os-animation="true" data-arts-os-animation-name="animateHeadline" data-arts-os-animation-params="{transformOrigin: 'left center'}">
          </div>
          <!-- - underline -->
        </div>
      </div>
    </div>
  </div>
  <!-- - filter -->
  <!-- grid items -->
  <div class="container-fluid">
    <div class="grid js-grid grid_fluid-4 grid_fancy">
      ...
    </div>
  </div>
  <!-- - grid items -->
</section>

Elements

• Filter main container .js-filter
• Clickable item .js-filter__item with filtering [data-filter] attribute
• Optional mobile dropdown .js-filter__select which duplicates the filtering functionality

Showcase (mobile dropdown filter)

• 📄 037-blog-posts-list-backgrounds.html
• 📄 040-blog-posts-grid-2-columns.html
• 📄 041-blog-posts-grid-3-columns.html
• 📄 042-blog-posts-grid-2-columns-sidebar.html

Showcase (responsive filter)

• 📄 025-portfolio-grid-2-columns-aligned.html
• 📄 026-portfolio-grid-2-columns.html
• 📄 027-portfolio-grid-3-columns.html