Gavern Framework - Refreshed Typography

Last time, a lot of attention was paid to typography elements refresh used in our templates. We implemented some changes which should simplify its usage and we also added options connected with typography directly.

There are some options In "Typography" tab which allow to manage typography used on the site. Icon sets are completely new as they can be switched on/off separately. Apart from that, whole typography can be switched off; thanks to this, if we do not use it, we do not have to download files which are redundant.

Typography plugin was also rebuilt, there were tabs added which allow to move through typography elements grouped thematically.

Typography was enriched about new headers, existing elements stylistics and was improved with effects offered by CSS3.

All icon sets or images for typography will be available with every template, which will make possible to modify images and typography extension easily.

Adjusting plugin to typography

Now, plugin is more flexible in comparison with previous version. Thanks to this, a user can customize it to his/her needs. A lot of users use some typography elements only, therefore we decided to load plugin content from XML file placed in the template.

XML file has to be placed in typography/ catalog of a template. Such a file will be visible in plugin settings:

Of course XML file itself needs to have appropriate structure. File base creates the following XML code:

<?xml version="1.0" encoding="utf-8"?>
 <gktypography>
 </gktypography>

We can define element groups in gktypography element. Below, we are presenting an example:

<group name="Definition list" type="html">
    <item name="def1"><![CDATA[<dl class="gkDef1"><dt>Here goes the word you are about to define</dt><dd>Here goes definition</dd></dl>]]></item>
    <item name="def2"><![CDATA[<dl class="gkDef2"><dt>Here goes the word you are about to define</dt><dd>Here goes definition</dd></dl>]]></item>
    <item name="def3"><![CDATA[<dl class="gkDef3"><dt>Here goes the word you are about to define</dt><dd>Here goes definition</dd></dl>]]></item>
 </group>

As you can see, typography elements we are placing in a group element which has type attributes, namely:

• Name – responsible for tab name displayed in plugin on the left side,
• Type – specifying typography elements type included in a group given. At the moment, there are two values available: html and icons,
• Directory – available for icons type only.

In the case of icons group type, it can be:

<group name="Icons 1" type="icons" directory="icons">
    <item name="audio" fname="audio.gif"><![CDATA[<p class="gkAudio">Your audio message goes here!</p>]]></item>
    <item name="webcam" fname="webcam.gif"><![CDATA[<p class="gkWebcam">Your webcam message goes here!</p>]]></item>
    <item name="emai" fname="email.gif"><![CDATA[<p class="gkEmail">Your email message goes here!</p>]]></item>
 </group>

As you can see, except attribute change, we have to specify a catalog with icons in directory attribute. Element structure itself is similar – when it comes to icons there is additionally fname attribute which defines icon name. Whole typography element structure we specify in CDATA block.

An example of XML file is presented below:

<?xml version="1.0" encoding="utf-8"?>
 <gktypography>
    <group name="Definition list" type="html">
       <item name="def1"><![CDATA[<dl class="gkDef1"><dt>Here goes the word you are about to define</dt><dd>Here goes definition</dd></dl>]]></item>
       <item name="def2"><![CDATA[<dl class="gkDef2"><dt>Here goes the word you are about to define</dt><dd>Here goes definition</dd></dl>]]></item>
       <item name="def3"><![CDATA[<dl class="gkDef3"><dt>Here goes the word you are about to define</dt><dd>Here goes definition</dd></dl>]]></item>
    </group>

    <group name="Icons 1" type="icons" directory="icons">
       <item name="audio" fname="audio.gif"><![CDATA[<p class="gkAudio">Your audio message goes here!</p>]]></item>
       <item name="webcam" fname="webcam.gif"><![CDATA[<p class="gkWebcam">Your webcam message goes here!</p>]]></item>
       <item name="emai" fname="email.gif"><![CDATA[<p class="gkEmail">Your email message goes here!</p>]]></item>
    </group>
 </gktypography>

It will generate two groups in plugin, namely: Definition and Icons 1.

Thanks to this solution, every user can create XML file which will include those typography elements which he/she really uses in a template, divided into groups, called, e.g. most frequently used.

Tomasz Dziuda