Categories
Random

Baby Under Construction

Tinkering with using CSS box shadows to create an image with 1 single HTML div element. This idea for what I created comes from a lazyweb request for the famous “Website Under Construction” GIF, but reproduced with just CSS.

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 SCSS

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. ;)

Categories
Posts

Clearfix Clarity

When helping other designers and developers who are learning, the same basic issues come up quite often. One question that always seems to come up is the dreaded Float Collapse. Simply, the parent element will collapse and have no height if the child elements are all floated. Most of the time it isn’t noticeable, although you will notice when you want a background image on the parent element to be visible.

Float Collapse Issue Image

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 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 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 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 something in the styling realm like 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.

How I clearfix now.

I will be the first to admit, I felt pretty stupid when I figured out 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 to the HTML structure.

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 in the actual HTML again. This same thing of not adding unnecessary classes applies to grid frameworks, in the same exact way, but that is another blog post.

Categories
Random

Panderbear

The Panderbear is obviously a play on the infamous internet meme Pedobear. The idea to convert the meme was conceived from watching presidential candidates pander to audiences they were speaking to.

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).

Categories
Posts

Titanic, a child theme for Thematic

The Titanic child theme is my last real attempt at creating a full fledged theme for the Thematic Theme Framework. This is the responsive child theme my site is currently built on, so technically you are looking at the demo right now. This is yet another theme built on my own Responsive Base which is a starter child theme for Thematic aimed at speeding up development times.

Titanic Responsive Theme Example Image

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.

Categories
Posts

Child’s Play, child theme for Thematic

Child’s Play is a child theme for the Thematic Theme Framework, it is built with the mobile-first approach to responsive web design, but with a few unique features. It was originally created as a stress test for the Responsive Base to find more improvements and make sure I wasn’t forgetting anything obvious. After adding new functionality and some styling to make it a little more visually impressive, the Child’s Play child theme was born.

Child's Play Responsive Theme Image

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.

Categories
Posts

Responsive Base, a child theme for Thematic

Update: Thematic 2.0 is now in beta and available on Github, which makes this theme outdated. You can still use it since Thematic is backwards compatible, but if you want to be up to date, use Thematic 2.0 from Github and Responsive Base Plus.

Responsive Base is a child theme built on the mobile-first approach to responsive web design. It was created not to just be responsive, but to act as a template or starting point for child theme development for the Thematic Theme Framework.

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.

Responsive Base Theme Image

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.

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, delete the style.scss file.

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