Using SASS/Compass can make adding media queries easier, I adopted using Chris Coyier’s handy SASS Breakpoint mixin. It didn’t take long for me to start modifying it, especially since I almost never use max width breakpoints. It didn’t “feel” very mobile-first to me, so I converted that portion of it.

Shortly after, I needed a custom breakpoint and again modified it. The concept of being able to add a breakpoint of any value whenever you need one is very refreshing and is best summed up by Stephen Hay.

Start with the small screen first, then expand until it looks like shit. Time to insert a breakpoint!

The revelation of not being so bound to set media query breakpoints is very powerful and adding them in the class they pertain to ended up not being an issue with organization at all. Using the SASS mixin has definitely increased my overall workflow speed which is probably the greatest benefit.

SASS Media Query Breakpoint Mixin

@mixin breakpoint($point) {
    @if $point == medium {
        @media (min-width: 30em)  { @content; }
    }
    @else if $point == large {
        @media (min-width: 50em) { @content; }
    }
    @else if $point { // allows custom breakpoints
        @media (min-width: $point) { @content; }
    }
}

SASS Breakpoint Usage

.content {
    // mobile-first styles here
    // the idea is styles here will work for mobile all the way to desktop
    // you then override the styles with the breakpoints below as things get more complex or additional functionality is needed

    @include breakpoint(medium) {
        // medium defined breakpoint styles
        // this is where you put styles that are applied to medium and large
    }
    @include breakpoint(large) {
        // large defined breakpoint styles
        // this is where you put styles that are only applied to large
    }
    @include breakpoint(80em) {
        // custom defined breakpoint styles
        // this is where you can add any value and create any additional media query you need
    }
}

Why Medium and Large?

Someone might wonder why I chose to use medium and large as breakpoints instead of only custom variations. It has to do with I like to have multiple things happen at the same time and felt safer to have things like the layout and fonts in media queries change at specific width, doing a custom width for everything is overkill, but having the option is awesome.

Yes, you can convert these to pixels if you haven’t made the leap into using em units for media queries.

Simple Breakpoint Example

This is a very simple example of changing the font size for the whole site as it scales up from mobile to desktop.

body {
    background: $background;
    font-family: $body-font;
    font-size: 100%;
    line-height: 1.625;
    color: $body-color;

    @include breakpoint(medium) {
        font-size: 112.5%;
    }
    @include breakpoint(large) {
        font-size: 125%;
    }
}

SublimeText Breakpoint Snippet

Hopefully you are using SublimeText as a text editor, if so Chris Coyier posted a video showing usage of a Sublime Snippet by James Nowland so you can output the breakpoint by just typing “mq + Tab” (or “mq + Enter” if you use Enter instead of the Tab trigger like I do to avoid conflicts with Emmet).

This snippet has been modfied to use my version of the SASS Breakpoint Mixin above, which I prefer. Josh Hibbert mentioned in comments on the video that you can insert a tab trigger after the snippet to get the cursor to tab to a new line, small optimization but very handy.

<snippet>
    <content><![CDATA[
    @include breakpoint($1) {
        $2
    }
    $3
    ]]></content>
    
    <tabTrigger>mq</tabTrigger>
    <scope>source.css, source.scss</scope>
</snippet>

The post Placement of Media Queries appeared first on Scott Nix.

Occasionally a question will pop up on the forum involving incorporating a gird into Thematic. Most of the questions involve adding classes like grid_6, span-5 to the HTML Thematic outputs to add the styling for their framework of choice. You can do that by adding functions and filters to your functions.php file, but this is the wrong way to do it and causes a lot of code bloat.

Grids are suppose to make things easy, once you step into the realm of having to add classes to the existing markup to match whatever syntax the grid system is using, you are already making things harder than they need to be.

View Demo

This example is going to be a little complicated for some and super easy for others already familiar with SASS and Compass. If you don’t know what SASS and Compass are, watch this first for a little bit of a background. This post isn’t really a tutorial, but more of a visualization of how easy it can be to work with a grid system in Thematic. You will obviously need SASS and Compass for this to work.

The code is specifically set up for using the Responsive Base Theme I have created for Thematic and the grid system style I will be aiming for is the default Thematic layout.

Zen Grids and Thematic

Zen Grids is a responsive grid system built to work with SASS and Compass, in my opinion it is one of the easier ones out there to understand. You will have to most likely visit the Zen Grids site and follow the simple setup tutorials, once setup though, it is a breeze.

The first thing we need to do is import Zen Grids in the top of the style.scss file. If you are on PC and using Scout, there is no real setup, Zen Grids is built in, you need to change the import to just @import "zen";.

@import "zen-grids";

Next we need to set a couple SASS variables so the grid system knows how many columns we are using and the width of the gutters.

$zen-column-count: 12; // grid columns
$zen-gutter-width: 2em; // gutter width

Since the responsive base theme I have created is a “mobile-first” structure, all the base CSS is already set and only things that need to be changed are in the media queries. So we need to swap out the previous media queries at the bottom of the style.scss file with the new Zen Grids setup.

