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. ...)
 
m
 
(31 intermediate revisions by 9 users not shown)
Line 1: Line 1:
−
Designing the CSS features for a very customizable CSS layout.
+
Designing the HTML CSS ids/classes 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
 +
* 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 ===
 +
 
 +
<source lang="html4strict">
 +
<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 -->
 +
</source>
 +
 
 +
: 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. [[User:Branchandroot|branchandroot]] 20:14, 16 February 2009 (UTC)
 +
 
 +
:: I don't quite understand what you mean about it being easier to style a div than a header. They're both block-level elements, and having one block level element inside another block level element, to me, just increases the chance of messing up the border/padding/margin logic. I also question making the element class'd as journal-nav a div, rather than the UL which is all the div contains. (Unless the journal-nav class might be reapplied on the sidebar, with something other than a UL?) --[[User:Zvi-likes-tv|Zvi-likes-tv]] 05:55, 17 February 2009 (UTC)
 +
 
 +
::: It's a designer-specific preference in approach. Personally, I really prefer to have a div around things like headers and uls, especially if I'm playing with backgrounds for them.  Other people prefer to work the other way around.  Since an unused div makes no difference, I don't see any drawback to supplying the wherewithal for both kinds of designers to work to their preferences. [[User:Branchandroot|branchandroot]] 03:46, 18 February 2009 (UTC)
 +
 
 +
=== Content and Modules ===
 +
 
 +
<source lang="html4strict">
 +
<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 -->
 +
</source>
 +
 
 +
=== Entries ===
 +
 
 +
Can be used for the recent post page, the reading page, and day views.
 +
 
 +
Possible entry classes:
 +
 
 +
* latest-entry
 +
* guestbook-entry
 +
 
 +
<source lang="html4strict">
 +
<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 -->
 +
</source>
 +
 
 +
=== Entry/Comments ===
 +
 
 +
<source lang="html4strict">
 +
<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>
 +
</source>
 +
 
 +
=== Archive ===
 +
 
 +
=== Tags ===
 +
 
 +
=== 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
 +
 
 +
<source lang="html4strict">
 +
<div id="modules">
 +
  <div class="modbox">
 +
    <h3 class="modbox-title"></h3>
 +
    <div class="modbox-contents"></div>
 +
  </div><!-- END CLASS modbox -->
 +
</div><!-- END CLASS modules -->
 +
</source>
 +
 
 +
=== 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)
 +
 
 +
<source lang="html4strict">
 +
<div id="footer">
 +
WHAT GOES HERE ANYWAY?
 +
</div><!-- END CLASS footer -->
 +
</source>
 +
 
 +
[[Category: Obsolete]]

Latest revision as of 03:34, 4 May 2009

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)
I don't quite understand what you mean about it being easier to style a div than a header. They're both block-level elements, and having one block level element inside another block level element, to me, just increases the chance of messing up the border/padding/margin logic. I also question making the element class'd as journal-nav a div, rather than the UL which is all the div contains. (Unless the journal-nav class might be reapplied on the sidebar, with something other than a UL?) --Zvi-likes-tv 05:55, 17 February 2009 (UTC)
It's a designer-specific preference in approach. Personally, I really prefer to have a div around things like headers and uls, especially if I'm playing with backgrounds for them. Other people prefer to work the other way around. Since an unused div makes no difference, I don't see any drawback to supplying the wherewithal for both kinds of designers to work to their preferences. branchandroot 03:46, 18 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>

Archive

Tags

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 -->
Retrieved from "http://wiki.dreamwidth.net/wiki/index.php?title=Dream_Garden_layout&oldid=4796"