[theme-reviewers] Proposed changes to CSS Documentation in Wordpress Codex

[Emil Uzelac]

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
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.wordpress.org/pipermail/theme-reviewers/attachments/20120719/72090817/attachment.htm>