Loading...
 
Skip to main content

TemplateStylingProposals

 Warning
Work in progress! Dont vote yet! Vote only when this warning is removed

 Background (2015-01-27)
The switch to Bootstrap and the refactoring of icons brought up some questions about how icons, buttons and generally templates should look by default in Tiki. Currently, there are many variations and there seems to be no generic rules/guidelines, so it is up for discussion. The goal is to have a unified look, this temporary page is used to discuss some related items for Tiki14. When decided, the outcome shall be documented here: Templates Best Practices

Almost ready for voting

1.1. Default button and icon styling

Background:
1)Tiki now (since Tiki13) uses bootstrap. Bootstrap has some ideas about buttons, see here. Tiki provides a default bootstrap theme, which is the default theme at installation and also the fallback if anything fails for theme settings, read more here .
2)Tiki's default icon set is now font-awesome, see here. Font-awesome also has some ideas about default icon size.
3) Tiki has some basic css rules that are always applied, no matter which theme is selected ("themes/base_files/css/tiki_base.css")

The question: should Tiki modify any default bootstrap/font-awesome styling (eg: font-size, paddings, margins) using tiki_base.css OR these stylings should be addressed for each theme.

gezzaz opinion: I think Tiki should provide bootstrap and fontawesome "as is", so without modification by default. Imho it is better to not modify default font-size, margins, paddings, etc with tiki_base.css, new users will have a hard time to explore why eg: "Default Bootstrap" theme does not deliver the default bootstrap look and why "Default fontawesome" icons dont look have the same size and padding, etc like on the font-awesome page. I agree, some modifications might be useful, but I think it is better to do it for each theme's css.

 Note
By rejecting proposal #1 your vote counts for bootstrap/fontawesome defaults modification per theme
1# Modify default bootstrap/font-awesome styling using tiki_base.css
Accept Undecided Reject
0 0 0

1.2. Button/icon style - Result of action

Proposed rule is to use 3 schemes based on result of pressing the icon/button:

  • navigation (in-page, modal opening, remote destination, etc): always use Bootstrap's "btn-default" class
  • insert/update to the database: always use Bootstrap's "btn-primary" class
  • delete in the database: always use use Bootstrap's "btn-warning" class
Samples
Buttons Action
 Note
If you have a button called "delete" and by pressing it a bootstrap modal opens where you actually execute the deletion, than the first delete button is still only for navigation!

#2 Buttons/icons - result of actions guideline
Accept Undecided Reject
0 0 0

1.3. Button/icon style - Location

There can be a difference based on where the icon/button is situated (eg: in a navbar, in a form as an action or as a feature, in a table listing items)

  • navbar (eg: navigate to another screen): use button styling
  • list (eg: open item, delete item, modify item, etc): use link styling
  • form actions (eg: save, delete, cancel): use button styling
  • item features (eg: print, wathc, translate, etc): use button styling
 Note
This rule complements the "action based rule", so you have to consider both when working with templates
#3 Buttons/icons - location guideline
Accept Undecided Reject
0 0 0

Bootstrap has button groups (http://getbootstrap.com/components/#btn-groups), the tricky thing is that in Tiki some navigation buttons might appear based on permission settings, so the btn group might break visually for users with lesser permissions. Maybe better to use standalone navigation buttons.
For examples see tiki-list_trackers and tiki-admin_newsletters

 Note
By rejecting proposal #4 your vote counts for having button groups for navbar buttons
#4 Use standalone navbar buttons
Accept Undecided Reject
0 0 0

Thoughts in progress

1.1. Popover for icon/button titles

Using "tips" or "tikihelp" class on buttons/icons a boostrap popover gets triggered showing the content of "title" tag.
Do we want it to be general? If yes, there are two ways: popover with and without popover title.

If we dont want popover title, maybe we should use bootstrap's tooltip

1.2. Buttons/icons with/without text

Some places (eg: tiki-list_trackers) use buttons with icon and text, most places only use text (eg: tiki-admin_newsletters), there are also many example where only an icon is used.

Can we come up with a rule here? Eg:
1) to encourage content contribution, use icon with text for creating new items (eg: tracker item, article, forum post, etc), for import and maybe export.
2) For navigation between main screens, use text only
3) For item related features (eg: RSS, watch, translation), use icon.
Does this make sense?

1.3. Weapons for Devs - which one to use and when?

