Styles and Themes Checklist

From Dreamwidth Notes
Revision as of 13:43, 2 July 2015 by Afuna (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search
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.

Retrieved from "http://wiki.dreamwidth.net/wiki/index.php?title=Styles_and_Themes_Checklist&oldid=12275"