How I can Create Uk Panel Box using Beans Theme Framework.



You should check Banks Theme (the base of sites you listed) -> http://demo.themebutler.com/banks/

Especially look into index.php file, which handles rendering posts grid.

Here's part of banks theme:

beans_add_attribute( 'beans_content', 'class', 'tm-posts-grid uk-grid uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4' );
beans_add_attribute( 'beans_content', 'data-uk-grid-margin', '' );
beans_add_attribute( 'beans_content', 'data-uk-grid-match', "{target:'.uk-panel'}" );
beans_wrap_inner_markup( 'beans_post', 'banks_post_panel', 'div', array(
'class' => 'uk-panel uk-panel-box'
) );

This snippet will use 1-4 grid on large width. If you wan't 1-3 grid instead (like on graphicflip website) first line should look like this:

beans_add_attribute( 'beans_content', 'class', 'tm-posts-grid uk-grid uk-grid-width-small-1-2 uk-grid-width-medium-1-3' );

Note that tm-post-grid class is not Uikit class, but you can use it and then style it by yourself in stylesheet.

If you are new user I will strongly recommend read all Beans docs and Uikit. It's really worth it. And I'm saying this of my own experience. Two monts ago I had no idea how to use Beans, now I make my third website with ease, all thanks to great docs (I'm still use them), and community help.


Mariusz Wachowski Thank You

Write a reply

Login or register to write a reply, it's free!