Sei qui: Home Risorse Libri consigliati Uncategorised Typography

 

Venerdì, 04 Novembre 2011 14:33

Typography

Scritto da  Super User

• dimensione font riduci dimensione font aumenta la dimensione del font
• Stampa
• Email

Vota questo articolo

• 1
• 2
• 3
• 4
• 5

(0 Voti)

Headings

H1.Lorem ipsum dolor sit amet

H2.Lorem ipsum dolor sit amet

H3.Lorem ipsum dolor sit amet

H4.Lorem ipsum dolor sit amet

H5.Lorem ipsum dolor sit amet

H6.Lorem ipsum dolor sit amet

Emphasis classes

Cum sociispenatibus parturient, your Muted Highlight text goes here... nascetur ridiculus. Cum sociispenatibus parturient, your Primary Highlight text goes here... nascetur ridiculus. Cum sociispenatibus parturient, your Success Highlight text goes here... nascetur ridiculus. Cum sociispenatibus parturient, your Warning Highlight text goes here... nascetur ridiculus. Cum sociispenatibus parturient, your Danger Highlight text goes here... nascetur ridiculus.

Blockquotes

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 in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Someone famous in Source Title

Lists

• Lorem ipsum dolor sit amet
• Nulla volutpat aliquam velit
• Lorem ipsum dolor sit
• Nulla volutpat aliquam
• Faucibus porta lacus vel
• Aenean sit amet erat nunc

1. Lorem ipsum dolor sit amet
2. Nulla volutpat aliquam velit
3. Lorem ipsum dolor sit
4. Nulla volutpat aliquam
5. Faucibus porta lacus vel
6. Aenean sit amet erat nunc

• Lorem ipsum dolor sit amet
• Nulla volutpat aliquam velit
• Lorem ipsum dolor sit
• Faucibus porta lacus vel
• Aenean sit amet erat nunc

• Lorem ipsum dolor sit amet
• Nulla volutpat aliquam velit
• Lorem ipsum dolor sit
• Nulla volutpat aliquam
• Faucibus porta lacus vel
• Aenean sit amet erat nunc

Thumbnails

Default Thumbnail Image

Etiam quis elit ut odio rutrum hendrerit sodales vitae orci. Morbi viverra porta scelerisque. Vestibulum consequat, leo vulputate sollicitudin bibendum, arcu ipsum sagittis lacus, et vehicula eros ligula ac nulla. Mauris eu sem dui. Nullam felis nulla, scelerisque nec arcu non, volutpat placerat dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean condimentum, felis vehicula faucibus pretium, augue libero cursus odio, eu venenatis est arcu et est. Vestibulum ultricies libero magna, eget feugiat tellus pellentesque sed.

Default Rounded Image

Etiam quis elit ut odio rutrum hendrerit sodales vitae orci. Morbi viverra porta scelerisque. Vestibulum consequat, leo vulputate sollicitudin bibendum, arcu ipsum sagittis lacus, et vehicula eros ligula ac nulla. Mauris eu sem dui. Nullam felis nulla, scelerisque nec arcu non, volutpat placerat dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean condimentum, felis vehicula faucibus pretium, augue libero cursus odio, eu venenatis est arcu et est. Vestibulum ultricies libero magna, eget feugiat tellus pellentesque sed.

Default Circle Image

Etiam quis elit ut odio rutrum hendrerit sodales vitae orci. Morbi viverra porta scelerisque. Vestibulum consequat, leo vulputate sollicitudin bibendum, arcu ipsum sagittis lacus, et vehicula eros ligula ac nulla. Mauris eu sem dui. Nullam felis nulla, scelerisque nec arcu non, volutpat placerat dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean condimentum, felis vehicula faucibus pretium, augue libero cursus odio, eu venenatis est arcu et est. Vestibulum ultricies libero magna, eget feugiat tellus pellentesque sed.

Tabs

• Home
• Profile
• Info

Pras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Ligula ac nulla. Mauris eu sem dui. Nullam felis nulla, scelerisque nec arcu non, volutpat placerat dolor

Felis nulla, scelerisque nec arcu nonla, scelerisque nec arcu non, volutpat placerat dolorPras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. Ollicitudin commodo. Fusce condimentum nunc ac nisi vulputate fringilla fringilla. Donec lacinia congue felis in faucibus.

Tooltips

Dras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante commodo sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus faucibus tiao. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Gap
[gap height="30"]

