NYCPHP Meetup

NYPHP.org

[nycphp-talk] Abstracting CSS: Reusable HTML UI Components

Michael B Allen ioplex at gmail.com
Sat May 3 21:57:06 EDT 2008


Hi,

I'm exploring the idea of using some PHP classes to emitting reusable
HTML UI elements like postal addresses, login forms, linked images
and in turn more sophisticated elements such as invoices, forum posts,
etc. Because these elements are supposed to be reusable I do not want
to force style information on the user and yet I need to maximize the
ease with which the user can apply their own style to each element.

For example, let's say one of these classes emits some HTML like the
following:

  <table>
  <tr><td colspan="2"><h3>Account Information</h3></td></tr>
  <tr><td>Username:</td><td>abaker</td></tr>
  <tr><td>Email Address:</td><td>abaker at example.com</td></tr>
  <tr><td>Full Name:</td><td>abaker</td></tr>
  </table>

Now let's say I want to change the style of h3 and the field labels but
within this table only. This is basically impossible through CSS alone.

One possibility would be to allow the user to supply a class name that
will be strategically set on some elements like:

  <div class="myapp">
  <table>
  <tr><td colspan="2"><h3>Account Information</h3></td></tr>
  <tr><td class="fieldlabel">Username:</td><td>abaker</td></tr>

Then the user can supply their own CSS like:

  div.myapp h3 {
      color: #000080;
      border-bottom: 2px #808080 solid;
      margin-bottom: 0px;
  }
  div.myapp td.fieldlabel {
      text-align: right;
      white-space: nowrap;
  }

This seems a little clumsy to me but it's the best I can come up with.

If you were given some HTML to be styled with CSS, how would you prefer
the elements be organized?

Secondarily, would you expect a professional library of this type to use
tableless forms? Personally I have never been able to create tableless
forms and have things line up into columns. So for now I'm going to use
tables but I would be very interested in hearing someone make a case
for tableless forms.

Mike

-- 
Michael B Allen
PHP Active Directory SPNEGO SSO
http://www.ioplex.com/



More information about the talk mailing list