Simplicity of design has been one of the most perceptible advantages of Wikidot for many years. Making things limpid and not overwhelming has been one of our priorities from the very beginning, that's for sure. Nevertheless the Web 2.0 (3.0, 4.0…) trends are changing, Wikidot can't afford to stay behind and needs to evolve.

This is why we are proud to present the new era of Wikidot's look&feel. It's the new level of custom design, which gives a tool to create amazingly attractive and sophisticated websites with almost infinite possibilities.

Custom Layout

The first part of the project are custom layouts. Until now, every Wikidot page had its own fixed HTML layout, i.e. every part of the document was wrapped in Wikidot-defined div and span elements, as desribed below:

div#content-wrap

div#side-bar (if side-bar navigation element exists)

div#main-content

div#action-area-top

div#page-title

div#breadcrumbs

div#page-content (main content of the page)

div#page-info

div#page-options-bottom.page-options-bottom

div#page-options-bottom-2.page-options-bottom

div#action-area

div#footer

Now, every Pro user can tailor the layout to fit their own needs. There are countless possibilities to create sites and define their look. Now, even moderately skilled designer can create things that weren't possible before. The only limitation is that you can't use <body>…</body> tags and id attributes within the code. It's also good to remember to put vital elements into the layout. This is being done by using modules or page elements, as we call them. You define where to put interface elements by using [[element]] or [[module ModuleName]] inside the layout, e.g.:

Bootstrap integration

This is the other part of good news and we believe it's the most important one. We've decided to incorporate Bootstrap into Wikidot. It's a well-known front-end framework for easy creation of good looking sites from the ready-to-use components, such as great typography, beautiful forms, tables, buttons etc.

Bootstrap is also responsive, which means that every well designed site will dynamically resize and position content depending on the width of the browser or user’s screen resolution. Pages built with Bootstrap look great on the mobile devices without excessive CSS changes and often just out of the box. Did you take a look at our new Admin Panel? It's all made using Bootstrap and looks and behaves great on smartphones as well as on tablets. That's the power of Bootstrap!

Over time, we will integrate Bootstrap into our main Wikidot site, Blog, Sign Up/Sign screens together with creating new default templates for newcomers to create even more comprehensive and panoptical experience for the Users.

We have been testing Bootstrap on Wikidot for a while now and I would like to thank our Users for helping us in tests and development of Bootstrap Playground site, which everyone can clone and play with Bootstrap on their own. Special thanks go to:

With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first.

Therefore, simply using the appropriate Bootstrap elements will automatically make your website mobile-friendly. You can see the results of such implementation at the Bootstrap Playground. Very soon, we will be creating how-to pages on how to use Wikidot's new layout features in order to utilize Bootstrap's many amazing features (:

Also, if you haven't, you need to add the following meta tag to your entire site: