Typography (original Gavick)
It is possible with templates which have a typography page to show you how you can use e.g. headline tags in order to structure your content in a better way. Below, we present rebuilt and refreshed typographical aspects of Gavern Framework. In order to use it, you have to use a plug in which is delivered in a package with a template or use HTML code.
Warnings
Lorem ipsum dolor sit amet, consectetur adipiscing elit1. Vestibulum venenatis orci non tortor accumsan...
Use <p class="gkInfo1">Your phrase goes here!</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit2. Vestibulum venenatis orci non tortor accumsan...
Use <p class="gkTips1">Your phrase goes here!</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit3. Vestibulum venenatis orci non tortor accumsan...
Use <p class="gkWarning1">Your phrase goes here!</p>
Headings
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
Highlights
This is a highlight phrase.
Use <span class="gkHighlight1">Your highlight phrase goes here!</span>.
This is a highlight phrase.
Use <span class="gkHighlight2">Your highlight phrase goes here!</span>.
Code
#wrapper {
float: left;
display: block;
}
Use <pre> content here... </pre> or <code> content here... </code>
Unordered lists
<ul class="gkBullet1">
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
<ul class="gkBullet2">
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
<ul class="gkBullet3">
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
<ul class="gkBullet4">
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
numBlocks
<p class="numblocks num-1"><span>here goes a number</span>and here text of element</p>
01 Lorem ipsum dolor sit amet, consectetur adipiscing elit4.
02 Lorem ipsum dolor sit amet, consectetur adipiscing elit5.
<p class="numblocks num-2"><span>here goes a number</span>and here text of element</p>
01 Lorem ipsum dolor sit amet, consectetur adipiscing elit6.
02 Lorem ipsum dolor sit amet, consectetur adipiscing elit7.
<p class="numblocks num-3"><span>here goes a number</span>and here text of element</p>
01 Lorem ipsum dolor sit amet, consectetur adipiscing elit8.
02 Lorem ipsum dolor sit amet, consectetur adipiscing elit9.
Blocks
Use <div class="gkblock-1">content here... </div>
Use <div class="gkblock-2">content here... </div>
Use <div class="gkblock-3">content here... </div>
Legends
Legend
Lorem ipsum dolor sit amet, consectetuer adipiscing elit13.
Use <div class="gkLegend1"> <h4> Title </h4> <p>and here text.</p> </div>
Bubbles
Use <div class="bubble-1">content here... <cite>Author name</cite></div>
Robert GavickUse <div class="bubble-2">content here... <cite>Author name</cite></div>
Robert GavickBlockquotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit16. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet1.Use <blockquote> « ..... » </blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit17. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet2.Use <blockquote class="gkBlockquote1"> « ..... » </blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit18. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet3.
« Invertir en sí es la receta de los ganadores! 1 »
« Invertir en sí es la receta de los ganadores! 2 »
« Invertir en sí es la receta de los ganadores! 3 »
Use
<div class="demo-typo-col2">
<div class="demo-typo_padd">
<p><blockquote> « ..... » </blockquote> </p>
</div>
</div>
« Invertir en sí es la receta de los ganadores! 4 »
« Invertir en sí es la receta de los ganadores! 5 »
« Invertir en sí es la receta de los ganadores! 6 »
Use <div class="demo-typo-col2">
<p><blockquote> « ..... » </blockquote> </p>
</div>
Quoted text (cita de autor7) aqui!
Use <blockquote class="gkBlockquote1"> « ..... » </blockquote>
Floated blocks
<p> Here goes main part of the text <span class="gkBlockTextLeft">Block of text</span>rest of the text</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit19. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue. Duis quis quam sed purus porta eleifend.Lorem ipsum dolor sit amet, consectetur adipiscing elit20. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue.Donec eget dignissim augue. Donec ante felis, aliquam ut consequat eget, lobortis dapibus risus. Aliquam laoreet enim et lectus ornare hendrerit. Aliquam rhoncus enim libero. Morbi aliquam, nibh mattis feugiat dapibus, nisi massa adipiscing21 justo, sit amet condimentum urna ipsum et lacus. Nam fermentum, eros quis ullamcorper convallis, libero mauris lacinia eros, sed tempus leo lorem vitae purus.
<p> Here goes main part of the text <span class="gkBlockTextRight">Block of text</span>rest of the text</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit22. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue. Duis quis quam sed purus porta eleifend.Lorem ipsum dolor sit amet, consectetur adipiscing elit23. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue.Donec eget dignissim augue. Donec ante felis, aliquam ut consequat eget, lobortis dapibus risus. Aliquam laoreet enim et lectus ornare hendrerit. Aliquam rhoncus enim libero. Morbi aliquam, nibh mattis feugiat dapibus, nisi massa adipiscing24 justo, sit amet condimentum urna ipsum et lacus. Nam fermentum, eros quis ullamcorper convallis, libero mauris lacinia eros, sed tempus leo lorem vitae purus.
<p> Here goes main part of the text <span class="gkBlockTextCenter">Block of text</span>rest of the text</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit25. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue. Duis quis quam sed purus porta eleifend.Lorem ipsum dolor sit amet, consectetur adipiscing elit26. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue.Donec eget dignissim augue. Donec ante felis, aliquam ut consequat eget, lobortis dapibus risus. Aliquam laoreet enim et lectus ornare hendrerit. Aliquam rhoncus enim libero. Morbi aliquam, nibh mattis feugiat dapibus, nisi massa adipiscing27 justo, sit amet condimentum urna ipsum et lacus. Nam fermentum, eros quis ullamcorper convallis, libero mauris lacinia eros, sed tempus leo lorem vitae purus. Nunc a malesuada felis. Cras ultrices sapien eu nisi elementum non blandit urna sodales.
Icons - Font Awesome
The Font Awesome is a set of base icons similar to the Glyphicons included with Bootstrap, plus a set of extended icons that include pictograms for external links, thumbs up/down, comments, cogs and more. Font Awesome is licensed under the Creative Commons Attribution 3.0 Unported (CC BY 3.0). More details you can find on project homepage at https://fortawesome.github.com/Font-Awesome
Use <i class="fa fa-CLASS_NAME"></i> content here...
11 New Icons in 4.0
Web Application Icons
Form Control Icons
Currency Icons
Text Editor Icons
Directional Icons
Video Player Icons
Brand Icons
Medical Icons
Eres un invitado ( Logear ? )
o postear como invitado
Atrevete a ser el primero en comentar!