Tiki offers several ways to create a button/icon, can we make a rule for this?

1) button function

Code location: lib/smarty_tiki/function.button.php
Use this to create a button (<button>) element with icon, text or both. Default bootstrap classes: btn btn-default

  Actually...
This functions creates now a link element, that looks like a button, because it receives btn-default class. This could be changed to produce a button element to match the name.
Change button function to produce button element
Accept Undecided Reject
0 0 0

2) icon function

Code location: lib/smarty_tiki/function.icon.php
Use this to show a plain icon or create an icon in a link (<a>) element. Default bootstrap classes: btn btn-link. This is probably ok, please add proposal if you want to change it.

Code location: lib/smarty_tiki/block.self_link.php
Use this to add a link (<a>) to the current page on a text.

4) html: for more complicated cases, eg: button dropdowns (http://getbootstrap.com/components/#btn-dropdowns) use HTML

  Some noticeable Bootstrap guidelines
Copy to clipboard
1) "While button classes can be used on <a> and <button> elements, only <button> elements are supported within our nav and navbar components." and 2) "If the <a> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate role="button"."


Probably for Tiki15

1.1. List item selection checkbox and mass actions


It is not consistent how mass actions for items listed in a table are presented. Usually there is some text below the table and a dropdown, but it takes too much space. It would be better to have a general solution that makes the screen less crowded using bootstrap's button dropdown.

Listing Checkbox Plan

1.2. Wiki page actions

Features for wiki page management is very demanding visually, could be simplified. Maybe this direction can be followed for item management of other object types (articles, blog posts, tracker items). Will be hard to agree on this.

Tiki15 Page Actions

Keywords

The following is a list of keywords that should serve as hubs for navigation within the Tiki development and should correspond to documentation keywords.

Each feature in Tiki has a wiki page which regroups all the bugs, requests for enhancements, etc. It is somewhat a form of wiki-based project management. You can also express your interest in a feature by adding it to your profile. You can also try out the Dynamic filter.

Accessibility (WAI & 50😎
Accounting
Administration
Ajax
Articles & Submissions
Backlinks
Banner
Batch
BigBlueButton audio/video/chat/screensharing
Blog
Bookmark
Browser Compatibility
Calendar
Category
Chat
Comment
Communication Center
Consistency
Contacts Address book
Contact us
Content template
Contribution
Cookie
Copyright
Credits
Custom Home (and Group Home Page)
Database MySQL - MyISAM
Database MySQL - InnoDB
Date and Time
Debugger Console
Diagram
Directory (of hyperlinks)
Documentation link from Tiki to doc.tiki.org (Help System)
Docs
DogFood
Draw -superseded by Diagram
Dynamic Content
Preferences
Dynamic Variable
External Authentication
FAQ
Featured links
Feeds (RSS)
File Gallery
Forum
Friendship Network (Community)
Gantt
Group
Groupmail
Help
History
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
jQuery
Kaltura video management
Kanban
Karma
Live Support
Logs (system & action)
Lost edit protection
Mail-in
Map
Menu
Meta Tag
Missing features
Visual Mapping
Mobile
Mods
Modules
MultiTiki
MyTiki
Newsletter
Notepad
OS independence (Non-Linux, Windows/IIS, Mac, BSD)
Organic Groups (Self-managed Teams)
Packages
Payment
PDF
Performance Speed / Load / Compression / Cache
Permission
Poll
Profiles
Quiz
Rating
Realname
Report
Revision Approval
Scheduler
Score
Search engine optimization (SEO)
Search
Security
Semantic links
Share
Shopping Cart
Shoutbox
Site Identity
Slideshow
Smarty Template
Social Networking
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Staging and Approval
Stats
Survey
Syntax Highlighter (Codemirror)
Tablesorter
Tags
Task
Tell a Friend
Terms and Conditions
Theme
TikiTests
Federated Timesheets
Token Access
Toolbar (Quicktags)
Tours
Trackers
TRIM
User Administration
User Files
User Menu
Watch
Webmail and Groupmail
WebServices
Wiki History, page rename, etc
Wiki plugins extends basic syntax
Wiki syntax text area, parser, etc
Wiki structure (book and table of content)
Workspace and perspectives
WYSIWTSN
WYSIWYCA
WYSIWYG
XMLRPC
XMPP




Useful Tools