@media only screen and (min-width: 45em) {
    #wrapper {
        @include zen-grid-container;
        max-width: 1140px;
        margin: 0 auto;
    }
    #branding {
        @include zen-grid-item(12, 1);
        width: 100%;
    }
    #access .menu {
        @include zen-grid-item(12, 1);
        @include zen-clear(both);
        width: 100%;
    }
    #container { @include zen-grid-item(8, 1); }
    #main {
        @include pie-clearfix;
        width: 100%;
    }
    .main-aside { @include zen-grid-item(4, 1, right); }
    #secondary { @include zen-clear(right); }
    #subsidiary {
        @include pie-clearfix;
        width: 100%;
    }
    #first { @include zen-grid-item(4, 1); }
    #second { @include zen-grid-item(4, 5); }
    #third { @include zen-grid-item(4, 9); }
    #footer-widget { @include zen-grid-item(12, 1); }
    #siteinfo {
        @include zen-grid-item(12, 1);
        width: 100%;
    }
    blockquote {
        &.left {
            float: left;
            width: 33%;
            margin-left: 0;
            margin-right: 1.5em;
            text-align: right;
        }
        &.right {
            float: right;
            width: 33%;
            margin-left: 1.5em;
            margin-right: 0;
            text-align: left;
        }
    }
    .sf-menu li { float: left; }
    .content-column {
        float: left;
        width: 45%;
        margin: 0 0 1.625em;
    }
    .navigation {
        margin: 0 0 1.625em;
        overflow: hidden;
    }
    .nav-previous {
        float: left;
        width: 50%;
    }
    .nav-next {
        float: right;
        width: 50%;
        text-align: right;
    }
    .page-template-template-page-fullwidth-php #comments { @include zen-grid-flow-item( 8, 12); }
}

That is it, there is a little bit of extra markup in there for additional elements, but only because I wanted to recreate the exact same layout as the Responsive Base theme, but with the added benefit of Zen Grids.

If you need help understanding the code, I would recommend checking the Zen Grids help page which is well documented.

This is by no means the “optimized” way to add Zen Grids, there a a few things that can be done to cut the code down a bit and make things “DRY“, but the idea is to see a simple example of the power SASS and Compass can add to your projects. Keep in mind that a grid system is not always required, but if you are creating sites over and over it may be beneficial to your workflow.

With all that said, personally I have dropped playing with Zen Grids and focused my attention on another grid system that seems to be the best I have found so far, it is called Susy and if you are going to go the grid route, I highly suggest looking into it.

Update: This site is now built using Susy Grids, so far they are awesome.

The post Thematic and Grid Systems appeared first on Scott Nix.

I am going to show you how to use fonts for icons the easiest way possible, then explain a even better way afterwards, but currently the goal is just to get you setup using icon fonts with your Thematic child themes. We are going to be using a handy little API from We Love Icon Fonts.

We Love Icon Fonts with WordPress

We are going to be using the Entypo set of icons for now, but you can swap these out later for a different set. The We Love Icon Fonts sites example uses an @import, while easier, I usually avoid using @import in stylehseets for performance reasons. So lets load that instead in the header as is best practice with any stylesheets when using WordPress.

Enqueue Icon Fonts Styles

This snippet will register and enqueue the weloveiconfonts.com API styes for use in the theme, this will work for any WordPress theme, not just Thematic. Just drop this into the functions.php of your child theme, or theme if you aren’t using a child.

// enqueue font icons
function childtheme_icon_fonts() {
    // registers weloveiconfonts.com icon font api styles
    wp_register_style('icon-fonts-css', 'http://weloveiconfonts.com/api/?family=entypo');
    // enqueue the scripts for use in theme
    wp_enqueue_style ('icon-fonts-css');
}
add_action('wp_enqueue_scripts', 'childtheme_icon_fonts');

Required CSS to call Icon Fonts

Just drop this CSS in your style sheet.

[class*="entypo-"]:before { font-family: 'entypo', sans-serif; }

That’s it. Now all that is needed is to add a specific class with a name on the element to call the icon, for example .icon-home.

The CSS included in the demos is very basic, they are styled with just enough structure to get you started on making them your own. The demos were set up in SASS, so if you prefer that you can grab it off the SCSS section tab in the demo.

Social Icon Font Example

Check out this Pen!

One of the most popular uses is social icons, sure you can use images, but icon fonts are cooler. This is a basic setup using Thematic’s existing structure for providing a few links to your social networks in the sidebar. :)

Social Icon Font PHP

This snippet will go in the functions.php of the child theme. We are using some existing CSS classes to keep the same structure from Thematic to keep things uniform in the sidebar, hooking the function on to the thematic_belowmainasides hook.

function childtheme_social_icon_fonts() { ?>
    <div id="tertiary" class="aside main-aside">
        <ul class="xoxo social-icons">
          <li><a class="entypo-twitter" href="#" title="Twitter"><span>Twitter</span></a></li>
          <li><a class="entypo-facebook" href="#" title="Facebook"><span>Facebook</span></a></li>
          <li><a class="entypo-github" href="#" title="Github"><span>Github</span></a></li>
          <li><a class="entypo-rss" href="#" title="RSS"><span>RSS</span></a></li>
        </ul>
    </div>
<?php }
add_action('thematic_belowmainasides', 'childtheme_social_icon_fonts');

Social Icon Font CSS

#tertiary { clear: right; }
.social-icons { list-style: none; }
.social-icons li { float: left; }
.social-icons li a {
    padding: 0 0.5em;
    font-size: 2em;
    text-decoration: none;
    text-shadow: 
        1px 1px 0 rgba(0, 0, 0, 0.4), 
        1px 1px 2px rgba(0, 0, 0, 0.4);
}
.social-icons li a:hover {
    text-shadow: 
        1px 1px 0 rgba(0, 0, 0, 0.6), 
        1px 1px 4px rgba(0, 0, 0, 0.4);
}
.social-icons span { display: none; }

This example uses Twitter, Facebook, Github and RSS, the actual text will be hidden, using the icons only, but it is good practice to include it anyway.

WordPress Menu Font Icons

Check out this Pen!

Inserting font icons in the WordPress menu is pretty easy, the way to do it is to add a class through the WordPress Admin built in Custom Menu functionality. There is a section “CSS Classes” where you can add the icon class you want, if you don’t see this option in the menus, check the “Screen Options” in the right top and check that option to show. Since the classes are added through WP itself, there is no additional PHP needed.

