User:Stefahn/Chameleon Docu

My own docu for Skin:Chameleon. If you have a comment, please post it on the discussion page.

Nice 2 have
Things that would be nice 2 have:
 * Link the top-level menu entry to a page

Layout

 * If changes in custom less file are not displayed:
 * Change screen width

Components

 * See all components under
 * Full width header with content within grid:
 * Use minified PageTools and PersonalTools outside NavbarHorizontal:

Existent Components and their meaning: Usage:  <![CDATA[ YOUR HTML CODE HERE ]]>
 * PageTools = Edit link and submenu (with links for discussion, version history, moving, deleting etc). Only shown if user is allowed to edit.
 * PersonalTools = Head icon with submenu (If logged in: with user page, user discussion, settings, watchlist, contributions and log out link. If logged out: log in link)
 * Html = allows insertion of raw HTML into the page.
 * FooterInfo = "This page was last modified on xy"
 * FooterPlaces = Links to Privacy policy, About, Disclaimer etc.
 * FooterIcons = MediaWiki icon, SMW icon

Adding own components:
 * How to add own components to the layout:
 * A name of a component may not contain a "-".
 * Function "getHtml" is necessary for output.

Modifications

 * Modifications are currently only activated for top-level components.

Possible modifications:
 * : Shows the row/cell/component only if the user has the permission "edit".
 * : Hides the row/cell/component if the user has the permission "edit".
 * : Shows the row/cell/component only in a certain namespace (in the example the main namespace).

Grid

 * It is possible to use  more than once.
 * and  can also be used outside of.

Menu
Alternatively one can list the menus to be flattened on the page Mediawiki:Skin-chameleon-navmenu-flatten as a semicolon-separated list.
 * The navigation menu is pulled from MediaWiki:Sidebar.
 * Single link in menu (without dropdown): Add  to the navigation in your xml layout file. For example:
 * Let submenus appear when hovering over it (instead of clicking):
 * Remove "go" button of search box

Bootstrap

 * centers the div and gives it the content width (for example 960 px).  gives a full width container.

Links

 * Github

Bootstrap:
 * Explanation of CSS in Bootstrap
 * Free bootstrap themes
 * Find out which less variable has which effect