Not logged in. · Lost password · Register
Forum: General Help and Support Templates and Layout Template Wishlist RSS
Twitter Bootstrap 3 based template
Modern responsive design template in html5/css3
Avatar
d72 #1
Member since Sep 2013 · 2 posts
Group memberships: Members
Show profile · Link to this post
Subject: Twitter Bootstrap 3 based template
Hi!
I just started figuring out how to template dokuwiki in the way that I can use Bootstrap3 "UI framework" elements.

I'm sure someone is doing (or has done) the same thing and it would be nice to cooperate - as by now I haven't find any template matching, I call for help.

Any advice, links and hints are welcome :-)
Avatar
ach (Administrator) #2
Member since May 2006 · 1931 posts · Location: Folkestone, UK
Group memberships: Administrators, Members, Super Mods, Wiki Managers
Show profile · Link to this post
Whatever you do, don't do it like the existing bootstrap templates (although based on bootstrap 2, I guess). Those templates don't exactly follow best practices...
Avatar
d72 #3
Member since Sep 2013 · 2 posts
Group memberships: Members
Show profile · Link to this post
Subject: Separate code for view (HTML5+CSS3) & edit (XHTML) modes
As I dug deeper I discovered how badly those templates are connected to functionality or to be more precise - presentation layer is so mixed up with functions and logic that it can't be done easily.

At the moment Dokuwiki is so perfused with XHTML that not only tpl folder contents needs to be changed but many other files also to use freely any design sliced to HTML5. That is not templating any more, that is refactoring the whole thing..

As our site is doesn't have to be publicly editable (intranet), we ended up building our own templating engine on top of Dokuwiki.
We keep everything as is for the editing mode and we will build a new readers view that uses only Dokuwiki's content data files + some related metadata. Hopefully this approach leaves us option to upgrade Dokuwiki under the hood in the future if needed.

So there will be no traditional template from me, sorry.
I'll let you know if we are ready and share the code if I can.
Avatar
ach (Administrator) #4
Member since May 2006 · 1931 posts · Location: Folkestone, UK
Group memberships: Administrators, Members, Super Mods, Wiki Managers
Show profile · Link to this post
Quote by d72 on 2013-10-22, 11:57:
As I dug deeper I discovered how badly those templates are connected to functionality or to be more precise - presentation layer is so mixed up with functions and logic that it can't be done easily.

I would disagree, I think the abstraction in DokuWiki is okay (although not perfect). Although I understand that it would be best if a template could change all of the markup, the HTML and CSS is generally very semantic and easy to handle.
The trouble is that CSS frameworks are usually not very semantic and unfortunately require you to have a certain markup. IMHO it's equally bad to need a certain markup (e.g. Bootstrap) than to need a certain CSS structure (e.g. DokuWiki). Ideally you should be free to determine both. But changing the CSS is usually much easier than changing the markup...

Quote by d72 on 2013-10-22, 11:57:
At the moment Dokuwiki is so perfused with XHTML that not only tpl folder contents needs to be changed but many other files also to use freely any design sliced to HTML5.

I don't understand what you mean. The difference between XHTML and HTML5 are not important at all in this context. I don't see any problems with using HTML5 in DokuWiki. Do you have any specific example?

Quote by d72 on 2013-10-22, 11:57:
we ended up building our own templating engine on top of Dokuwiki.
We keep everything as is for the editing mode and we will build a new readers view that uses only Dokuwiki's content data files + some related metadata.

That sounds very interesting. It would be great if you could share that when you're done.

I have had another idea how it's much easier to use Bootstrap (or any other CSS framework) in DokuWiki. The latest release (currently "only" a release candidate, soon to be stable) includes a LESS compiler. With LESS you can simply inherit from a Bootstrap class. Just a quick example:

/* make all buttons use the default bootstrap button: */
input.button {
    .btn;
}
/* make the search button use the info bootstrap button: */
#dw__search input.button {
    .btn-info;
}
Avatar
goldseed #5
User title: V_L
Member since Sep 2010 · 5 posts · Location: Seoul, Korea
Group memberships: Members
Show profile · Link to this post
yes thanks..

It works well;
http://vaslor.net
This post was edited on 2014-03-23, 10:08 by goldseed.
Close Smaller – Larger + Reply to this post:
Verification code: VeriCode Please enter the word from the image into the text field below. (Type the letters only, lower case is okay.)
Smileys: :-) ;-) :-D :-p :blush: :cool: :rolleyes: :huh: :-/ <_< :-( :'( :#: :scared: 8-( :nuts: :-O
Special characters:
Go to forum
Imprint
This board is powered by the Unclassified NewsBoard software, 20150713-dev, © 2003-2015 by Yves Goergen
Current time: 2019-09-16, 22:58:41 (UTC +02:00)