WordPress Menu Font Icons CSS

.sf-menu [class*="entypo-"]:before {
    z-index: 3;
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 24px;
    color: #666666;
    text-shadow: 
        1px 1px 0 rgba(0, 0, 0, 0.4), 
        1px 1px 2px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}
.sf-menu [class*="entypo-"]:hover:before {
    color: #FF4B33;
    text-shadow: 
        1px 1px 0 rgba(0, 0, 0, 0.6), 
        1px 1px 4px rgba(0, 0, 0, 0.4);
}
.sf-menu [class*="entypo-"] a { padding: 9px 13px 9px 38px; }
.sf-menu [class*="entypo-"] li a { padding: 9px 13px; }

Just don’t forget you need to add the classes through the WP Admin Menu.

Navigational Font Icons

Check out this Pen!

Thematic by default has two separate navigation structures, one is for navigating the Older/Newer posts and the other is on single post pages that show the title of the previous and next post. Most sites I work on do not include the navigation on the single posts. This example removes the single post page navigation and instead replaces the standard Older/Newer navigation in WordPress with some font icons to replace the default text.

Navigational Font Icons PHP

The first function completely removes the upper navigation (personal preference), instead we are only going to be using the lower navigation. The second function removes the navigation on single pages and changes the structure to give some better hooks for adding some font icons arrows instead. I also added a title in since there is no text, at least the title “Older posts” or “Newer posts” will show on hover, which is helpful.

// override nav_below functionality - remove it completely
function childtheme_override_nav_above() {
    // silence
}

// override nav_below functionality
function childtheme_override_nav_below() {
    if ( !is_single() ) { ?>
        <div id="nav-below" class="navigation">
            <div class="nav-previous"><?php next_posts_link('<i title="Older posts" class="entypo-left"></i> <span>Older posts</span>') ?></div>
            <div class="nav-next"><?php previous_posts_link('<span>Newer posts</span> <i title="Newer posts" class="entypo-right"></i>') ?></div>
        </div> <?php
    }
}

Navigational Font Icons CSS

.navigation {
    margin: 0 0 1.625em;
    overflow: hidden;
}
.navigation a {
    display: block;
    height: 5em;
    width: 5em;
    line-height: 5em;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
}
.navigation i {
    font-size: 5em;
    color: #666666;
    font-style: normal;
}
.navigation .nav-previous {
    float: left;
    width: auto;
}
.navigation .nav-next {
    float: right;
    width: auto;
}
.navigation span { display: none; }

Now the kicker.

While this is a viable way to achieve font icons and is usable, there is a better way to do this if you are trying to keep everything optimized (as fast as possible). The idea is instead of letting We Love Icon Fonts handle the loading of the fonts, you instead use a service to trim down the fonts to exactly what you need, so you load 4 icons in the font instead of 40 and handle the serving of the font files yourself. There are some great services out there like IcoMoon and Fontello which make it a breeze. So hopefully this gives you a leg up on using font icons with Thematic.

A few complex examples.

• Icon Fonts are Awesome – Easy to Understand Demo
• Codepen Demo – Multicolored Font Icons
• Codepen Demo – Enhanced Lists
• Codepen Demo – Minimal Circular 3D Buttons

The post Thematic and Icon Fonts appeared first on Scott Nix.

It is super easy, just a little tedious, the idea is you can essentially make little “dots” with box-shadows, it is not exactly practical to do things like this, but it is a fun exercise just knowing how to do it.

Single Element HTML

<div class="construction"></div>

CSS, well technically SASS

