It’s on “Jensen’s WordPress Show”
(18 minutes)

Learn how to create a frontpage where you can edit the content. On top of that you’ll get three – or more – widget areas for your featured content.
- Sample code on Github, click here.
(18 minutes)
Learn how to create a frontpage where you can edit the content. On top of that you’ll get three – or more – widget areas for your featured content.
The _S (Underscores) theme is a wonderful tool, if you want to create a WordPress theme from scratch. Here SASS really shines, because you can create a mixin, and pass whatever numbers or settings that are needed. It’s as easy as this:
// tablets: iPads and friends @media only screen and (max-width: 768px) { @include responsive(700px,400px,300px,1.1em); } // mobile @media only screen and (max-width: 598px) { @include responsive(500px,500px,500px,20px); }
And so on – in this way you can define the width of any HTML element. The SASS code for this particular mixin is:
@mixin responsive( $page, $primary, $aside, $siteTitle ) { #page { background-color: #fff; max-width: $page; margin: auto; } // "wrapper" content container #content { @include flexbox(); // prefixes for browsers display: flex; flex-wrap: wrap; } // content #primary { width: $primary; max-width: 100%; } // sidebar, widgets aside { width: $aside; max-width: 100%; } // site title size .site-title { a { font-size: $siteTitle; } } // images and media img, iframe, .entry-footer, .entry-content, .entry-header, .entry-footer, .site-branding, .site.title, #mast-head { max-width: 100%; } } // end responsive mixin
Perhaps you feel that the mixin code is long. But on the other hand, you only have to write this code once. From now on you can pass variables to the responsive design in just one line:
.someClass { @include responsive(980px,500px,420px); }
Q.E.D.