Headings
[title size="1,2,3,4,5,6"]Your Heading goes here..[/title]

Emphasis classes
First text [highlight type="muted, primary, success, warning, danger"]your highlight text goes here...[/highlight] end text.

Blockquotes
<blockquote>Your text goes here...</blockquote>

Default List
[list type="unordered, ordered, unstyled"]
<ul>
   <li>Lorem ipsum dolor sit amet</li>
   <li>Nulla volutpat aliquam velit</li>
   <li>Aenean sit amet erat nunc</li>
</ul>
[/list]

List with icons
[list type="unordered, ordered, unstyled"]
<ul>
   <li><i class="fa fa-camera-retro"></i>Lorem ipsum dolor sit amet</li>
   <li><i class="fa fa-cog"></i>Nulla volutpat aliquam velit</li>
   <li><i class="fa fa-check"></i>Aenean sit amet erat nunc</li>
</ul>
[/list]

Button Options
[button type="button" color_type="primary"]Primary[/button]
[button type="button" color_type="success"]Success[/button]
[button type="button" color_type="info"]Info[/button]
[button type="button" color_type="warning"]Warning[/button]
[button type="button" color_type="danger"]Danger[/button]

Button Sizes
[button type="button" color_type="primary" size="large"]Large Button[/button]
[button type="button" color_type="primary"]Default Button[/button]
[button type="button" color_type="primary" size="small"]Small Button[/button]
[button type="button" color_type="primary" size="mini"]Extra small button[/button]

Thumbnails
[imageframe src="/your_image_path_goes_heree" type="thumbnail, rounded, circle" alt="your image title" align="left, right"]

Tabs
[tabs tab1="Home" tab2="Profile" tab3="Info" active="tab1"]
   [tab id=1 active="yes"]Your text goes here...[/tab]
   [tab id=2 active="no"]Your text goes here...[/tab]
   [tab id=3 active="no"]Your text goes here...[/tab]
[/tabs]

Tooltips
Start text [tooltip title="sample_text" text="Your tooltip message"] end text.

Alert Messages
[alert type="success" dismiss="yes, no"]Well Done! You successfully read this important alert message.[/alert]
[alert type="info" dismiss="yes, no"]Heads up! This alert needs your attention, but it's not super important.[/alert] 
[alert type="warning" dismiss="yes, no"]Warning! Best check yo self, you're not looking too good.[/alert] 
[alert type="danger" dismiss="yes, no"]Oh snap! Change a few things up and try submitting again.[/alert]

Drop Caps
[dropcap type="1"]A[/dropcap]your text goes here.
[dropcap type="2"]B[/dropcap]your text goes here.

Social Icons
[social_icons] 
   [social_icon social="facebook" link="#"] 
   [social_icon social="flickr" link="#] 
   [social_icon social="rss" link="#"] 
   [social_icon social="twitter" link="#"] 
   [social_icon social="vimeo" link="#"] 
   [social_icon social="youtube" link="#"] 
   [social_icon social="pinterest" link="#"] 
   [social_icon social="tumblr" link="#"] 
   [social_icon social="google" link="#"] 
   [social_icon social="dribbble" link="#"]
   [social_icon social="digg" link="#"] 
   [social_icon social="linkedin" link="#"]
   [social_icon social="blogger" link="#"] 
   [social_icon social="skype" link="#"] 
   [social_icon social="forrst" link="#"] 
   [social_icon social="delicious" link="#"] 
   [social_icon social="devianart" link="#"] 
   [social_icon social="yahoo" link="#"] 
   [social_icon social="picasa" link="#"] 
   [social_icon social="email" link="#"] 
   [social_icon social="google" link="#"] 
[/social_icons]

Social Sharing
[social_icons]
   [sharing_box title="Sample Title" link="http://www.google.com" description="Sample description..."]
[/social_icons]

Awesome Icons
[fonticon icon="e.g. fa-adjust, fa-heart" size="e.g. fa-lg, fa-2x, fa-3x, fa-4x, fa-5x" spin="e.g. yes or no" style="" class=""]
[fonticon icon="fa-adjust" size="fa-2x"]
[fonticon icon="fa-cog" size="fa-2x"]
[fonticon icon="fa-check-circle" size="fa-2x"]
[fonticon icon="fa-calendar-o" size="fa-2x"]
[fonticon icon="fa-bell" size="fa-2x"]

more 350+ awesome icons...