body { padding: 2em; }
.construction {
    animation: work 1s steps(1, start) infinite;
    position: relative;
    height: 1em;
    width: 1em;
    margin-bottom: 37em;
    margin-left: 17em;
    font-size: 7px;
    &:before {
        @include rotate(45deg);
        z-index: -1;
        position: absolute;
        top: 5em;
        left: -12em;
        height: 28em;
        width: 28em;
        content: '';
        background-color: #fdd400;
        border-radius: 3em;
    }
    &:after {
        content: '';
        position: absolute;
        left: -17em;
        height: 1em;
        width: 1em;
        margin-left: 17em;
        background-color: #000;
        box-shadow:

            /* static parts */

            /* the sign border */

            /* row 1 */
            1em 0em,
            2em 0em,
            3em 0em,
            /* row 2 */
            -1em 1em,
            0em 1em,
            1em 1em,
            2em 1em,
            3em 1em,
            4em 1em,
            /* row 3 */
            -2em 2em,
            -1em 2em,
            4em 2em,
            5em 2em,
            /* row 4 */
            -3em 3em,
            -2em 3em,
            5em 3em,
            6em 3em,
            /* row 5 */
            -4em 4em,
            -3em 4em,
            6em 4em,
            7em 4em,
            /* row 6 */
            -5em 5em,
            -4em 5em,
            7em 5em,
            8em 5em,
            /* row 7 */
            -6em 6em,
            -5em 6em,
            8em 6em,
            9em 6em,
            /* row */
            -7em 7em,
            -6em 7em,
            9em 7em,
            10em 7em,
            /* row 9 */
            -8em 8em,
            -7em 8em,
            10em 8em,
            11em 8em,
            /* row 10 */
            -9em 9em,
            -8em 9em,
            11em 9em,
            12em 9em,
            /* row 11 */
            -10em 10em,
            -9em 10em,
            12em 10em,
            13em 10em,
            /* row 12 */
            -11em 11em,
            -10em 11em,
            13em 11em,
            14em 11em,
            /* row 13 */
            -12em 12em,
            -11em 12em,
            14em 12em,
            15em 12em,
            /* row 14 */
            -13em 13em,
            -12em 13em,
            15em 13em,
            16em 13em,
            /* row 15 */
            -14em 14em,
            -13em 14em,
            16em 14em,
            17em 14em,
            /* row 16 */
            -15em 15em,
            -14em 15em,
            17em 15em,
            18em 15em,
            /* row 17 */
            -16em 16em,
            -15em 16em,
            18em 16em,
            19em 16em,
            /* row 18 */
            -17em 17em,
            -16em 17em,
            19em 17em,
            20em 17em,
            /* row 19 */
            -17em 18em,
            -16em 18em,
            19em 18em,
            20em 18em,
            /* row 20 */
            -17em 19em,
            -16em 19em,
            19em 19em,
            20em 19em,
            /* row 21 */
            -17em 20em,
            -16em 20em,
            19em 20em,
            20em 20em,
            /* row 22 */
            -16em 21em,
            -15em 21em,
            18em 21em,
            19em 21em,
            /* row 23 */
            -15em 22em,
            -14em 22em,
            17em 22em,
            18em 22em,
            /* row 24 */
            -14em 23em,
            -13em 23em,
            16em 23em,
            17em 23em,
            /* row 25 */
            -13em 24em,
            -12em 24em,
            15em 24em,
            16em 24em,
            /* row 26 */
            -12em 25em,
            -11em 25em,
            14em 25em,
            15em 25em,
            /* row 27 */
            -11em 26em,
            -10em 26em,
            13em 26em,
            14em 26em,
            /* row 28 */
            -10em 27em,
            -9em 27em,
             12em 27em,
             13em 27em,
            /* row 29 */
            -9em 28em,
            -8em 28em,
            11em 28em,
            12em 28em,
            /* row 30 */
            -8em 29em,
            -7em 29em,
            10em 29em,
            11em 29em,
            /* row 31 */
            -7em 30em,
            -6em 30em,
            9em 30em,
            10em 30em,
            /* row 32 */
            -6em 31em,
            -5em 31em,
            8em 31em,
            9em 31em,
            /* row 33 */
            -5em 32em,
            -4em 32em,
            7em 32em,
            8em 32em,
            /* row 34 */
            -4em 33em,
            -3em 33em,
            6em 33em,
            7em 33em,
            /* row 35 */
            -3em 34em,
            -2em 34em,
            5em 34em,
            6em 34em,
            /* row 36 */
            -2em 35em,
            -1em 35em,
            4em 35em,
            5em 35em,
            /* row 37 */
            -1em 36em,
            0em 36em,
            1em 36em,
            2em 36em,
            3em 36em,
            4em 36em,
            /* row 38 */
            0em 37em,
            1em 37em,
            2em 37em,
            3em 37em,

            /* header (head) */

            /* row 8 */
            -3em 7em,
            -2em 7em,
            -1em 7em,
            0em 7em,
            /* row 9 */
            -4em 8em,
            -3em 8em,
            -2em 8em,
            -1em 8em,
            0em 8em,
            1em 8em,
            /* row 10 */
            -4em 9em,
            -3em 9em,
            -2em 9em,
            -1em 9em,
            0em 9em,
            1em 9em,
            /* row 11 */
            -4em 10em,
            -3em 10em,
            -2em 10em,
            -1em 10em,
            0em 10em,
            1em 10em,
            /* row 12 */
            -4em 11em,
            -3em 11em,
            -2em 11em,
            -1em 11em,
            0em 11em,
            1em 11em,
            /* row 13 */
            -3em 12em,
            -2em 12em,
            -1em 12em,
            0em 12em,

            /* body (body) */

            /* row 15 */
            -3em 14em,
            -2em 14em,
            -1em 14em,
            0em 14em,
            /* row 16 */
            -4em 15em,
            -3em 15em,
            -2em 15em,
            -1em 15em,
            0em 15em,
            1em 15em,
            /* row 17 */
            -4em 16em,
            -3em 16em,
            -2em 16em,
            -1em 16em,
            0em 16em,
            1em 16em,
            /* row 18 */
            -4em 17em,
            -3em 17em,
            -2em 17em,
            -1em 17em,
            0em 17em,
            1em 17em,
            /* row 19 */
            -4em 18em,
            -3em 18em,
            -2em 18em,
            -1em 18em,
            0em 18em,
            1em 18em,
            /* row 20 */
            -4em 19em,
            -3em 19em,
            -2em 19em,
            -1em 19em,
            0em 19em,
            1em 19em,
            /* row 21 */
            -4em 20em,
            -3em 20em,
            -2em 20em,
            -1em 20em,
            0em 20em,
            1em 20em,
            /* row 22 */
            -4em 21em,
            -3em 21em,
            -2em 21em,
            -1em 21em,
            0em 21em,
            1em 21em,
            /* row 23 */
            -4em 22em,
            -3em 22em,
            -2em 22em,
            -1em 22em,
            0em 22em,
            1em 22em,
            /* row 24 */
            -4em 23em,
            -3em 23em,
            -2em 23em,
            -1em 23em,
            0em 23em,
            1em 23em;
    }
}

/* baby making animation */

