The new era of Wikidot's look

by Squark on 13 Nov 2013 14:00

twitter-bootstrap.jpg

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.:

<div class="title"> 
    <h1> 
         [[site_name]] 
     </h1> 
</div> 

<div class="my-blog-content-and-title"> 
    <span class="blog-title"> 
        [[page_title]] 
    </span> 
    [[breadcrumbs]] 
    [[content]] 
</div>

Custom layouts can be found in the
Admin Panel » Appearance & Behaviour » Themes » Custom » Create a new layout

Blank_Template.png

The complete list of elements is available in Layout reference.

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:

Comments: 13

Add a New Comment