[theme-reviewers] Proposed changes to CSS Documentation in Wordpress Codex
William Ludwig
weludwig at gmail.com
Thu Jul 19 21:47:18 UTC 2012
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
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.wordpress.org/pipermail/theme-reviewers/attachments/20120719/9ca1c906/attachment-0001.htm>
More information about the theme-reviewers
mailing list