Search

Home

About Us
About Lintas Digital

News
Lintas Digital news

Contact us

JD LINKS Home About Us News Contact us NAVIGATION Forums Create content Recent posts

JD Purity's Typography
View Track This page presents most of typographical aspects of JA Purity ii. Make your readers happy with great Typography and User Experience!

This is an Heading 1
Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.

This is an Heading 2
Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst.

Join us for DrupalCon. Learn about how open source is reshaping the internet and meet the community that is leading the way... ABOUT JD PURITY

This is an Heading 3
Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur. THIS IS AN HEADING 4 Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.

Nam eleifend hendrerit parturient orci lorem ipsum ipsum non eros cursus. Quisque id metus non Nam elit feugiat lorem justo Phasellus In. Congue Morbi molestie quis habitasse ornare felis Nam pretium Nam dictumst.

Special Content
Below is a sample of <pre> or <div class="code">
#ja-rightcol { width: 180px; float: right; color: #EEEEEE; }

This is a highlight phrase . Use <span class="highlight">Your highlight phrase goes here!</span>.

his is a Magazine Style Drop Cap. The first letter in this paragraph is big. JA Purity II bring into your Jooomla template the magazine drop cap technique and CSS2 includes the first-letter pseudo class. In all fairness to the paragraph itself we probably should type enough to see how it looks when it is surrounded by its textual friends by using more words.

This is a sample Blockquote. Use <blockquote>Your quote goes here!</blockquote> to form a quote! This is a sample Blockquote. Use <blockquote><span class="open">Y</span>our quote goes her<span class="close">e!</span></blockquote> to form a quote!

Lists Style
1. This is a sample Ordered List. This is a sample Unordered List.

2. Lorem ipsum dolor sit amet consectetuer. 3. Condimentum quis. 4. Congue Quisque augue elit dolor nibh.

Condimentum quis. Lorem ipsum dolor sit amet consectetuer. Congue Quisque augue elit dolor nibh.

This is a sample Arrow list. Use <ul class="arrow"><li><span class="icon">&nbsp;</span>List's content goes here!</li></ul> This is a sample Checklist. This is a sample Star List. Use <ul class="star"><li><span class="icon">&nbsp;</span>List's content goes here!</li></ul> This is a sample Star List. This is a sample Checklist. Use <ul class="checklist"><li><span class="icon">&nbsp;</span>List's content goes here!</li></ul> This is a sample Checklist.

This is a sample Phone List. Use <ul class="phone"><li><span class="icon">&nbsp;</span>List's content goes here!</li></ul> This is a sample Phone List. This is a sample Address List. Use <ul class="address"><li><span class="icon">&nbsp;</span>List's content goes here!</li></ul> This is a sample Address List. This is a sample Email List. Use <ul class="email"><li><span class="icon">&nbsp;</span>List's content goes here!</li></ul> This is a sample Email List.
IncreaseDefault font size Decrease size size font font

01 02 03 01 02 03 01 02 03

This is a sample block number. Use <p class="blocknumber-1"><span class="bignumber">01.</span>Your content goes here!</p> to form a block number! This is a sample block number. Use <p class="blocknumber-1"><span class="bignumber">02.</span>Your content goes here!</p> to form a block number! This is a sample block number. Use <p class="blocknumber-1"><span class="bignumber">03.</span>Your content goes here!</p> to form a block number! This is a sample block number. Use <p class="blocknumber-2"><span class="bignumber">01.</span>Your content goes here!</p> to form a block number! This is a sample block number. Use <p class="blocknumber-2"><span class="bignumber">02.</span>Your content goes here!</p> to form a block number! This is a sample block number. Use <p class="blocknumber-2"><span class="bignumber">03.</span>Your content goes here!</p> to form a block number! This is a sample block number. Use <p class="blocknumber-3"><span class="bignumber">01.</span>Your content goes here!</p> to form a block number! This is a sample block number. Use <p class="blocknumber-3"><span class="bignumber">02.</span>Your content goes here!</p> to form a block number! This is a sample block number. Use <p class="blocknumber-3"><span class="bignumber">03.</span>Your content goes here!</p> to form a block number!

Paragraph Style
Use <p class="error"><span class="icon">&nbsp; </span>Your message goes here!</p> to make this. Use <p class="message"><span class="icon">&nbsp;</span>Your message goes here!</p> to make this.
Use <p class="tips"><span class="icon">&nbsp; </span>Your message goes here!</p> to make this.

