The schedule is based on our custom HTML structure – it is a little bit more complex than other typography elements but it was necessary to create a proper HTML structure. We will describe the code based on the below example:
<dl class="gk-schedule"> <dt><strong>Friday, </strong>11 september, 2015</dt> <dd> <strong>10:00-12:00</strong> <div class="gkcol1"> <div><span>Sunday Sun</span></div> </div> </dd> <dd> <strong>12:00-14:00</strong> <div class="gkcol2"> <div>Locatie:<strong> The Underground</strong><a href="#">The Born This Way Ball</a> <small>Rondé</small></div> <div>Location:<strong> San Jose, Scene 2</strong><a href="#">Battle Born Tour</a> <small>The Killers</small></div> </div> </dd> </dl>
As we can see the structure is based on the definition list (dl) with class gk-schedule. The definition term elements are used to create the date (you can highlight words in this element using the strong elements). The content of the specific hours for a day are defined in the definition description elements (dd). As it was listed – every dd element starts with the strong element – it is the period of time for a specific elements then the next element is the div with class gkcolX where is is a number from range 1-5 – here you can specify up to 5 columns with the events.
Every event can contain few informations:
- place (as a strong element)
- event name (as a link – usually to the longer description)
- and small additional information (in the small element)