[theme-reviewers] Proposed changes to CSS Documentation in Wordpress Codex
Chip Bennett
chip at chipbennett.net
Thu Jul 19 22:37:39 UTC 2012
I think the ultimate thing to remember is that the Theme Unit Tests are
*front end* tests. If the Theme's code properly renders the Theme Unit
Tests, the Theme passes, regardless of whether that code could be more
efficient or not. The example code is the Codex is there because it is
known to render output that passes the Theme Unit Tests. It isn't
guaranteed to be the best or most efficient such code; but rather merely
*working* code.
Improvements to any example code are always welcomed. But we also want to
ensure that we don't cross the line into bikeshedding.
Chip
On Thu, Jul 19, 2012 at 5:24 PM, Emil Uzelac <emil at themeid.com> wrote:
> Hey Bill,
>
> It's all good. I am not saying that it might not be the same, but it still
> needs to be tested on WordPress :) And since you just removed stuff...
>
> Anyways I did test this on WordPress and screenshots are here:
> http://imgur.com/a/Drymw first image is FF and below that you'll see IE8
> and IE9. See everything is there for a reason, no need to remove or
> anything at this point, unless we have a real improvement and because they
> all work just fine. I've used my Theme for this test, remove all WP
> generated classes and added just what you've proposed.
>
> BTW Twenty Twelve has some major improvements :)
>
> Thanks,
> Emil
>
> On Thu, Jul 19, 2012 at 4:47 PM, William Ludwig <weludwig at gmail.com>wrote:
>
>> Emil,
>>
>> "however the styles are WordPress generated, therefore it should be
>> within WordPress :)"
>>
>> I'm not trying to be difficult here but I really don't see the
>> distinction. The HTML I tested with was from the theme unit test, whether
>> or not Wordpress is actually involved in the generation of that HTML every
>> single time is irrelevant to the test and makes no difference to how the
>> CSS works.
>>
>> For example here is a JSFiddle with the same HTML/CSS and it works the
>> same http://jsfiddle.net/BillLudwig/FKYY4/1/
>>
>> However, since I'm new and I don't want to appear uncooperative here it
>> is ...
>> http://wp-themedev.ludwigdevelopment.com/wp-content/uploads/2012/07/css-test-for-emil.jpg and
>> live http://wp-themedev.ludwigdevelopment.com/uncategorized/images-test/
>>
>> I won't leave it up long because I have work to do on this server so I'll
>> be taking the live version down shortly.
>>
>> Bill
>>
>>
>> On Thu, Jul 19, 2012 at 4:01 PM, Emil Uzelac <emil at themeid.com> wrote:
>>
>>> I understand what you are trying to do an that's very much appreciated,
>>> however the styles are WordPress generated, therefore it should be within
>>> WordPress :) Here's that in action
>>> http://themeid.com/demo/responsive/2008/09/03/images-test/
>>>
>>> Emil
>>>
>>> On Thu, Jul 19, 2012 at 3:54 PM, William Ludwig <weludwig at gmail.com>wrote:
>>>
>>>> Emil,
>>>>
>>>> The HTML I used was from the Theme Unit Test. I don't know why a
>>>> wordpress install would be required to view CSS/HTML.
>>>>
>>>> If you look the image overflow is present with the original CSS as
>>>> well. My intent was to clean up the code but keep the same appearance and
>>>> functionality. Adding a max-width to the images is trivial enough but
>>>> really this wouldn't be the place in the stylesheet to do it. You would
>>>> want your responsive media handling to be more robust than just handling
>>>> images which kind of takes it out of scope for the snippet I created.
>>>>
>>>> Bill
>>>>
>>>> On Thu, Jul 19, 2012 at 3:15 PM, Emil Uzelac <emil at themeid.com> wrote:
>>>>
>>>>> 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
>>>>>>
>>>>>>
>>>>>
>>>>> _______________________________________________
>>>>> theme-reviewers mailing list
>>>>> theme-reviewers at lists.wordpress.org
>>>>> http://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
>>>>
>>>>
>>>
>>> _______________________________________________
>>> theme-reviewers mailing list
>>> theme-reviewers at lists.wordpress.org
>>> http://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
>>
>>
>
> _______________________________________________
> 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/1de214e2/attachment.htm>
More information about the theme-reviewers
mailing list