Difference between revisions of "Styles and Themes Checklist"

From Dreamwidth Notes
Jump to: navigation, search
(Created page with " = Patch Check List = General Coding Standards on Dreamwidth: -- Usage rights (resource credits, credits in HTML or CSS comments, dw-free or nonfree) -- No tabs -- No trai...")
 
(Patch Check List)
Line 1: Line 1:
  
 +
Compiled from [[http://wiki.dwscoalition.org/wiki/index.php/Talk:Newbie_Guide:_How_to_Patch_Styles_and_Themes here]] and [[http://dreamscapes.dreamwidth.org/42341.html here]]
 
= Patch Check List =
 
= Patch Check List =
  
General Coding Standards on Dreamwidth:
+
==Dreamwidth Coding Standards (general)==
  
-- Usage rights (resource credits, credits in HTML or CSS comments, dw-free or nonfree)
+
* Usage rights (resource credits, credits in HTML or CSS comments, dw-free or nonfree)
  
-- No tabs
+
* No tabs
  
-- No trailing spaces
+
* No trailing spaces
  
  
Styles (general):
+
==Styles (general):==
  
-- Always set layout_authors
+
* Always set layout_authors
  
-- Tabula Rasa child whenever possible
+
* Tabula Rasa child whenever possible
  
-- Supports all column modes whenever possible and at least one one-column
+
* Supports all column modes whenever possible and at least one one-column
  
-- Supports all options from Tabula Rasa
+
* Supports all options from Tabula Rasa
  
-- Custom props sorted into existing propgroups using _child
+
* Custom props sorted into existing propgroups using _child
  
-- Custom props also sorted into existing /customize cats in the style.pm file.
+
* Custom props also sorted into existing /customize cats in the style.pm file.
  
-- Custom props follow naming standards
+
* Custom props follow naming standards
  
-- Check everything, everywhere. In particular don't forget:  
+
* Check everything, everywhere. In particular:  
*non-default column modes
+
** non-default column modes
*modules in every available position
+
** modules in every available position
*community accounts
+
** community accounts
*unusually short or long elements
+
** unusually short or long elements (subjects, tags, titles, entries, comments, usernames...)
**subjects
+
** userpic stuff (no userpic, non-square userpics, smaller userpics)
***Maxed-out subject length, very short subject, no subject
+
** collapsed comments
**tags
+
** comments disabled
***Very long tags, lots of short tags, no tags
+
** bottomcomment area
**titles
+
** reply page,
**entries
+
** quick reply
***Especially one-line entries
+
**comments
+
**usernames
+
***"mytwentyfivecharactername" is 25 characters
+
*userpic stuff  
+
**no userpic
+
**non-square userpics
+
**smaller userpics
+
**transparent element userpics
+
*collapsed comments
+
*bottomcomment area
+
*reply page
+
*quick reply
+
*icon page
+
*pagination links
+
**reading
+
**archive
+
**comments
+
 
**icon page
 
**icon page
*contextual pop-ups
+
** pagination links (reading, archive, comments and icon page)
*navigation strip
+
** contextual pop-ups
*page text  
+
** navigation strip
**sometimes only visible when there are no entries on the reading page
+
** page text (sometimes only visible when there are no entries on the reading page).
  
  
Themes (general):
+
== Themes (general) ==
  
-- Alphabetized themes
+
* Alphabetized themes
  
-- Two blank lines between each theme
+
* Two blank lines between each theme
  
-- theme_authors if theme author is NOT style author. Otherwise no.
+
* theme_authors if theme author is NOT style author. Otherwise no.
  
-- Props separated by headers (Presentation, Page Colors, Entry Colors, Module Colors, Fonts and Images, in this order. )
+
* Props separated by headers (Presentation, Page Colors, Entry Colors, Module Colors, Fonts and Images, in this order. )
  
-- Alphabetized props within each cat.
+
* Alphabetized props within each cat.
  
-- No empty props
+
* No empty props
  
  
CSS (general):
+
==CSS (general)==
  
-- If TR child goes into function print_stylesheet () for styles. Otherwise goes into function Page::print_default_stylesheet.
+
* If TR child goes into function print_stylesheet () for styles. Otherwise goes into function Page::print_default_stylesheet.
  
-- Theme-specific CSS goes into function Page::print_theme_stylesheet()
+
* Theme-specific CSS goes into function Page::print_theme_stylesheet()
  
-- No broad resets
+
* No broad resets
  
-- Comment headers
+
* Comment headers
  
-- Indents
+
* Indents
  
-- Shorthand
+
* Shorthand
  
  
Colors:
+
==Colors==
  
-- color_page_text in every theme
+
* color_page_text in every theme
  
-- No half foreground/background combos (e.g. text color without background color)
+
* No half foreground/background combos (e.g. text color without background color)
  
-- Matching foreground/background combos (such as entry text color on entry background color)
+
* Matching foreground/background combos (such as entry text color on entry background color)
  
-- Order in props for link colors: alphabetical so _link, _link_active, _link_hover, _link_visited
+
* Order in props for link colors: alphabetical so _link, _link_active, _link_hover, _link_visited
  
-- BUT order in CSS for link colors: hierarchical so a, a:visited, a:hover, a:active
+
* BUT order in CSS for link colors: hierarchical so a, a:visited, a:hover, a:active
  
-- Shorthand for color hex codes
+
* Shorthand for color hex codes
  
  
Fonts:
+
==Fonts==
  
-- Single quotes around font names with multiple words; no quotes otherwise.
+
* Single quotes around font names with multiple words; no quotes otherwise.
  
-- No font_units settings if no font_size too.
+
* No font_units settings if no font_size too.
  
-- No hardcoded font names
+
* No hardcoded font names
  
-- No hardcoded font sizes (some exceptions allowed)
+
* No hardcoded font sizes (some exceptions allowed) [what are they?]
  
  
Images:
+
==Images==
  
-- No color profiles
+
* No color profiles
  
-- Color-indexed PNGs whenever possible. JPGs with a lower res are sometimes a good alternative.
+
* Color-indexed PNGs whenever possible. JPGs with a lower res are sometimes a good alternative.
  
-- Common images in /commons
+
* Common images in /commons
  
-- Follows file naming standards
+
* Follows file naming standards
 +
 
 +
=All Styles Should...=
 +
 
 +
Dreamwidth makes great effort toward providing the same options in all of its styles but it can be hard for designers and developers to keep track of updates and integrate all options into the designs. I hope listing current required standards will make it easier for everybody.
 +
 
 +
All styles should:
 +
 
 +
* Have no hardcoded font faces. (bug #2629, IN PROGRESS) *
 +
 
 +
* Have no hardcoded font sizes for major elements (see existing options). (no specific bug, IMPLEMENTED)
 +
 
 +
* Have no hardcoded colors. (several bugs, IMPLEMENTED)
 +
 
 +
* Have no CSS resets which would prevent the correct display of HTML elements users might include in their posts. (bug 4045, IMPLEMENTED)
 +
 
 +
* Support the one-column display mode. (bug #1798, IN PROGRESS) *
 +
 
 +
* Support left and right sidebar placement if a multi-column mode is available. (several bugs, bug #3185, IN PROGRESS) *
 +
 
 +
* Support all Tabula Rasa presentation options. (several bugs, bug #3775, IN PROGRESS) *
 +
 
 +
* Support all Tabula Rasa color options. (bug #3190, IN PROGRESS) *
 +
 
 +
* Support all Tabula Rasa font options. (bug #2195, IMPLEMENTED)
 +
 
 +
* Support all Tabula Rasa image options. (several bugs, bug #3052, IN PROGRESS) *
 +
 
 +
* Support the placement of any module in all available positions or restrict the positions certain modules can be in. (several bugs, IMPLEMENTED)
 +
 
 +
* Make sure header modules, if there are any, wrap correctly when screen size is reduced. (several bugs, IMPLEMENTED)
 +
 
 +
* Have a 'Back to Top' link at the bottom of every page. (bug #3472, IN PROGRESS) *
 +
 
 +
* Have at least one light on dark theme for each style. (unofficial, IMPLEMENTED)
 +
 
 +
 
 +
Items marked with an * indicate that this item is not true of all styles yet but style designers should keep this in mind for future styles.

Revision as of 21:49, 26 July 2013

Compiled from [here] and [here]

Patch Check List

Dreamwidth Coding Standards (general)

  • Usage rights (resource credits, credits in HTML or CSS comments, dw-free or nonfree)
  • No tabs
  • No trailing spaces


Styles (general):

  • Always set layout_authors
  • Tabula Rasa child whenever possible
  • Supports all column modes whenever possible and at least one one-column
  • Supports all options from Tabula Rasa
  • Custom props sorted into existing propgroups using _child
  • Custom props also sorted into existing /customize cats in the style.pm file.
  • Custom props follow naming standards
  • Check everything, everywhere. In particular:
    • non-default column modes
    • modules in every available position
    • community accounts
    • unusually short or long elements (subjects, tags, titles, entries, comments, usernames...)
    • userpic stuff (no userpic, non-square userpics, smaller userpics)
    • collapsed comments
    • comments disabled
    • bottomcomment area
    • reply page,
    • quick reply
    • icon page
    • pagination links (reading, archive, comments and icon page)
    • contextual pop-ups
    • navigation strip
    • page text (sometimes only visible when there are no entries on the reading page).


Themes (general)

  • Alphabetized themes
  • Two blank lines between each theme
  • theme_authors if theme author is NOT style author. Otherwise no.
  • Props separated by headers (Presentation, Page Colors, Entry Colors, Module Colors, Fonts and Images, in this order. )
  • Alphabetized props within each cat.
  • No empty props


CSS (general)

  • If TR child goes into function print_stylesheet () for styles. Otherwise goes into function Page::print_default_stylesheet.
  • Theme-specific CSS goes into function Page::print_theme_stylesheet()
  • No broad resets
  • Comment headers
  • Indents
  • Shorthand


Colors

  • color_page_text in every theme
  • No half foreground/background combos (e.g. text color without background color)
  • Matching foreground/background combos (such as entry text color on entry background color)
  • Order in props for link colors: alphabetical so _link, _link_active, _link_hover, _link_visited
  • BUT order in CSS for link colors: hierarchical so a, a:visited, a:hover, a:active
  • Shorthand for color hex codes


Fonts

  • Single quotes around font names with multiple words; no quotes otherwise.
  • No font_units settings if no font_size too.
  • No hardcoded font names
  • No hardcoded font sizes (some exceptions allowed) [what are they?]


Images

  • No color profiles
  • Color-indexed PNGs whenever possible. JPGs with a lower res are sometimes a good alternative.
  • Common images in /commons
  • Follows file naming standards

All Styles Should...

Dreamwidth makes great effort toward providing the same options in all of its styles but it can be hard for designers and developers to keep track of updates and integrate all options into the designs. I hope listing current required standards will make it easier for everybody.

All styles should:

  • Have no hardcoded font faces. (bug #2629, IN PROGRESS) *
  • Have no hardcoded font sizes for major elements (see existing options). (no specific bug, IMPLEMENTED)
  • Have no hardcoded colors. (several bugs, IMPLEMENTED)
  • Have no CSS resets which would prevent the correct display of HTML elements users might include in their posts. (bug 4045, IMPLEMENTED)
  • Support the one-column display mode. (bug #1798, IN PROGRESS) *
  • Support left and right sidebar placement if a multi-column mode is available. (several bugs, bug #3185, IN PROGRESS) *
  • Support all Tabula Rasa presentation options. (several bugs, bug #3775, IN PROGRESS) *
  • Support all Tabula Rasa color options. (bug #3190, IN PROGRESS) *
  • Support all Tabula Rasa font options. (bug #2195, IMPLEMENTED)
  • Support all Tabula Rasa image options. (several bugs, bug #3052, IN PROGRESS) *
  • Support the placement of any module in all available positions or restrict the positions certain modules can be in. (several bugs, IMPLEMENTED)
  • Make sure header modules, if there are any, wrap correctly when screen size is reduced. (several bugs, IMPLEMENTED)
  • Have a 'Back to Top' link at the bottom of every page. (bug #3472, IN PROGRESS) *
  • Have at least one light on dark theme for each style. (unofficial, IMPLEMENTED)


Items marked with an * indicate that this item is not true of all styles yet but style designers should keep this in mind for future styles.