Dream Garden layout

Designing the HTML CSS ids/classes for a very customizable CSS layout.

Pseudo-HTML

List of ID classes

• header -- top of the page
  • titles -- contains page titles
  • journal-nav -- contains menu navigation for the journal
• body -- contains the content and sidebar(s)
  • content -- contains content, whether entries or other
    • content-header -- pagination before entries
    • content-main -- contains all the entries
    • content-footer -- pagination after entries
  • modules -- contains modules, usually to the side
• footer -- what goes here anyway?

Header

<div id="header">
  <div id="titles">
    <div id="maintitle"><h1>TITLE</h1></div><!-- journal main title -->
    <div id="subtitle"><h2>SUBTITLE</h2></div><!-- journal subtitle -->
    <div id="pagetitle"><h2>PAGETITLE</h2></div><!-- title of the page we are viewing -->
<!-- Why are the titles in divs? Why not just assign the ids to the h* elements? -->
  </div><!-- END CLASS title -->
  <div id="journal-nav">
    <ul>
      <!-- Should these be IDs or classes?  Can we expect more than one? -->
      <li id="profile-nav">PROFILE</li>
      <li id="recent-nav" class="active">RECENT</li>
      <li id="read-nav">READING</li>
      <li id="archive-nav">ARCHIVE</li>
      <li id="tag-nav">TAG PAGE? OR SHOULD THIS BE IN SIDEBAR WITH TAGS?</li>
      <li id="website-nav">WEBSITE</li>
      <li id="bookmark-nav">BOOKMARKS</li>
      <li id="gallery-nav">GALLERY</li>
      <li id="guestbook-nav">GUESTBOOK</li>
    </ul>
  </div><!-- END CLASS journal-nav -->
</div><!-- END CLASS header -->

Re the divs around the headers, I find it easier to style a div than a header tag, and since headers are block elements too it doesn't have an impact on the flow of position; but perhaps an -inner or -header ID could be added to the headers themselves for those who design opposite. The IDs on the list items also seem like they should, perhaps, have both? Some of those links look like things that should/would appear in the sidebar as well, so having a class common to both would let someone style similar destinations all alike. But other people will want to style the header links in a particular way, so keeping IDs attached to those seems wise. branchandroot 20:14, 16 February 2009 (UTC)

Content and Modules

<div id="body">
  <div id="content">
    <!-- CONTAINS CONTENT, WHETHER ENTRIES OR OTHER -->
  </div><!-- END CLASS content -->
  <div id="modules">
     <!-- SEE MODULES PSEUDOCODE -->
  </div><!-- END CLASS modules -->

Entries

Can be used for the recent post page, the reading page, and day views.

Possible entry classes:

• latest-entry
• guestbook-entry

<div id="content-header" class="pagination">
  <ul>
    <li class="page-back">BACK</li>
    <li class="to-bottom">BOTTOM</li>
    <li class="page-forward">FORWARD</li>
  </ul>
</div><!-- END CLASS top-pagination -->
<div id="content-main" class="entries">
  <div class="entry">
    <div class="entry-label">
      <div class="entry-filter"><!-- Security icons/text goes here --></div>
      <div class="entry-date"></div>
      <div class="entry-subject"></div>
      <div class="entry-groups"></div>
    </div><!-- END CLASS entry-label -->
    <div class="entry-poster">
      <div class="entry-poster-info">
        <div class="entry-poster-icon"></div>
        <div class="entry-poster-name"></div>
      </div><!-- END CLASS entry-poster-info -->
      <div class="entry-comm-info">
        <div class="entry-comm-icon"></div>
        <div class="entry-comm-name"></div>
      </div><!-- END CLASS entry-comm-info -->
    </div><!-- END CLASS entry-poster -->
    <div class="entry-content">
      ENTRY CONTENT GOES HERE
    </div><!-- END CLASS entry-content -->
    <div class="entry-meta">
      <!-- preferably mood, music, custom groups are broken in list items -->
    </div><!-- END CLASS entry-meta -->
    <div class="entry-tags">
    </div><!-- END CLASS entry-tags -->
    <div class="entry-actions">
      <!-- NOTE: Which of these actions will be relevant? -->
      <ul>
        <li class="numcomments-entry"></li>
        <li class="comment-entry"></li>
        <li class="link-entry"></li>
        <li class="edit-entry"></li>
        <li class="tag-entry"></li>
        <li class="bookmark-entry"></li>
        <li class="track-entry"></li>
        <li class="tell-entry"></li>
        <li class="flag-entry"></li>
      </ul>
    </div><!-- END CLASS entry-actions -->
  </div><!-- END CLASS entry -->
<div class="entry-separator"></div><!-- for usefulness -->
</div><!-- END CLASS entries -->
<div id="content-footer" class="pagination">
  <ul>
    <li class="page-back">BACK</li>
    <li class="to-top">TOP</li>
    <li class="page-forward">FORWARD</li>
  </ul>
</div><!-- END CLASS bottom-pagination -->

Entry/Comments

<div class="single-entry">
  <div class="entry">
    <!-- see above -->
  </div>
</div><!-- END CLASS single-entry -->
<div class="entry-comments">
  <div class="comment comment-toplevel">
    <div class="comment-info">
      <div class="comment-subject"></div>
      <div class="comment-date"></div>
      <div class="comment-poster">
        <div class="comment-poster-icon"></div>
        <div class="comment-poster-name"></div>
        <div class="comment-poster-ip"></div>
      </div><!-- END CLASS comment-poster -->
      <div class="comment-status">
        <!-- Contains all the screen, delete, etc. -->
      </div><!-- END CLASS comment-status -->
    </div>
    <div class="comment-content">
    </div><!-- END CLASS comment-content -->
    <div class="comment-threads">
      <!-- Contains reply, thread, expand -->
    </div><!-- END CLASS comment-threads -->
    <div class="comment comment-evenlevel">
      ...
      <div class="comment comment-oddlevel">
        ...
      </div>
    </div>
  </div>
  <div class="comment-select-links"></div>
</div>

Modules

Possible module-box additional classes:

• calendar
• free-text
• link-list
• tag-box
• first-sidebox (since some browsers do not do selectors well)
• last-sidebox
• middle-sidebox

<div id="modules">
  <div class="modbox">
    <h3 class="modbox-title"></h3>
    <div class="modbox-contents"></div>
  </div><!-- END CLASS modbox -->
</div><!-- END CLASS modules -->

Footer

What to put here?

• Design credits?
• Fun quote or saying?
• When the page was loaded for the viewer (like in Smooth Sailing)?
• Name of style/variant (would this help support people?)
• Graphic? (If it's floatable maybe some sort of foreground image e.g. a skyline or landscape)

<div id="footer">
WHAT GOES HERE ANYWAY?
</div><!-- END CLASS footer -->