[theme-reviewers] Proposed changes to CSS Documentation in Wordpress Codex
Emil Uzelac
emil at themeid.com
Thu Jul 19 22:58:34 UTC 2012
man* ouch!
On Thu, Jul 19, 2012 at 5:58 PM, Emil Uzelac <emil at themeid.com> wrote:
> 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/be101974/attachment-0001.htm>
More information about the theme-reviewers
mailing list