Difference between revisions of "Dream Garden layout"

From Dreamwidth Notes
Jump to: navigation, search
(New page: Designing the CSS features for a very customizable CSS layout. * Navigation list class for menu items (Recent, "Friends", Website, Tags, Archive, etc). Items should be class/id labeled. ...)
 
Line 1: Line 1:
 
Designing the CSS features for a very customizable CSS layout.
 
Designing the CSS features for a very customizable CSS layout.
  
−
* Navigation list class for menu items (Recent, "Friends", Website, Tags, Archive, etc).  Items should be class/id labeled.  Should be a class/id for active page.  Also should be a navigation list class for entry action menu list, with labeled items.
+
== Pseudo-HTML ==
−
* Entries: class for entry title, entry date, entry tags, entry body, entry container, entry icon, entry icon user label, entry actions
+
 
−
* Sidebar, sidebar boxes, sidebar link list
+
=== List of ID classes ===
−
* Need a class for the calendar
+
 
−
* Guestbook entry class
+
* header -- top of the page
 +
** titles -- contains page titles
 +
** journal-nav -- contains menu navigation for the journal
 +
* main -- contains the content and sidebar(s)
 +
** content -- contains content, whether entries or other
 +
*** top-pagination -- pagination before entries
 +
*** entries -- contains all the entries
 +
*** bottom-pagination -- pagination after entries
 +
** sidebar -- sidebar...thingies
 +
* footer -- what goes here anyway?
 +
 
 +
=== Header ===
 +
 
 +
<pre>
 +
<div id="header">
 +
  <div id="titles">
 +
    <h1 id="maintitle"></h1><!-- journal main title -->
 +
    <h2 id="subtitle"></h2><!-- journal subtitle -->
 +
    <h2 id="pagetitle"></h2><!-- title of the page we are viewing -->
 +
  </div><!-- END CLASS title -->
 +
  <div id="journal-nav">
 +
    <ul>
 +
      <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>
 +
    </ul>
 +
  </div><!-- END CLASS journal-nav -->
 +
</div><!-- END CLASS header -->
 +
</pre>
 +
 
 +
=== Content and Sidebar ===
 +
 
 +
<pre>
 +
<div id="main">
 +
  <div id="content">
 +
    CONTAINS CONTENT, WHETHER ENTRIES OR OTHER
 +
  </div><!-- END CLASS content -->
 +
  <div id="sidebar">
 +
    SEE SIDEBAR PSUEDOCODE
 +
  </div><!-- END CLASS sidebar -->
 +
</pre>
 +
 
 +
=== Entries ===
 +
 
 +
Possible entry classes:
 +
 
 +
* latest-entry
 +
* guestbook-entry
 +
 
 +
<pre>
 +
<div id="top-pagination" 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="entries">
 +
  <div class="entry">
 +
    <div class="entry-label">
 +
      <div class="entry-title"></div>
 +
      <div class="entry-date"></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">
 +
    </div><!-- END CLASS entry-meta -->
 +
    <div class="entry-tags">
 +
    </div><!-- END CLASS entry-tags -->
 +
    <div class="entry-actions">
 +
      <ul>
 +
        <li class="edit-entry"></li>
 +
      </ul>
 +
    </div><!-- END CLASS entry-actions -->
 +
  </div><!-- END CLASS entry -->
 +
</div><!-- END CLASS entries -->
 +
<div id="bottom-pagination" 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 -->
 +
</pre>
 +
 
 +
=== Sidebar ===
 +
 
 +
Possible sidebar-box additional classes:
 +
 
 +
* calendar
 +
* free-text
 +
* link-list
 +
* tag-box
 +
* first-sidebox (since some browsers do not do selectors well)
 +
* last-sidebox
 +
* middle-sidebox
 +
 
 +
<pre>
 +
<div id="sidebar">
 +
  <div class="sidebar-box">
 +
    <h3 class="sidebar-box-title">
 +
    <div class="sidebar-box-contents"></div>
 +
  </div><!-- END CLASS sidebar-box -->
 +
</div><!-- END CLASS sidebar -->
 +
</pre>
 +
 
 +
=== Footer ===
 +
 
 +
<pre>
 +
<div id="footer">
 +
WHAT GOES HERE ANYWAY?
 +
</div>
 +
</pre>

Revision as of 21:21, 19 June 2008

Designing the CSS features 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
  • main -- contains the content and sidebar(s)
    • content -- contains content, whether entries or other
      • top-pagination -- pagination before entries
      • entries -- contains all the entries
      • bottom-pagination -- pagination after entries
    • sidebar -- sidebar...thingies
  • footer -- what goes here anyway?

Header

<div id="header">
  <div id="titles">
    <h1 id="maintitle"></h1><!-- journal main title -->
    <h2 id="subtitle"></h2><!-- journal subtitle -->
    <h2 id="pagetitle"></h2><!-- title of the page we are viewing -->
  </div><!-- END CLASS title -->
  <div id="journal-nav">
    <ul>
      <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>
    </ul>
  </div><!-- END CLASS journal-nav -->
</div><!-- END CLASS header -->

Content and Sidebar

<div id="main">
  <div id="content">
    CONTAINS CONTENT, WHETHER ENTRIES OR OTHER
  </div><!-- END CLASS content -->
  <div id="sidebar">
     SEE SIDEBAR PSUEDOCODE
  </div><!-- END CLASS sidebar -->

Entries

Possible entry classes:

  • latest-entry
  • guestbook-entry 
<div id="top-pagination" 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="entries">
  <div class="entry">
    <div class="entry-label">
      <div class="entry-title"></div>
      <div class="entry-date"></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">
    </div><!-- END CLASS entry-meta -->
    <div class="entry-tags">
    </div><!-- END CLASS entry-tags -->
    <div class="entry-actions">
      <ul>
        <li class="edit-entry"></li>
      </ul>
    </div><!-- END CLASS entry-actions -->
  </div><!-- END CLASS entry -->
</div><!-- END CLASS entries -->
<div id="bottom-pagination" 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 -->

Sidebar

Possible sidebar-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="sidebar">
  <div class="sidebar-box">
    <h3 class="sidebar-box-title">
    <div class="sidebar-box-contents"></div>
  </div><!-- END CLASS sidebar-box -->
</div><!-- END CLASS sidebar -->

Footer

<div id="footer">
WHAT GOES HERE ANYWAY?
</div>
Retrieved from "http://wiki.dreamwidth.net/wiki/index.php?title=Dream_Garden_layout&oldid=16"