I Do What I Gotta Do - Download
$1.29
CS COLEMAN

Pretext for Headers In a Radical New Structure

Jquery
Implementation of custom jQuery displaying a nested definition list item, inside a definition list.
NESTED!
AnswerNested list inside a list.

Definition List

<dl>
<dt>Question</dt>
<dd style="display: none;">
Answer
</dd>
</dl>

Nested Definition List

<dl>
<dt>Question</dt>
<dd style="display: none;">
Answer
<dt>q NESTED</dt>
<dd style="display: none;">
<strong>A Nested</dd>
</dl>
</dd>
</dl>

Prettyprint
<h2>LIST NAME</h2>
<dl class="jslide">
<dt><i class="fa fa-info-circle fa-3x"></i>
<strong>Question</strong>: How can I...?</dt>
<dd style="display: none;">
<strong>Answer</strong>:Link to the .js file in the header...</dd>
</dl>
Bootstrap
For example,
for loop=1 to $somevariable else do some other stuff;
should be wrapped as inline.

Using pre tags, my code sample looks like this...

    <p>Using pre tags, my code sample looks like this...</p>
    
    <p>Using pre tags, my code sample looks like this...</p>
    <p>Using pre tags, my code sample looks like this...</p>
    

TABLES

Default

# First Name Last Name Username
1 Mike Peschel @mdo
2 Ryan Olson @fat
3 Chris Clemenson @twitter
3 Jeremy Peschel @twitter
3 Todd Fuller @twitter
3 Dale Dingmann @twitter
3 Spencer Flatten @twitter
3 Nic Obey @twitter
3 Blake Turbak @twitter

Well Formed Table Structure Sample

This is the caption!
tHeader1 tHeader2
CELL A1 CELL A2

FORMS

Search Form

Inline Form

Horizontal form

Form Controls

Input

Textarea

Checkboxes and RadioButtons

Inline Checkboxes

Selects

EXTENDING FORM CONTROLS

Prepended and appended inputs

@
.00

Combined

$.00

Buttons INSTEAD of TEXT

More Search Form Samples

CONTROL SIZING

Relative Sizing

Grid sizing






multiple grid inputs per line

use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.

Uneditable inputs

Present data in a form that's not editable without using actual form markup.

Some value here

Form actions

End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.

Help text

We'll come back to this one later, cause we need 'Help' with this one...WTF is it doing BTW? Inline help text

FOCUS

DISABLED input

what the diff with uneditable/

VALIDATION

Something may have gone wrong
Please correct the error
Woohoo!

BUST MY BUTTONS

BLOCK LEVEL BUTTONSES

Loading...

Disabled State

Anchor element

Primary link Link

Button Element

One class, multiple tags

Link

IMAGES!!!

glyphICONs ICONS

   icon-search

Button Toolbar

Dropdown in a button group

small buttn

NAVIGATION

FORM FIELDS

icon-envelope

JA Typography

This page presents most of typographical aspects of JA T3v2 Framework. Make your readers happy with great Typography and User Experience!

HTML Headings

This is an H1 Header

Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.

This is an H2 Header

Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.

This is an H3 Header

Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.

This is an H4 Header

Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.

This is an H5 Header

Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.

This is an H6 Header

Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.

HTML pre tag & code class

Below is a sample of <pre> tag or code class:

#ja-rightcol {
  width: 180px;
  float: right;
  color: #EEEEEE;
}

Highlight

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

Blockquote

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!

Dropcaps

This is a sample Drop Cap. The first letter in this paragraph is big. JA Templates bring into your Jooomla template the magazine drop cap technique and CSS2 includes the first-letter pseudo class. Use <p><span class="dropcap">T</span>Your content goes here!</p> to form a dropcap!

01This is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-1">01</span>Your content goes here!</p> to form a block dropcap!

02This is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-1">02</span>Your content goes here!</p> to form a block dropcap!

03This is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-1">03</span>Your content goes here!</p> to form a block dropcap!

AThis is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-2">A</span>Your content goes here!</p> to form a block dropcap!

BThis is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-2">B</span>Your content goes here!</p> to form a block dropcap!

CThis is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-2">C</span>Your content goes here!</p> to form a block dropcap!

