[wp-trac] [WordPress Trac] #24306: Twenty Thirteen: border-box box sizing will break many plugins

[WordPress Trac]

#24306: Twenty Thirteen: border-box box sizing will break many plugins
---------------------------+----------------------
 Reporter:  professor99    |       Owner:
     Type:  defect (bug)   |      Status:  closed
 Priority:  normal         |   Milestone:
Component:  Bundled Theme  |     Version:  trunk
 Severity:  normal         |  Resolution:  wontfix
 Keywords:                 |
---------------------------+----------------------

Comment (by professor99):

 Replying to [comment:34 nacin]:
 > I'll be honest, I weighed in on the discussion thinking it was all-or-
 nothing. I had not dived deeply into the ticket.
 >
 > I'd be satisfied with:
 >  * Adding a comment to the file explaining box-sizing: border-box.
 >  * '''Considering''' ''targeted'' content-box changes.
 >
 > There is a lot of code pasted onto this ticket — if they can be turned
 into an SVN patch, that would be very useful in evaluating it.

 Hi Nacin,

 For just the universal box selector amending style.css as given in comment
 25 is all that is needed. I considered doing a svn (though I haven't done
 this before) but since this file is constantly changing I thought just
 posting the amended bits as follows was a better option. Each part to be
 substituted is separated by /*** PART n ***/. Alternatively see further
 down for a link to an amended style.css.

 {{{

 /*** PART 1 ***/

 * {
         -webkit-box-sizing: border-box;
         -moz-box-sizing:    border-box;
         box-sizing:         border-box;
 }

 .entry-content, .entry-content  * {
         -webkit-box-sizing: content-box;
         -moz-box-sizing:    content-box;
         box-sizing:         content-box;
 }

 .widget, .widget * {
         -webkit-box-sizing: content-box;
         -moz-box-sizing:    content-box;
         box-sizing:         content-box;
 }


 /*** PART 2 ***/

 .entry-header,
 .entry-content,
 .entry-summary,
 .entry-meta {
         margin: 0 auto;
         max-width: 604px;
         width: 100%;
 }

 .sidebar .entry-header,
 .sidebar .entry-summary,
 .sidebar .entry-meta {
         max-width: 1040px;
         padding: 0 376px 0 60px;
 }

 .sidebar .entry-content {
         padding: 0 376px 0 60px;
 }

 /*** PART 3 ***/

 .widget .searchform [type="text"] {
         width: 100%;
 }

 .widget .searchform input[type="text"],
 .widget .searchform input[type="search"] {
         -webkit-box-sizing: border-box;
         -moz-box-sizing:    border-box;
         box-sizing:         border-box;
 }

 /*** PART 4 ***/

 .site-footer .widget {
     background: transparent;
     color: #fff;
     float: left;
     margin-right: 20px;
     width: 205px
 }

 /* Why do we do this? */
 .sidebar .site-footer .widget {
         width: 188px
 }
 }}}

 But if you want to save yourself some time I have already tested it and it
 works fine. Also it's really very simple as all it does is leave
 everything as border box except for anything in the widget (.widget) and
 the content (.entry-content) which are set to the default content box with
 widths of these elements and their children adjusted accordingly. An
 exception is made for the searchform box which I universally defined as
 border-box.

 All of this is implemented on my test site at
 http://test4.2rrr.org.au/?preview=1&template=twentythirteen&stylesheet=twentythirteen
 which runs WordPress 3.6-beta3. Ive added sidebars on this as more
 problems occur with this when sidebars are enabled.

 The amended style.css file is  http://test4.2rrr.org.au/wp-
 content/themes/twentythirteen/style.css

 The original style file is http://test4.2rrr.org.au/wp-
 content/themes/twentythirteen/style_orig.css

 Note this test website and it's style.css file only have the change for
 the universal selector applied and no changes related to the issues below.

 Another issue mentioned is the default widths for widgets (comment 25).
 The sidebar doesn't define a widget width. The footer defines two widths.
 One with sidebar and one without. Don't know why this is done. On my
 Twelve Thirteen variant Zebra theme
 http://test4.2rrr.org.au/?preview=1&template=twentythirteenzebra&stylesheet=twentythirteenzebra
 I have given all widgets the WordPress recommended max size 250px.

 The issue of padding for the widget class (comment 30) is another related
 issue. It can be addressed by providing a container for each widget with
 the necessary padding. This also means you have to add this to the widget
 declaration in functions.php and amend the masonry call in functions.js.
 All of this is done here
 http://test4.2rrr.org.au/?preview=1&template=twentythirteenzebra&stylesheet=twentythirteenzebra.
 I willing to share the code if anyone is interested. Note with this change
 Zebra is fully backwards compatible with all plugins unlike
 twelvethirteen.

 The final issue of handling CSS for three different box models due to IE7
 and IE8 (which plugins will inherit) is also a separate but related issue
 (comment 29). Use of a compatibility library such as ie9.js or other
 javascript to conform min-width, max-width, and box-sizing could be a
 solution. Of course you could always just live with the mess or toss it
 for a pad with content-box layout.

--
Ticket URL: <http://core.trac.wordpress.org/ticket/24306#comment:36>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software