Skins / Themes 

b2evolution displays all the contents it manages through Skins (also commonly called Themes). Skins control the general HTML layout of the pages being displayed to the users. But skins also control the user experience. Skins are what makes a Photo Gallery, a hierarchical Manual and a Blog have different navigation experiences.

Skins are comprised of PHP, CSS and Javascript files.

b2evolution comes with a selection of skins for multiple purposes (blogs, photo albums, online manuals, forums). Each skin can be customized through a settings screen (colors, etc.) If needed, additional skins can be easily downloaded and installed.

Containers & Widgets 

Skins display different kinds of pages. Each of those pages is broken down into containers. Then, in each containers you place widgets. Widgets can be just anything: the title of the website, the title of an article, the content of the article, a comment form, a list of related posts, a rotating ad area, a menu item, a calendar, a list of tags, etc.

The container/widget structure of b2evolution allow you to decide exactly what gets displayed where and in which order.

Newer versions of b2evolution display 100% of their contents through widgets that you can arrange and configure to your liking.

HTML 5

The b2evolution core as well as all its default skins are fully HTML 5 compliant.

You will especially notice the use of HTML 5 elements such as <main>, <article>, <header>, <footer>, <nav>, <figure>, etc.

Responsive Web Design

b2evolution’s back-office as well as all of its default skins are built using Responsive Web Design (RWD).

RWD ensures that the layout of HTML pages reflows nicely depending on the size of the viewing device. For example, on a mobile phone you typically don’t want to have a wide menu across the top of the screen, nor would you want a sidebar. On the contrary, you would want your content to make the best possible use of the constrained reading/viewing area of a small phone.

On a tablet device, you would have less space issue, yet you would still want to make sure all buttons and links are large enough to be touched with a finger and spaced far enough from each other in order not to miss tap the wrong link/button.

All this is automatically handled when you use b2evolution v6+ and matching skins.

Bootstrap

All default b2evolution skins as well as the back-office are responsively built using the Bootstrap framework.

Furthermore, b2evolution widgets allow to be customized with CSS classes, which allows to use the bootstrap column/responsive classes in order to control the responsive layout of virtually anything that is displayed by b2evolution.

CSS 3

b2evolution’s back-office and default skins fully leverage the power of CSS 3.

Furthermore, we use Grunt to preprocess our code files, which allows us to write higher level code in LESS and SASS.