JSN Epic provides 21 module positions, allowing you to have multiple layout configuration. All module positions are collapsible, which means if you don’t publish any modules in some position it will not take any blank spaces, but leave them for neighbor modules.
Info: To show a module in some position you just need to setup module’s Position parameter to appropriate value as described below.
JSN Epic was created with an extreme focus on typography and we believe it contains the most comprehensive content presentation capability. Headings, text, links, tables, images, everything was designed with high level of refinement. Let’s take a look.
As we all know, headings are "title" of undergoing text blocks, so it must have distinguished look. JSN Epic provides styling for 5 main headings. To apply them, you just need to wrap your heading text in regular heading tags like <h1>…</h1>, <h2>…</h2>, <h3>…</h3>, etc.
It’s quite a common situation when you need to arrange your content in multiple columns. JSN Epic offers you a very convenient and accessible method to create multiple column content. This is real step forward removing table tags from your content and leaving them only for showing tabular data.
With version 3.0, you can arrange your content in as many columns as you like. JSN Epic will detect the amount of columns you have and automatically make arrangement. Another improvement is now the required XHTML code is much simpler. The only thing you need to do is setting class grid-layout to parent DIV.
Below are screenshots of how this feature looks and examples of how to use it.
Example:
<div class="grid-layout"> <div> Content in the first column. </div> <div> Content in the second (last) column. </div> </div>
Example:
<div class="grid-layout"> <div> Content in the first column. </div> <div> Content in the second column. </div> <div> Content in the third (last) column. </div> </div>
In the same way you can arrange your content in 4, 5, .. columns. In general maximum recommended column amount is 5, otherwise columns will be too narrow and hard to read.
JSN Epic provides 12 text styles for making your content easier to scan and read. Below are screenshots of text styles and usage examples:
You can use this style to present text with preserved spaces like text block of CSS code or other programming language.
Example:
<pre>Your preformatted text</pre>
You can us this style to quote somebody’s speech, idea or a fragment from some book, articles, etc.
Example:
<blockquote>Your quote text</blockquote>
You can use this special drop cap symbol style for magazine / newspaper text paragraph.
Example:
<p class="text-dropcap">Your magazine text paragraph.</p>
You can use this style to highlight important words and / or keyword expression in search result page.
Example:
<span class="text-highlight">Text to be highlighted.</span>
You can use this style for alert or warning text paragraph requiring user’s attention.
Example:
<p class="text-alert">Your alert text that requires user’s attentions.</p>.
You can use tag <p> like in example or tag <div> as well.
You can use this style for regular information text paragraph that does not require much user’s attention.
Example:
<p class="text-info">Your information text.</p>.
You can use tag <p> like in example or tag <div> as well.
You can use this style for information text paragraph related to download process.
Example:
<p class="text-download">Your download text.</p>.
You can use tag <p> like in example or tag <div> as well.
You can use this style for useful information like tips, hints or help texts
Example:
<p class="text-tip">Your tip, hint or help text.</p>.
You can use tag <p> like in example or tag <div> as well.
You can use this style for comment text paragraph.
Example:
<p class="text-comment">Your comment text.</p>.
You can use tag <p> like in example or tag <div> as well.
You can use this style for information text paragraph that related to attachment file.
Example:
<p class="text-attachment">Your attachment text.</p>.
You can use tag <p> like in example or tag <div> as well.
You can use this style to represent the description of a video file.
Example:
<p class="text-video">Your description text.</p>.
You can use tag <p> like in example or tag <div> as well.
You can use this style to represent the description of an audio file.
Example:
<p class="text-audio">Your description text.</p>.
You can use tag <p> like in example or tag <div> as well.
JSN Epic is able to detect links to various popular file extensions and assign icons accordingly. This feature utilizes modern CSS2 specification and allows you to have links with meaningful icons assigned without any modification in XHTML code. Currently JSN Epic is supporting 34 file types and it is truly amazing. Moreover, it can detect protocol type to assign icons to links to instant messengers, email, etc.
Auto icon assignment (in all modern browsers except IE6)
As stated before for most browsers icons will automatically assigned thanks to modern CSS2 specification. Unfortunately IE6 does not support this specification and you have manually set appropriate class for links. Also, this can help if for some reason you turned off auto icon link template parameter, but still want to manually apply icon to links.
Below is a class specification table for all supported links:
Manual icon assignment
Info: As version 3.0 JSN Epic utilizes CSS sprite technique to reduce amount of HTTP request to server in order to get icons, technically, all icons are merged in one single image file, so visitors will need to make one single request/download to get that file with all icons. If you have time, please read more about CSS sprites.
Tabular data is a very common type of information presented on the web. By default tables look ugly and not much readable. With JSN Epic, you have 3 table styles to present virtually any kind of tabular data you have.
Example:
<table class="table-plainrows">
Example:
<table class="table-colorstripes">
Example:
<table class="table-greystripes">
Note:
In order to get table styles shown correctly, you need to create solid XHTML code as foundation. Below is an example of solid XHTML code for table.
<table width="100%" class="table-greystripes"> <thead> <tr> <th>Table header</th> <th>Column header 1</th> <th>Column header 2</th> </tr> </thead> <tbody> <tr class="odd"> <th>Row header 1</th> <td>Lorem ipsum</td> <td>Dolor sit amet</td> <td>Lorem ipsum</td> <td>Dolor sit amet</td> </tr> </tbody> <tfoot> <tr> <th>Table footer</th> <td colspan="2">Footer data</td> </tr> </tfoot> </table>
Lists are crucial element in contents not only of online websites, but offline publications as well. List really helps readers to distinguish and remember important things by just a glance. JSN Epic offers 5 standard and 8 advanced list styles for virtually all kind of information you might want to outline.
<ul><li>…</li><li>…</li></ul>
<ol><li>…</li><li>…</li></ol>
<ul class="list-arrow-red"> <li>...</li> <li>...</li> </ul>
<ul class="list-arrow-blue"> <li>...</li> <li>...</li> </ul>
<ul class="list-arrow-green"> <li>...</li> <li>...</li> </ul>
<ul class="list-icon article-list"> <li>...</li> <li>...</li> </ul>
<ul class="list-icon folder-list"> <li>...</li> <li>...</li> </ul>
<ul class="list-icon image-list"> <li>...</li> <li>...</li> </ul>
<ul class="list-icon online-list"> <li>...</li> <li>...</li> </ul>
<ul class="list-icon star-list"> <li>...</li> <li>...</li> </ul>
<ul class="list-icon user-list"> <li>...</li> <li>...</li> </ul>
<ul class="list-number-bullet blue-bullet"> <li>...</li> <li>...</li> </ul>
<ul class="list-number-bullet green-bullet"> <li>...</li> <li>...</li> </ul>
<ul class="list-number-bullet grey-bullet"> <li>...</li> <li>...</li> </ul>
<ul class="list-number-bullet orange-bullet"> <li>...</li> <li>...</li> </ul>
<ul class="list-number-bullet red-bullet"> <li>...</li> <li>...</li> </ul>
<ul class="list-number-bullet violet-bullet"> <li>...</li> <li>...</li> </ul>
<ul class="list-number-digit blue-digit"> <li>...</li> <li>...</li> </ul>
<ul class="list-number-digit green-digit"> <li>...</li> <li>...</li> </ul>
<ul class="list-number-digit grey-digit"> <li>...</li> <li>...</li> </ul>
<ul class="list-number-digit orange-digit"> <li>...</li> <li>...</li> </ul>
<ul class="list-number-bullet red-bullet"> <li>...</li> <li>...</li> </ul>
<ul class="list-number-digit violet-digit"> <li>...</li> <li>...</li> </ul>