@keyframes work {
    50% {
        box-shadow:

        /* sidebar (arms) ***********************************/

        2em 15em,
        2em 16em,
        3em 16em,
        3em 17em,
        4em 17em,
        4em 18em,
        5em 18em,
        5em 19em,
        6em 19em,
        6em 20em,
        7em 20em,
        7em 21em,
        8em 21em,
        8em 22em,
        9em 22em,

        /* footer (legs) ***********************************/

        /* row 26 */
        -4em 25em,
        -3em 25em,
        -2em 25em,
        -1em 25em,
        0em 25em,
        1em 25em,
        /* row 27 */
        -4em 26em,
        -3em 26em,
        -2em 26em,
        -1em 26em,
        0em 26em,
        1em 26em,
        /* row 28 */
        -4em 27em,
        -3em 27em,
        -2em 27em,
        -1em 27em,
        0em 27em,
        1em 27em,

        /* peepee (wiener) ***********************************/

        2em 27em,
        3em 27em,
        4em 27em,
        5em 27em,

        /* row 29 */
        -4em 28em,
        -3em 28em,
        -2em 28em,
        -1em 28em,
        0em 28em,
        1em 28em,
        /* row 30 */
        -3em 29em,
        -2em 29em,
        -1em 29em,
        0em 29em,
        1em 29em,
        /* row 31 */
        -3em 30em,
        -2em 30em,
        -1em 30em,
        0em 30em,
        1em 30em,
        /* row 32 */
        -3em 31em,
        -2em 31em,
        -1em 31em,
        0em 31em,
        1em 31em,
        /* row 33 */
        -3em 32em,
        -2em 32em,
        -1em 32em,
        0em 32em,
        1em 32em,
        /* row 34 */
        -3em 33em,
        -2em 33em,
        -1em 33em,
        0em 33em,
        1em 33em,
        /* row 35 */
        -3em 34em,
        -2em 34em,
        -1em 34em,
        0em 34em,
        1em 34em,
        /* row 36 */

        -2em 35em,
        -1em 35em,
        0em 35em,
        1em 35em,

        /* partner (receiver) ***********************************/

        /* row 24 */
        7em 23em,
        8em 23em,
        9em 23em,
        10em 23em,
        11em 23em,
        12em 23em,
        13em 23em,
        14em 23em,
        15em 23em,
        /* row 25 */
        6em 24em,
        7em 24em,
        8em 24em,
        9em 24em,
        10em 24em,
        11em 24em,
        12em 24em,
        13em 24em,
        14em 24em,
        /* row 26 */
        6em 25em,
        7em 25em,
        8em 25em,
        9em 25em,
        10em 25em,
        11em 25em,
        12em 25em,
        13em 25em,
        /* row 27 */
        6em 26em,
        7em 26em,
        8em 26em,
        9em 26em,
        10em 26em,
        11em 26em,
        12em 26em,
        /* row 28 */
        6em 27em,
        7em 27em,
        8em 27em,
        9em 27em,
        10em 27em,
        11em 27em,
        /* row 29 */
        6em 28em,
        7em 28em,
        8em 28em,
        9em 28em,
        10em 28em,
        /* row 30 */
        7em 29em,
        8em 29em,
        9em 29em,
        /* row 31 */
        8em 30em;
    }
    100% {
        box-shadow:

        /* sidebar (arms) ***********************************/

        1em 15em,
        1em 16em,
        1em 17em,
        2em 17em,
        2em 18em,
        3em 18em,
        3em 19em,
        4em 19em,
        4em 20em,
        5em 20em,
        5em 21em,
        6em 21em,
        6em 22em,
        7em 22em,

        /* footer (legs) ***********************************/

        /* row 26 */
        -3em 25em,
        -2em 25em,
        -1em 25em,
        0em 25em,
        1em 25em,
        2em 25em,
        /* row 27 */
        -3em 26em,
        -2em 26em,
        -1em 26em,
        0em 26em,
        1em 26em,
        2em 26em,
        /* row 28 */
        -3em 27em,
        -2em 27em,
        -1em 27em,
        0em 27em,
        1em 27em,
        2em 27em,

        /* peepee (wiener) ***********************************/

        2em 27em,
        3em 27em,
        4em 27em,
        5em 27em,
        6em 27em,

        /* row 29 */
        -3em 28em,
        -2em 28em,
        -1em 28em,
        0em 28em,
        1em 28em,
        2em 28em,
        /* row 30 */
        -2em 29em,
        -1em 29em,
        0em 29em,
        1em 29em,
        2em 29em,
        /* row 31 */
        -2em 30em,
        -1em 30em,
        0em 30em,
        1em 30em,
        2em 30em,
        /* row 32 */
        -2em 31em,
        -1em 31em,
        0em 31em,
        1em 31em,
        2em 31em,
        /* row 33 */
        -2em 32em,
        -1em 32em,
        0em 32em,
        1em 32em,
        2em 32em,
        /* row 34 */
        -2em 33em,
        -1em 33em,
        0em 33em,
        1em 33em,
        2em 33em,
        /* row 35 */
        -1em 34em,
        0em 34em,
        1em 34em,
        2em 34em,
        /* row 36 */
        -2em 35em,
        -1em 35em,
        0em 35em,
        1em 35em,
        2em 35em,

        /* partner (receiver) ***********************************/

        /* row 24 */
        5em 23em,
        6em 23em,
        7em 23em,
        8em 23em,
        9em 23em,
        10em 23em,
        11em 23em,
        12em 23em,
        13em 23em,
        14em 23em,
        15em 23em,
        /* row 25 */
        4em 24em,
        5em 24em,
        6em 24em,
        7em 24em,
        8em 24em,
        9em 24em,
        10em 24em,
        11em 24em,
        12em 24em,
        13em 24em,
        14em 24em,
        /* row 26 */
        4em 25em,
        5em 25em,
        6em 25em,
        7em 25em,
        8em 25em,
        9em 25em,
        10em 25em,
        11em 25em,
        12em 25em,
        13em 25em,
        /* row 27 */
        4em 26em,
        5em 26em,
        6em 26em,
        7em 26em,
        8em 26em,
        9em 26em,
        10em 26em,
        11em 26em,
        12em 26em,
        /* row 28 */
        4em 27em,
        5em 27em,
        6em 27em,
        7em 27em,
        8em 27em,
        9em 27em,
        /* row 29 */
        4em 28em,
        5em 28em,
        6em 28em,
        7em 28em,
        8em 28em,
        9em 28em,
        /* row 30 */
        5em 29em,
        6em 29em,
        7em 29em,
        8em 29em,
        9em 29em,
        /* row 31 */
        6em 30em,
        7em 30em,
        8em 30em,
        /* row 32 */
        6em 31em,
        7em 31em,
        8em 31em,
        /* row 32 */
        6em 32em,
        7em 32em,
        8em 32em;
    }
}

