-
Created: Monday, 31 October 2011
-
Hits: 5472
This page presents most of typographical aspects of Yt Framework. Make your readers happy with great Typography and User Experience!
Formatted text
Heading
This is an Heading 1
This is an Heading 2.
This is an Heading 3
This is an Heading 4
This is an Heading 5
Dropcap symbol
This is special drop cap symbol styling for magazine / newspaper text paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tristique sem vel turpis egestas cursus. Vivamus vehicula ligula non orci sollicitudin iaculis in nec enim. Ut eu magna at erat ultricies porta. Quisque vehicula ultrices mauris, ut pellentesque dui fermentum ac. Maecenas condimentum egestas tempor. Morbi bibendum congue purus eu ultrices. Cras pretium commodo velit non convallis. Sed ornare, arcu vitae sagittis elementum, metus lacus pulvinar ligula, non gravida elit sapien vestibulum odio. Pellentesque eget quam lectus, in fermentum urna. Ut libero dui, lobortis eget adipiscing quis, tristique fermentum nunc.
Code
Below is a sample of pre tag or code class:
pre, .code{
background-color: #FFFFDD;
border-color: #CCCCCC;
border-style: solid;
border-width: 1px 1px 1px 5px;
font: 1em/1.6 Monaco,Consolas,"Courier News",monospace;
padding: 10px 15px;
}
Blockquote
This is a sample Blockquote. LoremLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper egestas nunc in volutpat. Fusce adipiscing velit ac eros tempor iaculis. Vivamus vehicula ligula non orci sollicitudin iaculis in nec enim.
This is a sample Blockquote. LoremLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper egestas nunc in volutpat. Fusce adipiscing velit ac eros tempor iaculis. Vivamus vehicula ligula non orci sollicitudin iaculis in nec enim.!
High light
This is a highlight phrase. Use class="highlight".
Lists Style
Ordered List
This is a sample Ordered List.
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Un-Ordered List
This is a sample Un-Ordered List.
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Definition List
This is a sample Definition List.
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Un-Ordered List(arrow, email, star)
This is a sample Arrow style.
Use <ul class="yt-typo-list list-arrow"><li><span class="icon"> </span>List's content goes here!</li></ul>
This is a sample Arrowlist.
This is a sample Email style.
Use <ul class="yt-typo-list list-email"><li><span class="icon"> </span>List's content goes here!</li></ul>
This is a sample Checklist.
This is a sample Star style.
Use <ul class="yt-typo-list list-star"><li><span class="icon"> </span>List's content goes here!</li></ul>
This is a sample Starlist.
Un-Ordered List(home, call, check)
This is a sample Home style.
Use <ul class="yt-typo-list list-home"><li><span class="icon"> </span>List's content goes here!</li></ul>
This is a sample Checklist.
This is a sample Call style.
Use <ul class="yt-typo-list list-cal"><li><span class="icon"> </span>List's content goes here!</li></ul>
This is a sample Checklist.
This is a sample Check style.
Use <ul class="yt-typo-list list-check"><li><span class="icon"> </span>List's content goes here!</li></ul>
This is a sample Checklist.
Block row
01This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-1">01.</span>Your content goes here!</p> to form a block number!
02This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-1">02.</span>Your content goes here!</p> to form a block number!
03This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-1">03.</span>Your content goes here!</p> to form a block number!
01This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-2">01.</span>Your content goes here!</p> to form a block number!
02This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-2">02.</span>Your content goes here!</p> to form a block number!
03This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-2">03.</span>Your content goes here!</p> to form a block number!
01This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-3">01.</span>Your content goes here!</p> to form a block number!
02This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-3">02.</span>Your content goes here!</p> to form a block number!
03This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-3">03.</span>Your content goes here!</p> to form a block number!
Message Boxes & Legend Styles
Boxes 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!
Legend Style
Legend - Style 1
This is a Legend Style 1. Use <div class="yt-typo-legend legend1"> <h3 class="legend-title">Legend - Style 1</h3> text here! </div> to create a Legend Style 1!
Legend - Style 2
This is a Legend Style 2. Use <div class="yt-typo-legend legend2"> <h3 class="legend-title">Legend - Style 2</h3> text here! </div> to create a Legend Style 2!
Bubbles
Bubbles1
This is a sample Bubble. Use <div class="yt-typo-bubble1"> <div> <div> <div> <div> <div> Your Bubble goes here! </div> </div> </div> </div> </div><span class="author">ROUNDED SPEECH BUBBLE </span>
ROUNDED SPEECH BUBBLE
Bubbles4
This is a sample Bubble. Use <div class="yt-typo-bubble4"> <div> <div> <div> <div> <div> Your Bubble goes here! </div> </div> </div> </div> </div><span class="author">ROUNDED NOTE BUBBLE</span>
SQUARE THINKING BUBBLE
Bubbles2
This is a sample Bubble. Use <div class="yt-typo-bubble2"> <div> <div> <div> <div> <div> Your Bubble goes here! </div> </div> </div> </div> </div><span class="author">ROUNDED SPEECH BUBBLE</span>
SQUARE SPEECH BUBBLE
Bubbles3
This is a sample Bubble. Use <div class="yt-typo-bubble3"> <div> <div> <div> <div> <div> Your Bubble goes here! </div> </div> </div> </div> </div><span class="author">ROUNDED NOTE BUBBLE</span>
ROUNDED THINKING BUBBLE
Form
Fieldset
Special Fieldset - Style 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est.
Special Fieldset - Style 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est.
Form Elements
Sample Input 1
Sample Input 2
Sample Radio Input Sample CheckBox Input
Sample Select Field: OptionOption Two
Sample Textarea Field:
Icons Style
Use <p class="error"><span class="icon"> </span>Your message goes here!</p> to make this.
Use <p class="message"><span class="icon"> </span>Your message goes here!</p> to make this.
Use <p class="tips"><span class="icon"> </span>Your message goes here!</p> to make this.
Use <p class="key"><span class="icon"> </span>Your message goes here!</p> to make this.
Use <p class="tag"><span class="icon"> </span>Your message goes here!</p> to make this.
Use <p class="cart"><span class="icon"> </span>Your message goes here!</p> to make this.
Use <p class="doc"><span class="icon"> </span>Your message goes here!</p> to make this.
Use <p class="note"><span class="icon"> </span>Your message goes here!</p> to make this.
Use <p class="photo"><span class="icon"> </span>Your message goes here!</p> to make this.
Use <p class="mobi"><span class="icon"> </span>Your message goes here!</p> to make this.
Buttons
button style1
This is a sample button style1 with color blue. Use <a class="blue yt-typo-button style1">Button style1</a> to make it
Color: blue
Button style1
Color: green
Button style1
Color: orange
Button style1
Color: magenta
Button style1
Color: red
Button style1
Color: orangellow
Button style1
Color: white
Button style1
Color: rosy
Button style1
Color: pink
Button style1
Color: black
Button style1
Color: gray
Button style1
Color: brown
Button style1