Actually you can use any css framework to customise on your site Easyblog page, keep us update if you need to add some custom class name into Easyblog theme file, I will guide you which PHP file suppose to display these e.g. blog main page php file location.

But if there got any styling issue after you added those custom class/css code, we are not responsible to support this because this is beyond our support scope's policy as outlined in http://stackideas.com/support .

Thanks for understand.

Great, thanks. I'm going to replace:

eb-mod mod_easybloglatestblogs with uk-grid

I'm not sure what the eb-mod mod-items-grid clearfix is used for? is this just another wrapper class?

Then to separate the 2 sides, I would use uikit uk-width-1-2 in place of mod-grid mod-grid-1.

This should put uikit responsive grid system in place of default I would hope?

So it would look like this:

<div class="uk-grid">

  <div class="uk-width-1-2">

    <div class="uk-panel uk-panel-box">

      <div class="mod-item">

        <div class="eb-mod-head mod-table align-middle">

          <div class="mod-cell">

            <div class="mod-muted mod-small mod-fit"> 23 August 2017 </div>

          </div>

        </div>

        <div class="eb-mod-context">

          <div class="eb-mod-thumb  is-left "> <a href="/to-move-into-the-future-we-must-first-embrace-the-past-veterans-history-project" class="eb-mod-image-cover" style="background-image:url(//http://www.deermeadowshomehealth.org/images/easyblog_articles/56/xb2ap3_small_iwo-jima2.jpg.pagespeed.ic.6LvyBpvP5b.webp);width:260px;height:200px"></a> </div>

          <div class="eb-mod-title"> <a href="/to-move-into-the-future-we-must-first-embrace-the-past-veterans-history-project" class="eb-mod-media-title">To Move into the Future, We Must First Embrace the Past: Veterans History Project</a> </div>

          <div class="mod-post-type"> <a href="/blog/categories/in-the-news">In The News</a> </div>

          <div class="mod-post-type"> <a href="/blog/categories/around-deer-meadows">Around Deer Meadows</a> </div>

          <div class="eb-mod-body"> War is not a pretty ordeal. Most Americans are aware of this reality, but without keeping documents alive—pictures, firsthand reports, and other memorabilia—the grim reality of war, and the sacrifice that soldiers put forth to serve and protect our g... </div>

        </div>

        <div class="eb-rating">

          <form id="eblatestblogs-56-ratings-form" class="eb-rating-form DS07256937366796157" data-locked="0" data-id="56" data-type="entry" data-rating-form="" data-score="5" data-rtl="0">

            <div id="eblatestblogs-56-ratings-command" class="col-cell eb-rating-text" data-rating-text="">Rate this blog entry:</div>

            <div data-rating-form-element="" style="cursor: pointer;"><i class="fa fa-fw fa-star" data-score="1"></i><i class="fa fa-fw fa-star" data-score="2"></i><i class="fa fa-fw fa-star" data-score="3"></i><i class="fa fa-fw fa-star" data-score="4"></i><i class="fa fa-fw fa-star" data-score="5"></i>

              <input type="hidden" name="score" value="5">

            </div>

            <div class="col-cell eb-rating-voters"> <a class="eb-rating-link" href="javascript:void(0);" data-rating-voters=""> <b class="eb-ratings-value" title="2 votes" data-rating-value=""> <span data-rating-total="">2</span> <b title="You have already rated this entry"> <i class="fa fa-check"></i> </b> </b> </a> </div>

          </form>

        </div>

        <div class="eb-mod-foot mod-muted mod-small">

          <div class="mod-cell pr-10"> 44 Hits </div>

          <div class="mod-cell"> <a href="/to-move-into-the-future-we-must-first-embrace-the-past-veterans-history-project">Read More</a> </div>

        </div>

      </div>

    </div>

  </div>

  <div class="uk-width-1-2">

    <div class="uk-panel uk-panel-box">

      <div class="mod-item">

        <div class="eb-mod-head mod-table align-middle">

          <div class="mod-cell">

            <div class="mod-muted mod-small mod-fit"> 22 August 2017 </div>

          </div>

        </div>

        <div class="eb-mod-context">

          <div class="eb-mod-thumb  is-left "> <a href="/the-best-home-care-in-philadelphia" class="eb-mod-image-cover" style="background-image:url(https://www.deermeadowshomehealth.org/images/blog/xlady-in-wheelchair-outside-smiling-with-daughter.jpg.pagespeed.ic.wVWgjZd2N4.webp);width:260px;height:200px"></a> </div>

          <div class="eb-mod-title"> <a href="/the-best-home-care-in-philadelphia" class="eb-mod-media-title">The Best Home Care in Philadelphia</a> </div>

          <div class="mod-post-type"> <a href="/blog/categories/around-deer-meadows">Around Deer Meadows</a> </div>

          <div class="eb-mod-body"> Getting high-quality and dependable home care is no longer a challenge anymore; well, at least not in Philadelphia. An increasing number of patients are benefiting from the high-quality and compassionate services that we offer at Deer Meadows Home He... </div>

        </div>

        <div class="eb-rating">

          <form id="eblatestblogs-54-ratings-form" class="eb-rating-form DS09137789206415967" data-locked="0" data-id="54" data-type="entry" data-rating-form="" data-score="5" data-rtl="0">

            <div id="eblatestblogs-54-ratings-command" class="col-cell eb-rating-text" data-rating-text="">Rate this blog entry:</div>

            <div data-rating-form-element="" style="cursor: pointer;"><i class="fa fa-fw fa-star" data-score="1"></i><i class="fa fa-fw fa-star" data-score="2"></i><i class="fa fa-fw fa-star" data-score="3"></i><i class="fa fa-fw fa-star" data-score="4"></i><i class="fa fa-fw fa-star" data-score="5"></i>

              <input type="hidden" name="score" value="5">

            </div>

            <div class="col-cell eb-rating-voters"> <a class="eb-rating-link" href="javascript:void(0);" data-rating-voters=""> <b class="eb-ratings-value" title="1 vote" data-rating-value=""> <span data-rating-total="">1</span> <b title="You have already rated this entry"> <i class="fa fa-check"></i> </b> </b> </a> </div>

          </form>

        </div>

        <div class="eb-mod-foot mod-muted mod-small">

          <div class="mod-cell pr-10"> 29 Hits </div>

          <div class="mod-cell"> <a href="/the-best-home-care-in-philadelphia">Read More</a> </div>

        </div>

      </div>

    </div>

  </div>

</div>

This should allow for the uikit grid system to function within the blog, allowing for the side by side items to go one on top of the other on smaller devices based of the themes breakpoints.

I'm not sure what the eb-mod mod-items-grid clearfix is used for? is this just another wrapper class?

Actually this class is to define whether this module layout is display horizontal or vertical. if the module display horizontal layout, it will populate this class name 'mod-items-grid clearfix' on the module (http://take.ms/BLljx).

If this work for you, you can copy this php file from JoomlaFolder/modules/mod_easybloglatestblogs/tmpl/default.php and modify to use uikit class name then move this file into this template override file location, so it will not get override when you update the higher version of Easyblog in the future.

JoomlaFolder/templates/YourCurrentTemplates/html/mod_easybloglatestblogs/default.php