The Result

Something only a mother could be proud of.

I was able to get the man, the myth, the legend to tweet me back. Achievement unlocked. ;)

@usabilitydick oh my.fine work, sir.

— Paul Irish (@paul_irish) October 23, 2012

The post Baby Under Construction appeared first on Scott Nix.

I am not going to explain how floats work, it is summed up very well by CSS Tricks. I am instead going to explain scenarios I was doing that just were over complicating a simple issue and show how I do things now. This post is primarily for referring people who are having the same issue, I often see people making the same mistakes.

When working with the Thematic Framework for WordPress I would primarily run into the issue of float collapse while working with background images sliced from PSD’s. Fixing that is easy, the are multiple ways to do it, often a overflow: hidden; will fix it, but sometimes you need the good ole trusty CSS “clearfix”.

The CSS to make it work.

The CSS for the clearfix is simple, I usually choose to use the micro clearfix hack created by Nicolas Gallagher.

.cf:before, .cf:after { content: " ";  display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }

The CSS above immediately makes it seem like you have to add a class to perform the clearfix, so all you have to do is add a class of .cf or .clearfix and boom fixed!

Well…. the key is you don’t have to add a class or any additional HTML markup at all. The goal is to not add anything to the HTML markup that isn’t required, especially a styling element (a CSS clearfix).

Friends don’t let friends clearfix like this.

A long time ago I decided I would use jQuery to add the class of .cf to the parent sections that needed it, simple.

jQuery("#main").addClass('cf');

The problem is this relies on jQuery and it takes a little time to load so there would be a flash of unstyled content, albeit most of the time it was barely noticeable, it still bugged me.

Instead of using jQuery, I opted to go the route of adding the .cf class to the sections where needed.

<div id="main" class="cf"></div>

Or if not possible, adding a completely new element with a clearing class, clear: both; to essentially clear the floats which also works to remedy the float collapse.

<br class="clear">

While better in terms of performance, fixing the FOUC, this was now polluting the structure of the actual HTML site with unneeded markup that is definitely in the “styling” realm.

How I clearfix now.

I will be the first to admit, I felt pretty stupid when I figured out that there is no need to add a new class at all. Instead, just change the CSS on the clearfix to the existing ID/class.

#main:before, #main:after { content: " ";  display: table; }
#main:after { clear: both; }
#main { *zoom: 1; }

Much better and no need to add additional markup the the HTML structure.

Now if you are a bad ass and use SASS/Compass in your working environment, it is even easier to add letting the preprocessor handle the output.

#main { @include pie-clearfix; }

So, hopefully I never see you using another clearfix class again. This same thing of not adding unnecessary classes applies to grid frameworks, in the same exact way, but that is another blog post. ;P

The post Clearfix Clarity appeared first on Scott Nix.

At the time I thought it was hilarious, but never did much with it, although it could be useful for anyone as pandering is bound to continue.

Download SVG and PNG

Update: On a side note, I created a CSS Pedobear (just the face).

The post Panderbear appeared first on Scott Nix.

Demo Titanic Theme

Download Titanic Theme

Titanic Highlights

This responsive theme is packed with best practices involving developing child themes for Thematic I have picked up in the past few years. The one thing that makes this theme stand out is the way the menu works, it uses a footer anchor approach which is not currently set up for drop downs.

The theme is also built on SASS and Compass which hopefully you are using as it will make developing sites quicker, even if you just use it for the ability to import and compile.

While creating this theme, I made my best effort to make it compatible with the new Thematic HTML5 Plugin created by Karin Taliga. This plugin is awesome for converting some existing elements in Thematic to HTML5 without losing any functionality. For anyone that has looked into this (me), it is a pain to do and she has done an amazing job.

If you want to know every detail about this theme, you will probably want to review the information on my Responsive Base theme since they share all the same features.

The post Titanic, a child theme for Thematic appeared first on Scott Nix.

Demo Child’s Play Theme

Download Child’s Play

This project is on Github, so feel free to contribute!

Child’s Play Highlights

While this child theme shares all the same benefits as the Responsive Base child theme, I won’t be repeating them here. Child’s Play is unique in that it is the only child theme (I know of) available for Thematic which has the benefit of using SASS and Compass. Child’s Play turned out to be a good alternative to Responsive Base for those who want even a more refined starting point for child theme development. Although if you were coding a site from a PSD, Responsive Base would probably be a better start.

The CSS

Child’s Play takes it up a notch adding presentational styles and utilizing some very handy features that using SASS and Compass provide. I can’t really dive into all the things that make SASS and Compass great, that is already heavily documented and there is no way I could ever do it justice. All I can say is from now on, I will always be using SASS and Compass for my future projects, I think you should too.

The Functions PHP

Probably a little over the top, the functions.php clocks in at a little over 500 lines of code. I ended up reworking a bunch of things and adding more options to be reused in other various projects.

• Added WooThemes Flexslider which works off of sticky posts, it is currently set up to show featured images of 750px wide by 425px height, which can easily be changed. You just have to settle on a specific size and make sure they are saved as the same size when using this option. If you have no sticky posts, the slider just won’t show, and best of all, the slider assets won’t load.
• I also went ahead and added a header aside widget, I use this a lot for addresses, search bars, or even social icons, which comes in handy.
• Added a heavily modified version of FlexNav, a jQuery menu that is collapsed on mobile devices to provide more room for content, currently the menu doesn’t support drop downs now supports drop downs.
• Modified the postheader and postfooter to offer a different style, keeping the content on top.

