this is the .gradientclass, using background-image property with linear gradient, and fallbacks, like 'background-color:', and 2nd level such as 'background:'.
this is the .gradient basic class structure implementation.
this is the .gradient left to right, etc. class
this is the .gradient CORNERS left to right, etc. class
this is the ANGLE gradient class
this is the COLORS in the GRADIENT class
this is the COLOR-STOPS in the GRADIENT class
this is the COLOR-STOPS in COLUMNS (level,equal values) class
this is the RADIAL GRADIENTS start at a single point, and emanate outwards. ('Ellipse' is the default here; next comes 'circle' explicitly specified) class
this is the RADIAL GRADIENTS with 'circle'explicitly specified. class
this is the RADIAL circle CLOSEST SIDE. class
this is the Circle top right. class
this is the Circle top right. class
this is the Circle top right. class
web • development • audio • design
• • • •
• • • •
Stylin the Future
Stylin the Future
Stylin the Future
This page presents most of typographical aspects of JA T3v2 Framework. Make your readers happy with great Typography and User Experience!
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.
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.
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.
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.
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.
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.
Below is a sample of <pre> tag or code class:
#ja-rightcol { width: 180px; float: right; color: #EEEEEE; }
This is a highlight phrase. Use <span class="highlight">Your highlight phrase goes here!</span>.
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!
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!
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.
quiz
quiz
quiz
Use <p class="icon-error">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.
Examples of simple Bootstrap styles
Example lead class in a paragraph block of text
Using a small tag shows that particular style here.that was small by itself, but now we'll mix in some p tags to enclose some smaller text...
Why is Bootstrapthe best thing since sliced bread?my friend?
For a special lightweight emphasis, use the italics tag.
What about em tag I thought EMphasis, use the italics tag.beeuth
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
abbr tag hereEverybody knows that HTML is the best thing since sliced bread!
Twitter, Inc.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous Source Title
for loop=1 to $somevariable else do some other stuff;
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>
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mike | Peschel | @mdo |
2 | Ryan | Olson | @fat |
3 | Chris | Clemenson | |
3 | Jeremy | Peschel | |
3 | Todd | Fuller | |
3 | Dale | Dingmann | |
3 | Spencer | Flatten | |
3 | Nic | Obey | |
3 | Blake | Turbak |
tHeader1 | tHeader2 |
---|---|
CELL A1 | CELL A2 |
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.
Present data in a form that's not editable without using actual form markup.
Some value hereEnd 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.
We'll come back to this one later, cause we need 'Help' with this one...WTF is it doing BTW? Inline help text
what the diff with uneditable/