aThis is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-3">a</span>Your content goes here!</p> to form a block dropcap!

bThis is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-3">b</span>Your content goes here!</p> to form a block dropcap!

cThis is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-3">c</span>Your content goes here!</p> to form a block dropcap!


Lists Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.

Ordered List

  1. This is a sample Ordered List.
  2. Lorem ipsum dolor sit amet consectetur
  3. Lorem ipsum dolor sit amet consectetur
  4. Lorem ipsum dolor sit amet consectetur
  5. Lorem ipsum dolor sit amet consectetur
  6. Lorem ipsum dolor sit amet consectetur

Unordered List

  • This is a sample Unordered List.
  • Lorem ipsum dolor sit amet consectetur
  • Lorem ipsum dolor sit amet consectetur
  • Lorem ipsum dolor sit amet consectetur
  • Lorem ipsum dolor sit amet consectetur
  • Lorem ipsum dolor sit amet consectetur

Definition List

This is a sample Definition List.
Condimentum quis.
Congue Quisque augue elit dolor.
Condimentum quis sapien.
Congue Quisque augue elit dolor.
Nunc cursus sem et pretium sapien eget.
Condimentum quis sapien.
Congue Quisque augue elit dolor.
Nunc cursus sem et pretium sapien eget.

Unordered Lists with classes

  • This is a sample Arrow list.
  • Use <ul class="arrowlist"><li>List's content goes here!</li></ul>
  • This is a sample Arrowlist.
  • This is a sample Star list.
  • Use <ul class="starlist"><li>List's content goes here!</li></ul>
  • This is a sample Starlist.
  • This is a sample Check list.
  • Use <ul class="checklist"><li>List's content goes here!</li></ul>
  • This is a sample Checklist
  • This is a sample Bullet list.
  • Use <ul class="bulletlist"><li>List's content goes here!</li></ul>
  • This is a sample Arrowlist.
  • This is a sample Cross list.
  • Use <ul class="crosslist"><li>List's content goes here!</li></ul>
  • This is a sample Starlist.
  • This is a sample Add list.
  • Use <ul class="addlist"><li>List's content goes here!</li></ul>
  • This is a sample Checklist.

Icons Style

Use <p class="icon-error">Your message goes here!</p> to make this.

Use <p class="icon-message">Your message goes here!</p> to make this.

Use <p class="icon-tips">Your message goes here!</p> to make this.

Use <p class="icon-note">Your message goes here!</p> to make this.

Use <p class="icon-tag">Your message goes here!</p> to make this.

Use <p class="icon-rss">Your message goes here!</p> to make this.

Use <p class="icon-cart">Your message goes here!</p> to make this.

Use <p class="icon-page">Your message goes here!</p> to make this.

Use <p class="icon-demo">Your message goes here!</p> to make this.

Use <p class="icon-download">Your message goes here!</p> to make this.

Use <p class="icon-discussion">Your message goes here!</p> to make this.

Use <p class="icon-info">Your message goes here!</p> to make this.

Use <p class="icon-readmore">Your message goes here!</p> to make this.

Use <p class="icon-doc">Your message goes here!</p> to make this.

Use <p class="icon-signup">Your message goes here!</p> to make this.

Use <p class="icon-login">Your message goes here!</p> to make this.

Use <p class="icon-submit">Your message goes here!</p> to make this.

Use <p class="icon-extension">Your message goes here!</p> to make this.

  • This is a sample User icon.
  • This is a sample Group icon.
  • This is a sample Key icon.
  • This is a sample Birthday icon.
  • This is a sample Photo icon.
  • This is a sample Calendar icon.
  • This is a sample Address icon.
  • This is a sample Phone icon.
  • This is a sample Mobi icon.
  • This is a sample Fax icon.
  • This is a sample Email icon.
  • This is a sample Website icon.
  • This is a sample Yahoo icon.
  • This is a sample Gmail icon.
  • This is a sample Skype icon.
  • This is a sample MSN icon.
  • This is a sample Facebook icon.
  • This is a sample Twitter icon.

Button & Tags Style

Button Style

Font Awesome
fa-list
fa-list
fa-list