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...")
 
(Styles (general):)
 
(10 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 +
{{Warn|text=This is a work in progress: information may be unclear, incomplete or missing. Also [[Testing_layout_submissions]] needs to be integrated to this.}}
  
 +
Compiled from [[http://wiki.dreamwidth.net/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
  
 +
==General testing things==
 +
[[http://wiki.dreamwidth.net/wiki/index.php/Testing_layout_submissions Review the guidelines for testing layout submissions]] as you are testing your style.
  
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
+
* Responsive design. Use breakpoints as necessary
  
-- Custom props sorted into existing propgroups using _child
+
* Supports all options from Tabula Rasa
  
-- Custom props also sorted into existing /customize cats in the style.pm file.
+
* Custom props sorted into existing propgroups using _child
  
-- Custom props follow naming standards
+
* Custom props also sorted into existing /customize cats in the style.pm file.
  
-- Check everything, everywhere. In particular don't forget:
+
* Custom props follow naming standards
*non-default column modes
+
*modules in every available position
+
*community accounts
+
*unusually short or long elements
+
**subjects
+
***Maxed-out subject length, very short subject, no subject
+
**tags
+
***Very long tags, lots of short tags, no tags
+
**titles
+
**entries
+
***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
+
*contextual pop-ups
+
*navigation strip
+
*page text
+
**sometimes only visible when there are no entries on the reading page
+
  
 +
* 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
 +
** deeply nested comments (min-width on comments is enough)
 +
** comments disabled
 +
** bottomcomment area
 +
** reply page when replying to an entry and reply page when replying to a comment,
 +
** 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).
 +
** background/foreground color pairs. If you're setting a new background color, you'll want to set a corresponding font color to prevent invisible text in other themes
  
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
+
* reading page custom colors (you have to turn on the option!)
  
 +
* 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
 +
 
 +
= Themes: Things to check =
 +
 
 +
As themes mainly aim at setting colors, you mostly want to check that everything is visible (no white on white for example). Keep in mind that most designers test things on their own journals and therefore don't have things set up to check for every possible color issue. You'll want to focus on things which aren't standard in a journal or are easily overlooked.
 +
 
 +
Tip: set up an account with dummy entries, dummy comments, etc. which cover as many different situations as possible. Once you've done that, checking a theme won't take you more than a few minutes. (TODO: mention https://gist.github.com/anall/6083205 and http://wiki.dreamwidth.net/wiki/index.php/Script:_create-users)
 +
 
 +
* Credit is correct in /customize
 +
 
 +
* Credit is correct in the journal credit module
 +
 
 +
* Colors look all right on all pages: recent entries, reading page, year page, month page, day page, tags page, icons page, entry page w/ comments, (full and collapsed), entry page w/ quick reply, full reply page
 +
 
 +
* Colors look all right in modules
 +
 
 +
* Colors look all right in the navigation strip
 +
 
 +
* Colors look all right in contextual pop-ups
 +
 
 +
* Text and links to check in particular:
 +
 
 +
**poster name area on Reading page
 +
**'There are no earlier entries to display' text on Reading page
 +
**'Top of Page' link
 +
**'no subject' text in entries and comments
 +
**bottomcomment area (text and links at the bottom of entry pages)
 +
**frozen and screened comments (this adds text before the subject link)
 +
**pagination links on entry pages
 +
**hover and visited on entry subjects, comment subjects, module links, calendars
 +
 
 +
 
 +
* You can also spot issues by looking at the theme code: if a text or a link color code is identical to its corresponding background one then it's very likely to be an issue and there should be some text you can't see on your test journal.
 +
 
 +
 
 +
* Issues: what then?
 +
 
 +
If something looks completely unreadable to you, it can come from the theme or the style. If you know it comes from the theme kindly mention it to the designer on dreamscapes and ask them to tell you what the color shoudl be instead. If it comes from the style or you don't know what causes the issue mention it on the bug so someone can troubleshoot.
 +
 
 +
=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.
 +
 
 +
[[Category: Styles]]
 +
[[Category: Development]]

Latest revision as of 13:43, 2 July 2015

Warning: This is a work in progress: information may be unclear, incomplete or missing. Also Testing_layout_submissions needs to be integrated to this.

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

General testing things

[Review the guidelines for testing layout submissions] as you are testing your style.

Styles (general):

  • Always set layout_authors
  • Tabula Rasa child whenever possible
  • Supports all column modes whenever possible and at least one one-column
  • Responsive design. Use breakpoints as necessary
  • 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
    • deeply nested comments (min-width on comments is enough)
    • comments disabled
    • bottomcomment area
    • reply page when replying to an entry and reply page when replying to a comment,
    • 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).
    • background/foreground color pairs. If you're setting a new background color, you'll want to set a corresponding font color to prevent invisible text in other themes

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
  • reading page custom colors (you have to turn on the option!)
  • 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

Themes: Things to check

As themes mainly aim at setting colors, you mostly want to check that everything is visible (no white on white for example). Keep in mind that most designers test things on their own journals and therefore don't have things set up to check for every possible color issue. You'll want to focus on things which aren't standard in a journal or are easily overlooked.

Tip: set up an account with dummy entries, dummy comments, etc. which cover as many different situations as possible. Once you've done that, checking a theme won't take you more than a few minutes. (TODO: mention https://gist.github.com/anall/6083205 and http://wiki.dreamwidth.net/wiki/index.php/Script:_create-users)

  • Credit is correct in /customize
  • Credit is correct in the journal credit module
  • Colors look all right on all pages: recent entries, reading page, year page, month page, day page, tags page, icons page, entry page w/ comments, (full and collapsed), entry page w/ quick reply, full reply page
  • Colors look all right in modules
  • Colors look all right in the navigation strip
  • Colors look all right in contextual pop-ups
  • Text and links to check in particular:
    • poster name area on Reading page
    • 'There are no earlier entries to display' text on Reading page
    • 'Top of Page' link
    • 'no subject' text in entries and comments
    • bottomcomment area (text and links at the bottom of entry pages)
    • frozen and screened comments (this adds text before the subject link)
    • pagination links on entry pages
    • hover and visited on entry subjects, comment subjects, module links, calendars


  • You can also spot issues by looking at the theme code: if a text or a link color code is identical to its corresponding background one then it's very likely to be an issue and there should be some text you can't see on your test journal.


  • Issues: what then?

If something looks completely unreadable to you, it can come from the theme or the style. If you know it comes from the theme kindly mention it to the designer on dreamscapes and ask them to tell you what the color shoudl be instead. If it comes from the style or you don't know what causes the issue mention it on the bug so someone can troubleshoot.

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.