Forum OpenACS Q&A: Re: Copenhagen - UI discussion

Posted by xx xx on
Very good!
Does this mean you make use of <div> and <span> instead of tables?
Is there a 'Naming Convention' that you use or that should be used?
Posted by Bruno Mattarollo on

I use tables but not for layout. The layout is controlled by CSS. In the case of the calendar, in particular, I think we still need to use tables (since that's how the information is structured, in a tabular way) but the layout (all the fonts, colors, positioning etc) is controlled from the CSS.

My naming convention is quite lax at the moment, I have one main div called calendartable and then a class called calendar that is applied to each td. I use another class calendarheader for the caption of the table containing the calendar. For the day view rows I have dayvieweven and dayviewodd just to continue with the current code.

I just started working on this because that's something I have been wanting to do for a long time ... I want to make it easier to change the layout of the widgets and stuff 😊.

Posted by Jeff Davis on
Bruno, rather than dayviewodd and dayvieweven you might want to use simply odd and even so that the banding will be done by the default sitewide css and if you want to overide it you can still do
.calendar .odd { }

Here is what I ended up with for the calendar table:

<table class="calendar">
  <tr class="title"><th class="month" colspan="7">July 2003</th></tr>
  <tr class="days">
    <th class="day">S</th>
    <th class="day">M</th>
    <th class="day">T</th>

    <th class="day">W</th>
    <th class="day">T</th>
    <th class="day">F</th>
    <th class="day">S</th>
    <td class="empty">&nbsp;</td>
    <td class="empty">&nbsp;</td>
    <td class="day">1</td>
    <td class="day">2</td>
    <td class="day">3</td>
    <td class="today">4</td>
    <td class="day">5</td>