[theme-reviewers] Proposed changes to CSS Documentation in Wordpress Codex
Emil Uzelac
emil at themeid.com
Thu Jul 19 22:47:06 UTC 2012
... as I said near the beginning of our conversation, but... :) Thanks Chip!
Emil
On Thu, Jul 19, 2012 at 5:37 PM, Chip Bennett <chip at chipbennett.net> wrote:
> 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
>>
>>
>
> _______________________________________________
> 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/faef8779/attachment-0001.htm>
More information about the theme-reviewers
mailing list