Differences

This shows you the differences between two versions of the page.

--- template:new [2021/11/10 07:11]
Aernir Ridley
+++ template:new [2021/11/10 07:49] (current)
Aernir Ridley Populated Every Section
@@ Line 192: / Line 192: @@
 === Labels ===
+Labels are inline elements with a background to help the text stand out. Here's what a success label looks like:
+<label type="success">This text is contained within the label...</label> And this text is not.
+<code>
+<label type="success">This text is contained within the label...</label> And this text is not.
+</code>
 ==== Page Design Elements ====
@@ Line 205: / Line 211: @@
   * **Some Bolded Text**
   * [[:|A Link to the Front Page]]
-  * [[:|A Link!]] \\ //And Some Additional Italics Text//
 </list-group>
@@ Line 212: / Line 217: @@
   * **Some Bolded Text**
   * [[:|A Link to the Front Page]]
-  * [[:|A Link!]] \\ //And Some Additional Italics Text//
 </list-group>
 </code>
@@ Line 218: / Line 222: @@
 === 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="primary" title="A Primary Panel" subtitle="And Here's a Subtitle">
+Here's some info that you want in the panel.
+</panel>
+<code>
+<panel type="primary" title="A Primary Panel" subtitle="And Here's a Subtitle">
+Here's some info that you want in the panel.
+</panel>
+</code>
 === Thumbnails ===
+Thumbnails are containers for images, and can be customized with captions. Here's an example:
+<grid><col md="2"><TEXT align="center">
+<thumbnail>
+{{  https://images.evetech.net/alliances/99003214/logo?size=64&.png?  }}
+<caption>
+**Brave!**
+</caption>
+</thumbnail>
+</TEXT></col></grid>
+<code>
+<grid><col md="2"><TEXT align="center">
+<thumbnail>
+{{  https://images.evetech.net/alliances/99003214/logo?size=64&.png?  }}
+<caption>
+**Brave!**
+</caption>
+</thumbnail>
+</TEXT></col></grid>
+</code>
 === Wells ===
+Like Panels, Wells act as a container for part of your page. They're commonly used to split up sections in a basic page. Here's an example:
+<well>
+Well well well, here's a bunch of wells in a well. Water sold separately.
+</well>
+<code>
+<well>
+Well well well, here's a bunch of wells in a well. Water sold separately.
+</well>
+</code>
 ==== Functional Elements ====
@@ Line 277: / Line 325: @@
 <modal id="some-modal" title="A Simple Modal">
-== Welcome to A Modal ==
 This window can contain all the elements normal pages support.
 </modal>
@@ Line 288: / Line 332: @@
 <code>
 <btn type="success" modal="some-modal">Open A Simple Modal</btn>
-<btn type="success" modal="some-external-modal">Open A Modal Displaying Another Page</btn>
+<btn type="success" modal="some-external-modal">Open A Modal Displaying The Front Page</btn>
 <modal id="some-modal" title="A Simple Modal">
-== Welcome to A Modal ==
 This window can contain all the elements normal pages support.
 </modal>
@@ Line 303: / Line 343: @@
 === Navs ===
-Navs can be used to link to other pages or switch between panes within a page, and come in a variety of styles. They'll also highlight a link if it corresponds to the current page. Here's an example (the well is just being used to distinguish between the different navs):
+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:
 <well>
-<nav type="tabs" justified="true">
-  * [[:|Home Page]]
-  * [[:template:new|Current Page]]
-  * Some Other Useful Pages
-    * [[:public:dojo:wiki:|The Dojo Wiki]]
-    * [[:playground:|The Playground]]
-</nav>
-</well>
-<well>
 <nav type="pills" stacked="true">
-<grid>
+<grid><col md="3">
-<col md="3">
   * [[#pane-1|A Pane]]
   * [[#pane-2|Pane 2]]
-</col>
+</col><col md="9">
-<col md="9">
 <pane id="pane-1">
-== Here's A Pane ==
 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="pane-2">
-== Here's Pane 2 ==
 And this would be a first step to the guide.
 </pane>
-</col>
+</col></grid>
-</grid>
 </nav>
 </well>
 <code>
 <well>
-<nav type="tabs" justified="true">
-  * [[:|Home Page]]
-  * [[:template:new|Current Page]]
-  * Some Other Useful Pages
-    * [[:public:dojo:wiki:|The Dojo Wiki]]
-    * [[:playground:|The Playground]]
-</nav>
-</well>
-<well>
 <nav type="pills" stacked="true">
-<grid>
+<grid><col md="3">
-<col md="3">
   * [[#pane-1|A Pane]]
   * [[#pane-2|Pane 2]]
-</col>
+</col><col md="9">
-<col md="9">
 <pane id="pane-1">
-== Here's A Pane ==
 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="pane-2">
-== Here's Pane 2 ==
 And this would be a first step to the guide.
 </pane>
-</col>
+</col></grid>
-</grid>
 </nav>
 </well>
 </code>
@@ Line 409: / Line 401: @@
 ===== The Include Plugin =====
-For anyone who's used PHP before, The Include Plugin acts almost exactly like the ''include'' expression from that language. It takes an element from another location on the wiki and displays it where the element is placed. Here's a basic example of referencing the top section of the [[:public:alliance:about|About Brave]] page, but you should really check out the [[doku>plugin:include|plugin page]] for full syntax information:
+For anyone who's used PHP before, The Include Plugin acts almost exactly like the ''include'' expression from that language. It takes an element from another location on the wiki and displays it where the element is placed. Here's a basic example referencing the top section of the [[:public:alliance:about|About Brave]] page, but you should really check out the [[doku>plugin:include|plugin page]] for full syntax information:
 <well>