Last Thoughts

Again, check the Responsive Base starter theme for more information on all the features packed into this child theme, Child’s Play just takes it a step further. This theme may be a little advanced for someone just getting started with Thematic, but if you already use Thematic for all your child theming, I think you will love this setup. A lot of the work on this theme comes from a big push from myself to optimize my workflow and stay up on the latest best practices.

Update: Now made to comply to with Idiomatic-CSS guidelines.

Update: Now works with the Thematic HTML5 Plugin by Karin at invistruct.com.

The post Child’s Play, child theme for Thematic appeared first on Scott Nix.

After creating quite a few Thematic based sites, I felt I needed a solid base starting point which saves a little time by being already set up with some very useful modifications I frequently use.

Responsive Base is ideal for me, I created it for me. Although others working with responsive themes for Thematic will find it useful and refreshing. It is intended to work best with the latest version of Thematic, but works fine on 9.7.7 and above.

Demo Responsive Base Theme

Download Responsive Base Theme

View the demo to take a peek, or visit GitHub to download or view the code. Special thanks to Kathy for inspiration from her adaptive layouts for Thematic.

Responsive Base Highlights

The CSS

Thematic has a great minimalistic style by default, but I prefer not to have those default styles at the start of every child theme.

• The reset.css has been replaced by normalize.css which preserves the browser defaults and also corrects common browser inconsistencies.
• Original style sheets have had a ton of the unnecessary styles removed and condensed, while also building everything with a mobile first approach to responsive web design.
• Added HTML5Boilerplate print styles for clean printing and HTML5Boilerplate helper classes to take advantage of the latest best practices for things like clear fixes and image replacement.

The Functions PHP

• Adds my snippet to add conditional classes for Thematic to the header to target old versions of IE. This also now adds the meta viewport for correct scaling on mobile devices. By default this responsive theme will display a static mobile version with a little CSS for IE7 and IE8 based on a post by Joni Korpi called leaving old IE behind.
• Includes a few functions to clean up the head of the document of lines of code that are loaded by default.
• Helps optimize script loading in WordPress by providing a template to promote good habits. Combining scripts, loading custom scripts in a custom.js file instead of on page and loading scripts in the footer unless they are required to load in the header.
• Loads Modernizr which includes the html5shiv for getting IE to recognize new HTML5 elements, also Modernizr does a ton more, especially useful for providing CSS3 fallbacks. Responsive Base child theme comes bundled with the full version of Modernizr, you should however use the build script to only include what you need.
• Loads FitVids JavaScript which handles the resizing of videos for responsive websites.
• Also provides a bunch of handy functions I tend to use on most child theme builds. Such as PHP snippets to add a Favicon, register additional menus in WordPress, a fourth subsidiary widget (good for footer menus), optimized Google Analytics and also a snippet to hide widget locations in the admin area.

Responsive Base File Structure

Includes necessary folders and files already setup in the child theme to promote well structured themes.

• /images/
• /js/
  • custom.js
  • jquery.fitvids.js
  • modernizr.js
• favicon.ico
• functions.php
• screenshot.png
• style.css
• style.scss (for SASS/Compass)

Last Thoughts

While this theme is intended for developers to dive right in to responsive design with Thematic, it would also help people who are new to child themes get an idea on how things can be done in a clean and efficient way. Getting started in mobile-first responsive design can be rough at first, so hopefully you find this child theme template useful and be sure to always get the latest version or fork your own from GitHub.

Child Themes using Responsive Base

• Child’s Play – by Me [demo] [download]
• Titanic – by Me [demo] [download]
• Fabric – by James [demo] [download]
• Foundation Base – by Petskratt [demo] [download]

Feel free to post your creations with the Responsive Base child theme in the comments, or if you think of anything to add, shoot me a pull request on GitHub. :)

Update: Now made to comply to with Idiomatic-CSS guidelines and also added a style.scss file for a basic SASS structure which also follows the guidelines. If you don’t use SASS, just delete the style.scss file.

Update: Now works with the Thematic HTML5 Plugin by Karin at invistruct.com.

The post Responsive Base, a child theme for Thematic appeared first on Scott Nix.

Thematic will still insert the #comments ID on two different sections postfooter_postcomments and postfooter_postconnect of your child theme, but the ID will no longer exists with the Disqus plugin installed. You will need to modify the php on both to change the ID in the link from #comments to #disqus_thread to provide a correct jump to location on the pages for people clicking on a link to leave comments.

Disqus is a great cheater way to install a nice looking comment system (with features) and not have to spend a ton of time styling the comments section, which can be a pain for a novice. So consider these two different snippet options for using Disqus on a Thematic child theme the ultimate cheat. Just insert one of the below methods in the functions.php of your child theme.

Thematic Option 1

This version removes the postfooter_postconnect completely, it isn’t really needed. With that gone, postfooter_postcomments just needs an override with the correct ID’s and done.

// override existing and kill the postconnect from single pages, unecessary baggage
function childtheme_override_postfooter() {
	global $id, $post;
	if ($post->post_type == 'page' && current_user_can('edit_posts')) { /* For logged-in "page" search results */
		$postfooter = '<div class="entry-utility">' . thematic_postfooter_posteditlink();
		$postfooter .= "</div><!-- .entry-utility -->\n";
	} elseif ($post->post_type == 'page') { /* For logged-out "page" search results */
		$postfooter = '';
	} else {
		if (is_single()) {
			$postfooter = '<div class="entry-utility">' . thematic_postfooter_postcategory() . thematic_postfooter_posttags();
		} else {
			$postfooter = '<div class="entry-utility">' . thematic_postfooter_postcategory() . thematic_postfooter_posttags() . thematic_postfooter_postcomments();
		}
		$postfooter .= "</div><!-- .entry-utility -->\n";
	}
	echo apply_filters( 'thematic_postfooter', $postfooter );
}

