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 Free Edition PRO Edition

Heading Styles

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

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

Grid col 2

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

Grid col 3

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 Free Edition PRO Edition

You can use this style to present text with preserved spaces like text block of CSS code or other programming language.

Example:

Preformatted text style

<pre>Your preformatted text</pre>

Quote text Free Edition PRO Edition

You can us this style to quote somebody’s speech, idea or a fragment from some book, articles, etc.

Example:

Quote text style

<blockquote>Your quote text</blockquote>

Drop cap symbol Free Edition PRO Edition

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

Example:

Drop Cap text style

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

Highlighted text Free Edition PRO Edition

You can use this style to highlight important words and / or keyword expression in search result page.

Example:

Highlighted text style

<span class="text-highlight">Text to be highlighted.</span>

Alert text PRO Edition

You can use this style for alert or warning text paragraph requiring user’s attention.

Example:

Alert text style

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

You can use this style for regular information text paragraph that does not require much user’s attention.

Example:

Info text style

<p class="text-info">Your information text.</p>.

You can use tag <p> like in example or tag <div> as well.

Download text PRO Edition

You can use this style for information text paragraph related to download process.

Example:

Download text style

<p class="text-download">Your download text.</p>.

You can use tag <p> like in example or tag <div> as well.

Tip text PRO Edition

You can use this style for useful information like tips, hints or help texts

Example:

Tip text style

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

You can use this style for comment text paragraph.

Example:

Comment text style

<p class="text-comment">Your comment text.</p>.

You can use tag <p> like in example or tag <div> as well.

Attachment text PRO Edition

You can use this style for information text paragraph that related to attachment file.

Example:

Attachment text style

<p class="text-attachment">Your attachment text.</p>.

You can use tag <p> like in example or tag <div> as well.

Video text PRO Edition

You can use this style to represent the description of a video file.

Example:

Video text style

<p class="text-video">Your description text.</p>.

You can use tag <p> like in example or tag <div> as well.

Audio text PRO Edition

You can use this style to represent the description of an audio file.

Example:

Audio text style

<p class="text-audio">Your description text.</p>.

You can use tag <p> like in example or tag <div> as well.

Link styles PRO Edition

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 Icons

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 Icons

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

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:

Plain Rows Table

<table class="table-plainrows">

Color Stripes table style

Example:

Color Stripes Table

<table class="table-colorstripes">

Grey Stripes table style

Example:

Grey Stripes Table

<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 Free Edition PRO Edition

Unordered list

Unordered list style

<ul><li>…</li><li>…</li></ul>

Ordered list

Ordered list style

<ol><li>…</li><li>…</li></ol>

Red arrow

Red Arrow list style

 <ul class="list-arrow-red"> 	<li>...</li> 	<li>...</li> </ul> 		

Blue arrow

Blue Arrow list style

 <ul class="list-arrow-blue"> 	<li>...</li> 	<li>...</li> </ul> 		

Green arrow

Green Arrow list style

 <ul class="list-arrow-green"> 	<li>...</li> 	<li>...</li> </ul> 		

Icon list styles PRO Edition

Article icon list

Article Icon List

 <ul class="list-icon article-list"> 	<li>...</li> 	<li>...</li> </ul> 		

Folder icon list

Folder Icon List

 <ul class="list-icon folder-list"> 	<li>...</li> 	<li>...</li> </ul> 		

Image icon list

Image Icon List

 <ul class="list-icon image-list"> 	<li>...</li> 	<li>...</li> </ul> 		

Online icon list

Online Icon List

 <ul class="list-icon online-list"> 	<li>...</li> 	<li>...</li> </ul> 		

Star icon list

Star Icon List

 <ul class="list-icon star-list"> 	<li>...</li> 	<li>...</li> </ul> 		

User icon list

User Icon List

 <ul class="list-icon user-list"> 	<li>...</li> 	<li>...</li> </ul> 		

Number list style PRO Edition

Blue Bullet number list

List Bullet Blue

 <ul class="list-number-bullet blue-bullet"> 	<li>...</li> 	<li>...</li> </ul> 		

Green Bullet number list

List Bullet Green

 <ul class="list-number-bullet green-bullet"> 	<li>...</li> 	<li>...</li> </ul> 		

Grey Bullet number list

List Bullet Grey

 <ul class="list-number-bullet grey-bullet"> 	<li>...</li> 	<li>...</li> </ul> 		

Orange Bullet number list

List Bullet Orange

 <ul class="list-number-bullet orange-bullet"> 	<li>...</li> 	<li>...</li> </ul> 		

Red Bullet number list

List Bullet Red

 <ul class="list-number-bullet red-bullet"> 	<li>...</li> 	<li>...</li> </ul> 		

Violet Bullet number list

List Bullet Violet

 <ul class="list-number-bullet violet-bullet"> 	<li>...</li> 	<li>...</li> </ul> 		

Blue Digit number list

List Digit Blue

 <ul class="list-number-digit blue-digit"> 	<li>...</li> 	<li>...</li> </ul> 		

Green Digit number list

List Digit Green

 <ul class="list-number-digit green-digit"> 	<li>...</li> 	<li>...</li> </ul> 		

Grey Digit number list

List Digit Grey

 <ul class="list-number-digit grey-digit"> 	<li>...</li> 	<li>...</li> </ul> 		

Orange Digit number list

List Digit Orange

 <ul class="list-number-digit orange-digit"> 	<li>...</li> 	<li>...</li> </ul> 		

Red Digit number list

List Digit Red

 <ul class="list-number-bullet red-bullet"> 	<li>...</li> 	<li>...</li> </ul> 		

Violet Digit number list

List Digit Violet

 <ul class="list-number-digit violet-digit"> 	<li>...</li> 	<li>...</li> </ul> 		

buy-now

Click here to compare the free and PRO editions