Pregunta a l'IA
Hola! Pregunta'm qualsevol cosa
UI Frameworks
Get along with JavaScript frameworks and Elephant Wiki

This site uses Semantic-UI / Fomantic-UI. It also uses the wiki syntax in all pages.

Adding the class attribute to wiki elements

Wiki elements accept CSS style attributes directly within parenthesis. When adding (attribute:value) wiki expands to style="attribute:value". Attributes starting with & are treated as non-style attributes and became an HTML element attribute. This is the case for class.

Wiki

Expanded HTML

Result

 
[html(&class:ui button)]Button[/html]

<div class="ui button">Button</div>
Button

Mixing class and style attributes

It is possible to use both, class and style attributes in wiki elements. Simply add style attributes separated by comas.

Wiki

Expanded HTML

Result

 
[html(&class:ui button,font-style:oblique,text-transform:uppercase)]Button[/html]

<div class="ui button" style="font-style:oblique;text-transform:uppercase;">Button</div>
Button

Wiki elements relation to HTML

Wiki

Results in

Description

 
[html]

<div>

Accepting characters block. Will not create new lines or paragraphs. See Blocks .

 
[block]

<div>

Non accepting characters block. Creates new lines and paragraphs when an empty line is given. See Blocks .

 
[span]

<span>

Creates an in line element. See Spans .

 
[link]

<a>

Creates an anchor. See Links .

 
[joker(element)]

<element>

Creates an accepting characters element named as the first parameter. See Joker .

The joker as a joker

The joker wiki element can emulate any HTML element. Let's see a joker as an HTML anchor.

Wiki

Expanded HTML

Result

 
[joker(a,&href:/docs,&class:ui button,text-transform:uppercase)]Docs[/joker]

<a href="/docs" class="ui button" style="text-transform:uppercase;">Docs</a>
Docs

When to use html or block

As you probably noticed, html and block wiki elements do much the same. They create an HTML div with the difference of accepting or not characters. When accepting characters, the element does not create new lines or paragraphs.

When creating Semantic-UI grids, the grid requires the use of html. Columns may use html or block depending on their content. For example, if the column content is text, is preferable to use block. If the content is mainly other elements, use html instead.

The two blocks of construction would be:

For text columns

[html(&class:ui two column grid)]
[block(&class:column)]
Some text.
[/block]
[block(&class:column)]
Some other text.
[/block]
[/html]

For more element columns

[html(&class:ui two column grid)]
[html(&class:column)]
[block(&class:ui segment)]Some segment.[/block]
[/html]
[html(&class:column)]
[block(&class:ui segment)]Some other segment.[/block]
[/html]
[/html]
Useful templates

These templates use the wiki syntax to create Semantic-UI elements. By default, Elephant uses the template-semantic root for web templates.

Web site solution vs. Email solution

It's important to understand differences between the content published in the web from that sent by email.

Emails cannot use web frameworks. Email applications do not allow the whole set of CSS rules, neither accept executing all JavaScript code. In short, emails use a subset of the wiki syntax in order to allow publications to be sent by email and show as expected. As a rule, do not use framework specific classes in email content.

Left image, right centered text

Web site solution


This is an example of middle and center aligned text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Code

[html(&class:ui stackable middle aligned grid)]
[html(&class:six wide column,padding-top:0px,margin:0px,line-height:0px)]
[img repository(/abstractal1.jpg)]
[/html]
[html(&class:ten wide column)]
[block(&class:ui basic center aligned text container segment,font-size:2.1em)]
---+This is an example of middle and center aligned text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[/block]
[/html]
[/html]

Email solution


This is an example of middle and center aligned text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Code

[column(width:35%)]
[img repository(/abstractal1.jpg)]
[column(width:65%,text-align:center,vertical-align:middle,font-size:2.1em)]
---+This is an example of middle and center aligned text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[/column]
[/no-format]
Video
This example requires Semantic-UI / Fomantic-UI.

Although you can disconnect wiki syntax, this example shows how you could mix both. In normal cases, you will add this code within stackable grids, cards, items and so on, to create a better user experience.

Wiki

The data-id is the YouTube video code. This code is visible in the URL as a parameter or part of the path, depending if is a share URL or you're watching in YouTube.

[html(&class:ui embed normal,&data-source:youtube,&data-id:eCBUrsqVfgE)][/html]

Result