[theme-reviewers] Proposed changes to CSS Documentation in Wordpress Codex

[Emil Uzelac]

William,

Thanks but the tests are not complete without
http://codex.wordpress.org/Theme_Unit_Test and there must be WordPress
install, not just basic HTML. Please take a look to several screenshots I
made for you http://imgur.com/a/iS16K and scroll down to see the image
overflows.

Thanks,
Emil

On Thu, Jul 19, 2012 at 2:13 PM, Laird Sapir <laird at memphismckay.com> wrote:

> Nicely done, William!!!
>
>
> Shinra Web Holdings wrote:
>
> I approve of this message.
>
> On Thu, Jul 19, 2012 at 8:39 AM, William Ludwig <weludwig at gmail.com>wrote:
>
>> Yesterday in another thread i mentioned that the sample CSS at
>> http://codex.wordpress.org/CSS#WordPress_Generated_Classes was
>> ineffecient and redundant.  Emil challenged me to produce something better
>> so I wanted to run it past this group before I submitted it.  After all you
>> guys are the ones that would be seeing it on submitted themes.
>>
>> My goal in writing this CSS was to make it accessable to newer
>> developers, remove repetitive rules, and reduce selector complexity.
>>  Visually the new CSS appears the same as the old CSS (one
>> exception-explained below), but it's half the size and should be easier to
>> manage.
>>
>> Thanks for reading this, sorry it's so long.
>>
>>
>> My tests are here, CSS is in the header to make it easier to view.  HTML
>> is identical.
>>
>> Original ...
>> http://wp-themedev.ludwigdevelopment.com/wp-content/uploads/2012/07/new.html
>> New ...
>> http://wp-themedev.ludwigdevelopment.com/wp-content/uploads/2012/07/original.html
>>
>>
>> Here is a breakdown what I changed and why.
>>
>> .alignnone - added display: inline-block so that when .alignnone is
>> applied to either a div or an image it will display the same.  This is kind
>> of a judgement call on my part but I feel that image layout should be
>> consistant whether or not there is a caption.
>>
>> div.aligncenter - removed as unnecessary because the first selector will
>> already catch any divs with .aligncenter.
>>
>> a.img.alignright, a img.alignnone, a img.alignleft, a img.aligncenter -
>> removed, duplicates of the base alignment class with more complicated
>> selector.
>>
>> .wp-caption.alignnone, .wp-caption.alignleft, .wp-caption.alignright -
>> removed, duplicates of the base alignment class with more complicated
>> selector.
>>
>> .wp-caption p.wp-caption-text - Changed selector to just
>> .wp-caption-text.  No need to complicate it.  It really shouldn't show up
>> outside of a .wp-caption and if it does someone had to of put it there on
>> purpose and they can deal with it.
>>
>>
>> Final CSS
>>
>> /* =WordPress Core
>> -------------------------------------------------------------- */
>> .alignnone {
>>     display: inline-block;
>>     margin: 5px 20px 20px 0;
>> }
>>
>> .alignright {
>>     float:right;
>>     margin: 5px 0 20px 20px;
>> }
>>
>> .alignleft {
>>     float: left;
>>     margin: 5px 20px 20px 0;
>> }
>>
>> .aligncenter {
>>     display: block;
>>     margin: 5px auto;
>> }
>>
>> .wp-caption {
>>     background: #fff;
>>     border: 1px solid #f0f0f0;
>>     max-width: 96%; /* Image does not overflow the content area */
>>     padding: 5px 3px 10px;
>>     text-align: center;
>> }
>>
>> .wp-caption img {
>>     border: 0 none;
>>     height: auto;
>>     margin: 0;
>>     max-width: 98.5%;
>>     padding: 0;
>>     width: auto;
>> }
>>
>> .wp-caption-text {
>>     font-size: 11px;
>>     line-height: 17px;
>>     margin: 0;
>>     padding: 0 4px 5px;
>> }
>>
>>
>> _______________________________________________
>> theme-reviewers mailing list
>> theme-reviewers at lists.wordpress.org
>> http://lists.wordpress.org/mailman/listinfo/theme-reviewers
>>
>>
> _______________________________________________
> theme-reviewers mailing listtheme-reviewers at lists.wordpress.orghttp://lists.wordpress.org/mailman/listinfo/theme-reviewers
>
>
> _______________________________________________
> theme-reviewers mailing list
> theme-reviewers at lists.wordpress.org
> http://lists.wordpress.org/mailman/listinfo/theme-reviewers
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.wordpress.org/pipermail/theme-reviewers/attachments/20120719/d684ab4d/attachment.htm>