JOY!

Responsive CSS Preprocessor

JOY! Demos

Examples and Best Practices

First time using the JOY! Responsive CSS Preprocessor? If you’re a seasoned veteran feel free to “move along”. If this is new to you, we’ve put together a series of informative tips to help you stay in control and in the know of what’s what. You’ll also find a real example of a demo site developed using JOY!.

Best Practices

Since you’ve read this far it’s safe to assume you’re new to this. Here are some best practices too help keep you organized:

  1. Start by building your core/base layout and always define your context in progression. Be sure to test periodically to make sure you’re doing the right thing and that you get the expected result.
  2. Always code your CSS using pixel (px) or percent (%) values regardless of the CSS property you are defining. The preprocessor will ignore percent (%) and ems (em) values, if you’re setting a percentage or ems, be sure it's exactly what you want.
  3. Know your context. Be perceptive of the context you set. The wrong context will cause an undesired result (see best practice “1”).
  4. If you’re using the input method by entering a CSS URI use an absolute path “http://”. Need a simple quick conversion? Use the “Paste Method”.
  5. If you place @media properties in your stylesheet use “Get More JOY!” to have the preprocessor maintain those calls in their correct order.
  6. It’s best to maintain your original stylesheet and either link the new stylesheet at the end of head tag to override existing styles or simply swap stylesheets. Never replace your original stylesheet with the provided output.

Working Demo

Stylesheet Before Preprocessing

Here is our original stylesheet before we ran it through the preprocessor (see Best Practices). Not sure how it works? See Basic Use

                .clearfix:after {
                    content:".";
                    height:0;
                    visibility:hidden;
                    display:block;
                    clear:both;
                }
                
                body { 
                    font-family:Arial, Helvetica, sans-serif;
                    font-size:100%;
                    color:rgb(255, 255, 255);
                }
                
                #demo-nav {
                    width:960px;
                    margin:0 auto;
                }
                
                #demo-nav ul {
                    float:right;
                    margin-top:20px;
                }
                
                #demo-nav li {
                    float:left;
                    margin-left:10px
                }
                
                #demo-nav li a {
                    display:block;
                    padding:10px 20px;
                    background-color:rgb(220, 220, 220);
                    color:#FFF;
                }
                
                #demo-nav a:link, #demo-nav a:visited {
                    text-decoration:none;	
                }
                
                #demo-nav a:hover, #demo-nav a:active {
                    background-color:rgb(244, 12, 144);	
                }
                
                .wrap { /*@joy(960)*/
                    width:960px;
                    padding:10px;
                    margin:40px auto 0;
                    background-color:rgb(102,102,102);
                    box-sizing:border-box;
                }
                
                .header { /*@joy(960)*/
                    padding:0 10px 10px;	
                }
                
                .main { /*@joy(940)*/
                    float:left;
                    width:630px;
                    padding:10px;
                    background-color:rgb(153,153,153);
                    box-sizing:border-box;
                }
                
                .main h2 { /*@joy(610)*/
                    background-color:rgb(244, 12, 144);
                    box-sizing:border-box;
                    padding:10px;
                    margin-bottom:10px;
                }
                
                .main .col { /*@joy(610)*/
                    float:left;
                    width:305px;
                    padding:10px 10px;
                    box-sizing:border-box;
                }
                
                .sidebar { /*@joy(940)*/
                    float:right;
                    width:310px;
                    padding:10px;
                    background-color:rgb(204,204,204);
                    box-sizing:border-box;
                }
                
                .sidebar h2 { /*@joy(290)*/
                    background-color:#F40C90;
                    box-sizing:border-box;
                    padding:10px;
                    margin-bottom:10px;
                }
                
                .sidebar .col { /*@joy(290)*/
                    width:290px;
                    padding:10px;
                    box-sizing:border-box;
                }
                
                .col {
                    background-color:rgb(220, 220, 220);
                }
                
                .footer { /*@joy(960)*/
                    font-size:11px;
                    padding:10px 10px 0;
                    clear:both;
                }               
                

Our working HTML Code

We've used used Eric Meyer's Reset CSS Tool to clear any default styling on our html.

Running Our CSS Through the Preprocessor

Once your CSS and layout are establised, tested, and validated (recommended). We run the file through the JOY! Responsive CSS Preprocessor. We'll be preprocessing using Less JOY! and then append the file to our head tag.

Feel free to use any conversion method (less or more) depending on how you want to deal with the preprocessed file.

Please leave the attribution at the top of your preprocessed CSS, this complies with our Terms of Use

            /**
            * JOY! Responsive CSS Preprocessor
            * Version: 1.5 - 03/10/2013
            * Author URI: http://www.joyresponsivecss.com
            *
            * Copyright (c) 2013 "Think Us Design" Lior Bar-David
            * Creative Commons Attribution-NoDerivs 3.0 Unported License
            * http://creativecommons.org/licenses/by-nd/3.0/deed.en_US
            *
            * Preprocessed: Responsive CSS Properties Only (Get Less JOY!)
            * Responsive CSS Quick Convert from: 
            * file:///url_to_/your_css/file.css
            *
            * Thank you for preprocessing your CSS with us!
            * Please leave this attribution to comply with terms of use.
            */
            
            #demo-nav { /* added manually */
                width:90%;
            }
            
            .wrap { /* line: 7,  context: 960px, 16px */ 
                width: 90%; 	/* 960px set manually to 90% */
                padding: 0.625em; 	/* 10px */
                margin: 2.5em auto 0;	/* 40px auto 0 */
                background-color:rgb(102,102,102);
                box-sizing:border-box;
            }
            
            .header { /* line: 15,  context: 960px, 16px */ 
                padding: 0 1.041666667% 0.625em;	/* 0 10px 10px;	 */
            }
            
            .main { /* line: 19,  context: 940px, 16px */ 
                float:left;
                width: 67.021276596%; 	/* 630px */
                padding: 0.625em; 	/* 10px */
                background-color:rgb(153,153,153);
                box-sizing:border-box;
            }
            
            .main h2 { /* line: 27,  context: 610px, 16px */ 
                background-color:rgb(244, 12, 144);
                box-sizing:border-box;
                padding: 0.625em; 	/* 10px */
                margin-bottom: 0.625em; 	/* 10px */
            }
            
            .main .col { /* line: 34,  context: 610px, 16px */ 
                float:left;
                width: 50%; 	/* 305px */
                padding: 0.625em 1.639344262%;	/* 10px 10px */
                box-sizing:border-box;
            }
            
            .sidebar { /* line: 41,  context: 940px, 16px */ 
                float:right;
                width: 32.978723404%; 	/* 310px */
                padding: 0.625em; 	/* 10px */
                background-color:rgb(204,204,204);
                box-sizing:border-box;
            }
            
            .sidebar h2 { /* line: 49,  context: 290px, 16px */ 
                background-color:#F40C90;
                box-sizing:border-box;
                padding: 0.625em; 	/* 10px */
                margin-bottom: 0.625em; 	/* 10px */
            }
            
            .sidebar .col { /* line: 56,  context: 290px, 16px */ 
                width: 100%; 	/* 290px */
                padding: 0.625em; 	/* 10px */
                box-sizing:border-box;
            }
            
            
            .footer { /* line: 66,  context: 960px, 16px */ 
                font-size: 0.6875em; 	/* 11px */
                padding: 0.625em 1.041666667% 0;	/* 10px 10px 0 */
                clear:both;
            }
            

...and we're done! You can download this demo or view a live example.