[theme-reviewers] Proposed changes to CSS Documentation in Wordpress Codex
Emil Uzelac
emil at themeid.com
Thu Jul 19 22:29:28 UTC 2012
remove or add anything* sorry I am multitasking :)
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
>>
>>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.wordpress.org/pipermail/theme-reviewers/attachments/20120719/e34b0fae/attachment-0001.htm>
More information about the theme-reviewers
mailing list