[theme-reviewers] Proposed changes to CSS Documentation in Wordpress Codex
Emil Uzelac
emil at themeid.com
Thu Jul 19 22:58:08 UTC 2012
does not pass oh men, I can't even write today! hehe
On Thu, Jul 19, 2012 at 5:57 PM, Emil Uzelac <emil at themeid.com> wrote:
> If something does not passes the minimum requirements and I just showed
> you screenshots, how can that be improvement?
>
> Thanks,
> Emil
>
> On Thu, Jul 19, 2012 at 5:51 PM, William Ludwig <weludwig at gmail.com>wrote:
>
>> Chip,
>>
>> If you can look at the original code and say that the new version, which
>> passes the tests in half the size, isn't an improvement than I'll defer to
>> you.
>>
>> Bill
>>
>>
>>
>> On Thu, Jul 19, 2012 at 5:47 PM, Emil Uzelac <emil at themeid.com> wrote:
>>
>>> ... 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
>>>>
>>>>
>>>
>>> _______________________________________________
>>> 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/2e0aa0ca/attachment-0001.htm>
More information about the theme-reviewers
mailing list