Типографика

Это оформление возможно с помощью шаблонов, которые имеют страницу типографики, чтобы показать вам, как вы можете использовать, например. заголовки, чтобы лучше структурировать ваш контент.

Ниже мы приводим перестроенные и обновленные типографские аспекты Gavern Framework.. Чтобы использовать его, вы должны  подключить модуль, который поставляется в пакете с шаблоном или с использовать код HTML.

Предупреждения

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orci non tortor accumsan at accumsan tortor congue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orci non tortor accumsan at accumsan tortor congue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orci non tortor accumsan at accumsan tortor congue.

Заголовки

Это заголовок 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper egestas nunc in volutpat. Fusce adipiscing velit ac eros tempor iaculis. Phasellus venenatis mollis augue, non posuere odio placerat in. Etiam volutpat ultrices lectus. Fusce eu felis erat.

Это заголовок 2

Cras diam justo, sodales quis lobortis sed, lobortis vel mauris. Sed a mollis nunc. Quisque semper condimentum lectus, eget laoreet ipsum auctor et. Quisque sagittis luctus augue, id fringilla enim euismod quis. Nullam blandit, elit at euismod rutrum, tortor nibh posuere mauris, in volutpat diam ante ac dui.

это заголовок 3

Vivamus rhoncus arcu sit amet est tristique convallis nec vel eros. Vestibulum euismod luctus velit quis porta. Aliquam varius placerat mauris sed vehicula. Integer porta facilisis sapien, in tempus lorem mattis molestie. Suspendisse potenti.

Это заголовок4

Proin urna erat, egestas vel consectetur at, accumsan at purus. Donec est risus, facilisis dignissim placerat nec, euismod lacinia nisi. Nam ac sem sed quam sollicitudin condimentum et eu neque. Nunc enim urna, ultricies ac mollis pretium, imperdiet hendrerit massa.

Это заголовок.

Это подзаголовок.

Используйте <p class="gkHeadling">для заголовка</p>.Используйте <p class="gkSubHeadline">Для подзаголовка</p>.Proin urna erat, egestas vel consectetur at, accumsan at purus. Donec est risus, facilisis dignissim placerat nec, euismod lacinia nisi. Nam ac sem sed quam sollicitudin condimentum et eu neque.

Это небольшой заголовок

Это большой заголовок

Используйте <p class="gkHeadling">for для заголовка</p>.Используйте <p class="gkSubHeadline">для подзаголовка</p>.Proin urna erat, egestas vel consectetur at, accumsan at purus. Donec est risus, facilisis dignissim placerat nec, euismod lacinia nisi. Nam ac sem sed quam sollicitudin condimentum et eu neque.

Всплывающие подсказки (тултипы)

Вот некоторые примеры: Classicэто всего лишь пример того, что вы можете сделать, используя всплывающую подсказку CSS, не стесняйтесь проявлять творческий подход и создавать свои собственные всплывающие подсказки! , CriticalCriticalэто всего лишь пример того, что вы можете сделать, используя всплывающую подсказку CSS, не стесняйтесь проявлять творческий подход и создавать свои собственные всплывающие подсказки! , HelpHelpэто всего лишь пример того, что вы можете сделать, используя всплывающую подсказку CSS, не стесняйтесь проявлять творческий подход и создавать свои собственные всплывающие подсказки! , InformationInformationэто всего лишь пример того, что вы можете сделать, используя всплывающую подсказку CSS, не стесняйтесь проявлять творческий подход и создавать свои собственные всплывающие подсказки! and WarningWarningэто всего лишь пример того, что вы можете сделать, используя всплывающую подсказку CSS, не стесняйтесь проявлять творческий подход и создавать свои собственные всплывающие подсказки! CSS powered tooltip.

Подсветка (Highlights)

Это подсвеченная (ключевая) фраза.
  Используйте <span class="gkHighlight1">Your highlight phrase goes here!</span>.

This is a highlight phrase.
  Используйте <span class="gkHighlight2">Your highlight phrase goes here!</span>.

This is a highlight phrase.
  Используйте <span class="gkHighlight3">Your highlight phrase goes here!</span>.

This is a highlight phrase.
  Используйте <span class="gkHighlight4">Your highlight phrase goes here!</span>.

код

#wrapper {
position: relative;
float: left;
display: block;
}

Используйте 

 or
Here goes your code
#wrapper {
position: relative;
float: left;
display: block;
}

Используйте 

Here goes your code

File

#wrapper {
position: relative;
float: left;
display: block;
}

Используйте 

Name of your file

Here goes your code

Неупорядоченные списки

<ul>

  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.

<ul class="list-1">

  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.

<ul class="list-2">

  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.

<ul class="list-3">

  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.

Упорядоченные спискки

<ol class="ordered">

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac.
    1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac.
    2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac.
  4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac.

Пронумерованные блоки

<p class="numblock"><span>here goes a number</span>and here text of element</p>

01 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue.

02 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue.

Блоки

Use <p class="block-1">content here... </p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue.

  Используйте

content here...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue.

  Используйте <p class="block-3">content here... </p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue.

  Используйте  <p class="block-4">content here... </p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue.

  Используйте <div class="legend"> <h4> Title </h4> <p>and here text.</p> </div>

Легенда

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue.

Буквица

This is a sample text with Dropcap. Integer iaculis odio quis odio convallis venenatis. In leo orci, commodo vel nulla vel, interdum commodo libero. In egestas nibh eros, gravida porta velit vehicula sit amet. Cras volutpat cursus ultrices. Mauris congue vel arcu non rhoncus. Integer rutrum vulputate nunc condimentum rhoncus. Sed iaculis metus a tincidunt viverra. Morbi hendrerit ante quis eros porttitor, vitae malesuada ipsum pretium. Phasellus varius, libero nec consequat sodales, dui augue volutpat ligula, sit amet placerat leo odio ac augue. Aliquam interdum scelerisque aliquam. Integer iaculis odio quis odio convallis venenatis. In leo orci, commodo vel nulla vel, interdum commodo libero. In egestas nibh eros, gravida porta velit vehicula sit amet. Cras volutpat cursus ultrices. Mauris congue vel arcu non rhoncus. Integer rutrum vulputate nunc condimentum rhoncus. Sed iaculis metus a tincidunt viverra. Morbi hendrerit ante quis eros porttitor, vitae malesuada ipsum pretium. Phasellus varius, libero nec consequat sodales, dui augue volutpat ligula, sit amet placerat leo odio ac augue. Aliquam interdum scelerisque aliquam.

Use <p class="dropcap"> This is a sample text with Dropcap. </p>.

Blockquote

Use <blockquote> Your quoted text goes here... </blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue.

Плавающие блоки

<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 elit. 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 elit. 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 adipiscing 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 elit. 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 elit. 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 adipiscing 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> Здесь располагаем главную часть текста <span class="gkBlockTextCenter">Текстовый блок</span>остальная часть текста</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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 elit. 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 adipiscing 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.

Специальные элементы

Иконки соцсетей

<a class="gkFb" href="#">Facebook</a> 
<a class="gkTwitter" href="#">Twitter</a> 
<a class="gkGplus" href="#">Google+</a> 
<a class="gkPinterest" href="#">Pinterest</a>




Регистрация