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

William Ludwig weludwig at gmail.com
Thu Jul 19 20:54:09 UTC 2012


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


More information about the theme-reviewers mailing list