Typography

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.

Headings

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.

Text columns

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.

Content arranged in 2 columns

Example:

 <div class="grid-layout">   <div> Content in the first column. </div>   <div> Content in the second (last) column. </div> </div> 

Content arranged in 3 columns

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.

Text Style

JSN Epic provides 12 text styles for making your content easier to scan and read. Below are screenshots of text styles and usage examples:

Preformatted text

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>

Quote text

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>

Drop cap symbol

You can use this special drop cap symbol style for magazine / newspaper text paragraph.

Example:

<p class="text-dropcap">Your magazine text paragraph.</p>

Highlighted text

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>

Alert text

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.

Info text

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.

Download text

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.

Tip text

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.

Comment text

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.

Attachment text

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.

Video text

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.

Audio text

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.

Link styles

Automatic icon assignment

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)

Manual icon assignment

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.

Table styles

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.

Plain Rows table style

Example:

<table class="table-plainrows">

Color Stripes table style

Example:

<table class="table-colorstripes">

Grey Stripes table style

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>    

List styles

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.

Standard list styles

 <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> 		

Icon list styles

 <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> 		

Number list style

 <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> 		

Click here to compare the free and PRO editions