It works responsively out of the box with a mobile-first approach, it will resize your content and also determines and serves up the correct image sizes for your device. They have streamlined the usage of the UIKit framework so it will only load the required components for each page as needed, this keeps page size down and makes your site load faster – in addition, all assets are combined into one file which is minified and cached on a per page basis.
Like other frameworks such as Genesis, it works on the child theme model, meaning you install the main framework theme and then customize it by adding a child theme which contains your custom code and styling – features are added using the Beans API or from the growing code snippets library.
For a theme framework which emphasizes speed, I put their demo site through GTMetrix and it came out with one of the best scores I have ever seen for a WordPress theme, scoring a page speed score of 96% and a YSlow Score of 97%. Impressive stuff.
As mentioned, it makes use of UIKit which is front-end framework, similar to Bootstrap, made up of a collection of HTML, CSS and JS components designed to help you build responsive websites without having to worry about defining base grids and styling yourself.
It comes with modern styling for a complete range of elements required when building a site. From base grids, to nav bars and breadcrumbs, to buttons, icons and form elements. You can see the full list of core components here.
Article Continues Below
Before we dive into how to install and use the theme, lets take a look at some live sites built with Beans so you can get an idea of what’s possible with it.
This is the main Beans framework website which contains the download and all the documentation you need to get started building child themes with it.
This is a free themes website which currently has 4 themes available for download for free – the main site and all the themes are all built with the Beans Framework.
A portfolio website for Chris Rault, built with Beans.
A small website for teachers, parents and Occupational Therapists.
Using The Theme
After installation of the theme you will see it has a nice and clean basic blog layout. You can alter the default layout of the theme by visiting “Appearance” > “Customize” and choosing the “Default Layout” option. Here you can choose between no sidebar, Left Sidebar, Right Sidebar, Double Sidebars and Sidebar each side.
You can also choose these different layout options when publishing a page, underneath the Visual Editor is the option to publish the page using the option you chose as default, or you can pick a specific one for the page.
Beans comes with 3 Widgetized areas, a main sidebar and the secondary sidebar should you choose to use this style layout. The third, is what I really like is one for the off-canvas menu.
This is shown when the mobile menu is used for smaller screen sizes, the main menu is replaced by a menu toggle like so:
Which when clicked, greys-out the website and slides in a menu from the left hand side:
How to Create Your Own Themes using Beans
Although you could use Beans for your site as it is, the real intended use is to use it as a starter theme to create your own themes. This is done by creating a child theme and carrying out your customization within it, similar to the way a framework like Genesis works you can manipulate features using the Beans API.
Beans have prepared a child theme you can download and use here. The child theme is structured as follows:
assets less style.less uikit-overwrite variables.less functions.php style.css screenshot.png
Most of your customization will be carried out with the functions.php file, which must contain the following code which loads up the Beans framework.
// Include Beans. require_once( get_template_directory() . '/lib/init.php' );
Beans API is where the theme shines – It provides you with a set of tools to quickly tailor the theme to your choosing.
Manipulating the HTML doesn’t require you to overwrite template files which is often overkill and also means that any updates made to the core framework won’t be applied to the your overwrite file. Instead, any HTML markup and attributes on the page can be modified or removed using one line of code. This makes it powerful since you can add UIkit classes anywhere on the page. Furthermore, all of the HTML markup has a hook before and after which allows you to add blocks where you need it.
Beans API includes a range of fields which you can add to post items, taxonomies or even as options. That combined with the ability to display the added fields entries anywhere on the page makes building quite complex pages easy.
Although Beans is built using the UIkit framework, it doesn’t mean it is bloated with a load of features and styling options you will never use – The Beans UIkit API let’s you load only the UIkit components you need on a per page basis, the assets are then automatically compiled and cached for faster loading pages.
If you would like to delve into theme customization with Beans, there is some great documentation available on the site here, A growing code snippets library you can make use of and a complete code reference here.
Beans is a framework which could be used by complete beginners, but it is also targetted at theme developers who wish to speed up and simplify the theme creation process. Instead of having to code your CSS from scratch each time, Beans and the UIKit provide a solid starting point. UIKit is actually a very nice looking set of base styles which you can configure and customize further if you wish. I was very impressed with it’s “light-weight” credentials, all the tested sites and the base theme does indeed load very fast.
It will be interesting to see how this new framework does, its certainly a promising start – it would be good to see some examples of it in action being added to their main site and maybe they should start thinking about offering child themes ( paid or free ) for download also. For now, to see what’s possible and to view some code examples in action you should check out the ThemeButler site which offers 4 free themes based on Beans for download.
Take it for a spin and help promote them by giving them an upvote on ProductHunt.