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

[Shinra Web Holdings]

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