Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
template:new [2020/04/25 23:32] Aernir Ridley Updated TOC |
template:new [2021/11/10 07:49] (current) Aernir Ridley Populated Every Section |
||
---|---|---|---|
Line 9: | Line 9: | ||
====== New Template ====== | ====== New Template ====== | ||
- | This is a new general template which adds details on some of the newer plugins available to wiki editors. This page is as much an informational resource on the wiki's capabilities as it is an example of how to format your pages. | + | This is a new general template which adds details on some of the newer plugins available to wiki editors. This page is as much an informational resource on the wiki's capabilities as it is an example of a page's layout. |
< | < | ||
Line 24: | Line 24: | ||
</ | </ | ||
</ | </ | ||
+ | |||
+ | |||
===== The Standard Page Layout ===== | ===== The Standard Page Layout ===== | ||
+ | |||
These bullet points represent the parts of a page from top to bottom. | These bullet points represent the parts of a page from top to bottom. | ||
* Any page-wide alerts if applicable | * Any page-wide alerts if applicable | ||
Line 31: | Line 34: | ||
* An inline Table of Contents if applicable | * An inline Table of Contents if applicable | ||
* The main content of the page. | * The main content of the page. | ||
+ | |||
===== Standard Page Elements ===== | ===== Standard Page Elements ===== | ||
+ | |||
These elements are present in all pages, and represent the basic formatting options for the wiki. | These elements are present in all pages, and represent the basic formatting options for the wiki. | ||
==== Title and Headers ==== | ==== Title and Headers ==== | ||
+ | |||
Headers can be used to create links to specific parts of a page, and will show up in the page's table of contents. Headers are created by surrounding text with '' | Headers can be used to create links to specific parts of a page, and will show up in the page's table of contents. Headers are created by surrounding text with '' | ||
Line 48: | Line 54: | ||
==== Text ==== | ==== Text ==== | ||
+ | |||
Text can be manipulated in all sorts of ways, from changing the alignment to manually setting sizes and colors. Here's some examples in action: | Text can be manipulated in all sorts of ways, from changing the alignment to manually setting sizes and colors. Here's some examples in action: | ||
Line 87: | Line 94: | ||
==== Columns ==== | ==== Columns ==== | ||
- | A page can be split into a maximum of 12 columns through the '' | + | |
+ | A page can be split into a maximum of 12 columns through the '' | ||
< | < | ||
Line 136: | Line 144: | ||
</ | </ | ||
</ | </ | ||
+ | |||
===== Bootstrap Elements ===== | ===== Bootstrap Elements ===== | ||
+ | |||
These are a very powerful set of plugins with a wide range of uses. One of constant things between them is the '' | These are a very powerful set of plugins with a wide range of uses. One of constant things between them is the '' | ||
Line 144: | Line 154: | ||
Documentation on all the possible implementations of this wrapper can be found here: http:// | Documentation on all the possible implementations of this wrapper can be found here: http:// | ||
- | ==== Accordions | + | ==== Attention Grabbers |
+ | |||
+ | Use these elements when you want to bring attention to a specific part of your page. | ||
+ | |||
+ | === Alerts === | ||
+ | |||
+ | Alerts can be used when you want to draw attention to information on a page. Here's an example: | ||
+ | |||
+ | <alert type=" | ||
+ | |||
+ | **Look here! This is important!** | ||
+ | |||
+ | </ | ||
+ | |||
+ | < | ||
+ | <alert type=" | ||
+ | |||
+ | **Look here! This is important!** | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | |||
+ | === Callouts === | ||
+ | |||
+ | Callouts are similar to alerts in that they make information on a page stand out, but they do it in a less aggressive way. Here's an example of a Danger Callout: | ||
+ | |||
+ | <callout title=" | ||
+ | Hey look, an example! | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <callout title=" | ||
+ | Hey look, an example! | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | === Labels === | ||
+ | |||
+ | Labels are inline elements with a background to help the text stand out. Here's what a success label looks like: | ||
+ | |||
+ | <label type=" | ||
+ | |||
+ | < | ||
+ | <label type=" | ||
+ | </ | ||
+ | |||
+ | ==== Page Design Elements ==== | ||
+ | |||
+ | These elements affect the layout of your page, and can give it a more modern feel. | ||
+ | |||
+ | === List Groups === | ||
+ | |||
+ | List groups turn unordered lists into much more visible elements, and can also be used in conjunction with links and some styling. Here's an example: | ||
+ | |||
+ | < | ||
+ | * **Some Bolded Text** | ||
+ | * [[:|A Link to the Front Page]] | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | < | ||
+ | * **Some Bolded Text** | ||
+ | * [[:|A Link to the Front Page]] | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | === Panels === | ||
+ | |||
+ | Panels act as a container for part of your page, they come with a nice title header and also support a subtitle. Here's what that looks like: | ||
+ | |||
+ | <panel type=" | ||
+ | Here's some info that you want in the panel. | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <panel type=" | ||
+ | Here's some info that you want in the panel. | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | === Thumbnails === | ||
+ | |||
+ | Thumbnails are containers for images, and can be customized with captions. Here's an example: | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | {{ https:// | ||
+ | < | ||
+ | **Brave!** | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | < | ||
+ | < | ||
+ | |||
+ | < | ||
+ | {{ https:// | ||
+ | < | ||
+ | **Brave!** | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | |||
+ | === Wells === | ||
+ | |||
+ | Like Panels, Wells act as a container for part of your page. They' | ||
+ | |||
+ | < | ||
+ | Well well well, here's a bunch of wells in a well. Water sold separately. | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | < | ||
+ | Well well well, here's a bunch of wells in a well. Water sold separately. | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ==== Functional Elements ==== | ||
+ | |||
+ | These elements add advanced functionality to your page, and may make it easier to display complex information. | ||
+ | |||
+ | === Accordions === | ||
Useful when a large amount of vertical space is needed for something, such as skillplans. Here's an example of it in action: | Useful when a large amount of vertical space is needed for something, such as skillplans. Here's an example of it in action: | ||
Line 166: | Line 303: | ||
</ | </ | ||
- | ==== Alerts | + | === Buttons |
- | Alerts can be used when you want to draw attention to information on a page. Here's an example: | + | |
- | <alert type=" | + | Buttons are basically nicer links. Their height, color, and length are all variable. Here's an example small, primary button which links to the wiki home page: |
- | **Look here! This is important!** | + | <btn type=" |
+ | [[https:// | ||
+ | </ | ||
- | </TEXT></alert> | + | <code> |
+ | <btn type=" | ||
+ | [[https:// | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | === Modals === | ||
+ | |||
+ | Modals are extremely powerful elements that create a new window within the page. These can organize large amounts of content, display other pages, and even be used in conjunction with [[# | ||
+ | |||
+ | <btn type=" | ||
+ | <btn type=" | ||
+ | |||
+ | <modal id=" | ||
+ | This window can contain all the elements normal pages support. | ||
+ | </ | ||
+ | |||
+ | <modal id=" | ||
< | < | ||
- | <alert type="warning">< | + | <btn type="success" |
+ | <btn type="success" | ||
- | **Look here! This is important!** | + | <modal id=" |
+ | This window can contain all the elements normal pages support. | ||
+ | </ | ||
- | </TEXT></alert> | + | <modal id=" |
</ | </ | ||
- | ==== Buttons | + | === Navs === |
- | Buttons are basically nicer links. Their height, color, and length are all variable. Here's an example small, primary button which links to the wiki home page: | + | |
- | <btn type="primary" | + | Navs can be used to link to other pages or switch between panes within a page, and come in a variety of styles. Here's an example of using navs and panes to create an interactive page: |
- | [[https://wiki.bravecollective.com/start|Home Page]] | + | |
- | </btn> | + | < |
+ | <nav type="pills" | ||
+ | < | ||
+ | |||
+ | * [[#pane-1|A Pane]] | ||
+ | * [[# | ||
+ | |||
+ | </col>< | ||
+ | |||
+ | <pane id=" | ||
+ | This is an example of how you can create a basic walkthrough using a stacked nav. This would be an introduction to the guide. | ||
+ | </pane> | ||
+ | |||
+ | <pane id=" | ||
+ | And this would be a first step to the guide. | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | </well> | ||
< | < | ||
- | <btn type="primary" | + | <well> |
- | [[https://wiki.bravecollective.com/start|Home Page]] | + | < |
- | </btn> | + | < |
+ | |||
+ | * [[#pane-1|A Pane]] | ||
+ | * [[# | ||
+ | |||
+ | </col>< | ||
+ | |||
+ | <pane id=" | ||
+ | This is an example of how you can create a basic walkthrough using a stacked nav. This would be an introduction to the guide. | ||
+ | </pane> | ||
+ | |||
+ | <pane id=" | ||
+ | And this would be a first step to the guide. | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | </well> | ||
</ | </ | ||
- | ==== Callouts | + | === Tooltips |
- | Callouts are similar to alerts in that they make information on a page stand out, but they do it in a less aggressive way. Here's an example of a Danger Callout: | + | |
- | <callout | + | Tooltips are inline elements that display additional text when hovering over something. Here's what that looks like: |
- | Hey look, an example! | + | |
- | </callout> | + | <tooltip |
< | < | ||
- | <callout | + | <tooltip |
- | Hey look, an example! | + | </ |
- | </callout> | + | |
+ | ===== The Include Plugin ===== | ||
+ | |||
+ | For anyone who's used PHP before, The Include Plugin acts almost exactly like the '' | ||
+ | |||
+ | < | ||
+ | |||
+ | {{section>: | ||
+ | |||
+ | </ | ||
+ | |||
+ | < | ||
+ | < | ||
+ | |||
+ | {{section>: | ||
+ | |||
+ | </well> | ||
</ | </ | ||