// override existing and change #comments to #disqus_thread to provide correct jump location.
function childtheme_override_postfooter_postcomments() {
	if (comments_open()) {
		$postcommentnumber = get_comments_number();
	    if ($postcommentnumber > '1') {
			$postcomments = ' <span class="comments-link"><a href="' . apply_filters('the_permalink', get_permalink()) . '#disqus_thread" title="' . __('Comment on ', 'thematic') . the_title_attribute('echo=0') . '">';
			$postcomments .= get_comments_number() . __(' Comments', 'thematic') . '</a></span>';
	    } elseif ($postcommentnumber == '1') {
			$postcomments = ' <span class="comments-link"><a href="' . apply_filters('the_permalink', get_permalink()) . '#disqus_thread" title="' . __('Comment on ', 'thematic') . the_title_attribute('echo=0') . '">';
			$postcomments .= get_comments_number() . __(' Comment', 'thematic') . '</a></span>';
	    } elseif ($postcommentnumber == '0') {
			$postcomments = ' <span class="comments-link"><a href="' . apply_filters('the_permalink', get_permalink()) . '#disqus_thread" title="' . __('Comment on ', 'thematic') . the_title_attribute('echo=0') . '">';
			$postcomments .= __('Leave a comment', 'thematic') . '</a></span>';
	    }
	} else {
		$postcomments = ' <span class="comments-link comments-closed-link">' . __('Comments closed', 'thematic') .'</span>';
	}
	// Display edit link
	if (current_user_can('edit_posts')) {
		$postcomments .= ' <span class="meta-sep meta-sep-edit">|</span> ' . thematic_postfooter_posteditlink();
	}
	return apply_filters('thematic_postfooter_postcomments',$postcomments);
}

Thematic Option 2

This version removes the postfooter_postconnect completely also, but the example also moves the author from the post header to the post footer along with fixing the ID. I am only including this one based on that the last 3 sites I have done all had no author, or had it moved below to the post footer.

// move author from postheader to postfooter, removed post edit also, appears in postfooter also.
function childtheme_override_postheader_postmeta() {
	$postmeta = '<div class="entry-meta">';
	$postmeta .= thematic_postmeta_entrydate();
	$postmeta .= "</div><!-- .entry-meta -->\n";

	return apply_filters('thematic_postheader_postmeta',$postmeta);

}

// add author into the footer entry-utility instead, also kill the post_connect
function childtheme_override_postfooter() {
	global $id, $post;
	if ($post->post_type == 'page' && current_user_can('edit_posts')) { /* For logged-in "page" search results */
		$postfooter = '<div class="entry-utility">' . thematic_postfooter_posteditlink();
		$postfooter .= "</div><!-- .entry-utility -->\n";
	} elseif ($post->post_type == 'page') { /* For logged-out "page" search results */
		$postfooter = '';
	} else {
		if (is_single()) {
			$postfooter = '<div class="entry-utility">' . thematic_postmeta_authorlink() . ' <span class="meta-sep meta-sep-author"> | </span>' . thematic_postfooter_postcategory() . thematic_postfooter_posttags();
		} else {
			$postfooter = '<div class="entry-utility">' . thematic_postmeta_authorlink() . ' <span class="meta-sep meta-sep-author"> | </span>' . thematic_postfooter_postcategory() . thematic_postfooter_posttags() . thematic_postfooter_postcomments();
		}
		$postfooter .= "</div><!-- .entry-utility -->\n";
	}
	echo apply_filters( 'thematic_postfooter', $postfooter );
}

// override existing and change #comments to #disqus_thread to provide correct jump location.
function childtheme_override_postfooter_postcomments() {
	if (comments_open()) {
		$postcommentnumber = get_comments_number();
	    if ($postcommentnumber > '1') {
			$postcomments = ' <span class="comments-link"><a href="' . apply_filters('the_permalink', get_permalink()) . '#disqus_thread" title="' . __('Comment on ', 'thematic') . the_title_attribute('echo=0') . '">';
			$postcomments .= get_comments_number() . __(' Comments', 'thematic') . '</a></span>';
	    } elseif ($postcommentnumber == '1') {
			$postcomments = ' <span class="comments-link"><a href="' . apply_filters('the_permalink', get_permalink()) . '#disqus_thread" title="' . __('Comment on ', 'thematic') . the_title_attribute('echo=0') . '">';
			$postcomments .= get_comments_number() . __(' Comment', 'thematic') . '</a></span>';
	    } elseif ($postcommentnumber == '0') {
			$postcomments = ' <span class="comments-link"><a href="' . apply_filters('the_permalink', get_permalink()) . '#disqus_thread" title="' . __('Comment on ', 'thematic') . the_title_attribute('echo=0') . '">';
			$postcomments .= __('Leave a comment', 'thematic') . '</a></span>';
	    }
	} else {
		$postcomments = ' <span class="comments-link comments-closed-link">' . __('Comments closed', 'thematic') .'</span>';
	}
	// Display edit link
	if (current_user_can('edit_posts')) {
		$postcomments .= ' <span class="meta-sep meta-sep-edit">|</span> ' . thematic_postfooter_posteditlink();
	}
	return apply_filters('thematic_postfooter_postcomments',$postcomments);
}

The post Disqus Comments and Thematic appeared first on Scott Nix.