Use <p class="cart"><span class="icon">&nbsp; </span>Your message goes here!</p> to make this. Use <p class="doc"><span class="icon">&nbsp; </span>Your message goes here!</p> to make this. Use <p class="note"><span class="icon">&nbsp; About Guides FAQs </span>Your message goes here!</p> to make this. Use <p class="photo"><span class="icon">&nbsp;</span>Your message goes here!</p> to make this Use <p class="mobi"><span class="icon">&nbsp; </span>Your message goes here!</p> to make

Use <p class="key"><span class="icon">&nbsp; </span>Your message goes here!</p> to make this. Use <p class="tag"><span class="icon">&nbsp; </span>Your message goes here!</p> to make this.

this.

CHA NGE FONT SIZE

Bubbles

CHA NGE SCREEN

Fluid Wide <div class="bubble bubble-l1 clearfix"> <div class="box-ct"> Narrow Default <div class="box tl">&nbsp;</div> <div class="box tr">&nbsp;</div> <div class="box bl">&nbsp;</div> <div class="box
CHA NGE LA YOUTS br">&nbsp;</div> Buble's content goes here! main-left-right</div> rounded <span class="arrow">&nbsp;</span> <span class="author">Put author name here</span> </div>

default left-right-main left-right-mainrounded

main-left-right

Put author name here

CHA NGE MENU STYLES

<div class="bubble bubble-l2 clearfix"> <div class="box-ct"> Bubble's content goese here! </div> <span class="arrow">&nbsp;</span> <span class="author">Put author name here</span> </div> Put author name here

Split Menu CSS Menu

Dropline Menu Mega Menu

Apply

Reset

<div class="bubble bubble-d1 clearfix"> <div class="box-ct"> <div class="box tl">&nbsp;</div> <div class="box tr">&nbsp;</div> <div class="box bl">&nbsp;</div> <div class="box br">&nbsp;</div> Buble's content goes here! </div> <span class="arrow">&nbsp;</span> <span class="author">Put author name here</span> </div> Put author name here

<div class="bubble bubble-d2 clearfix"> <div class="box-ct"> Bubble's content goese here! </div> <span class="arrow">&nbsp;</span> <span class="author">Put author name here</span> </div> Put author name here

<div class="bubble bubble-hl1 clearfix"> <div class="box-ct"> <div class="box tl">&nbsp;</div> <div class="box tr">&nbsp;</div> <div class="box bl">&nbsp;</div> <div class="box br">&nbsp;</div> Buble's content goes here! </div> <span class="arrow">&nbsp;</span> <span class="author">Put author name here</span> </div> Put author name here

<div class="bubble bubble-hl2 clearfix"> <div class="box-ct"> Bubble's content goese here! </div> <span class="arrow">&nbsp;</span> <span class="author">Put author name here</span> </div> Put author name here

Boxes and Legends Style

This is a sticky. Use <p class="box-sticky">Your clip note goes here!</p> to create a clip note!

This is a download box. Use <p class="box-download">Your download goes here!</p> to create a download box!

This is a grey box. Use <p class="box-grey">Your content goes here!</p> to create a grey box!

This is a hilite box. Use <p class="box-hilite">Your content goes here!</p> to create a hilite box!

Legend style
Use <div class="legend"><h3 class="legend-title">Your title</h3><p>Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.</p></div>

Legend style highlight

Use <div class="legend-hilite"><h3 class="legend-title">Your title</h3><p>Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.</p></div>

Special Module Style

Use module suffix: _badge badge-top to put this badge on any module you like! Use module suffix: _badge badge-new to put this badge on any module you like!

Use module suffix: _badge badge-pick to put this badge on any module you like!

Use module suffix: _badge badge-hot to put this badge on any module you like!

YOU ARE HERE Home

Top

LATEST ARTICLE JD Purity's Typography

Feb 23, 2010

POPULAR ARTICLE JD Purity's Typography

Feb 23, 2010

LATEST COMMENTS First thought is $...

Feb 24, 2010

SUPPORT Our office hours are: Monday to Friday from 8:00 AM - 5:00 PM at Jl. Gunung Sahari Raya no. 78

CONTACT US Lintas Digital Head Office: Tel: +62 21 4 Email: info@lintasdigital.com Web: lintasdigital.com

Handbook style guide

Feb 23, 2010

The Drupal.org Redesign...

Feb 23, 2010

Hello, yes, this is...

Feb 24, 2010

Editing documentation embedded into...

Feb 23, 2010

New Book: Flash with Drupal

Feb 23, 2010

submit()
Feb 24, 2010

Home

About us

Privacy

Forums

Contact us