[theme-reviewers] Proposed changes to CSS Documentation in Wordpress Codex
Chip Bennett
chip at chipbennett.net
Thu Jul 19 23:57:26 UTC 2012
Honestly, I've not looked at the code in detail. I'm just speaking more in
general terms/principles.
Obviously, there's room for consolidation of DRY style definitions in the
example code. If your code did that, I'd be all for it. :)
Chip
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/dddc87b7/attachment-0001.htm>
More information about the theme-reviewers
mailing list