JOY!

Responsive CSS Preprocessor

JOY! Responsive CSS Preprocessor

Basic Use Introduction

Outlined in this section are a series of examples, instructions and rules to using the responsive css preprocessor. The concept is fairly simple to grasp and you’ll soon be having your own moments of JOY!

We appologize to those of you who are not familiar with fluid grid design concepts. This website does not cover these techniques in any detail, we assume you know what you're doing and understand the methods behind the concept.

CSS Formating

It is important that all CSS put through the preprocessor maintain a clean and even structure. Missing opening/closing curly braces (“{“, “}”) may result as a bug in your CSS file. This is why it’s important to validate your CSS before running it through the responsive preprocessor.

  1. Declarations must start with "{" and end with "}".
  2. Every property value must end with ";".

Correct CSS Formating

            /* CSS Document */
            
            .some-class {
                width:100px;
                padding:20px 30px;
            }	
            

Incorrect CSS Formatting

            /* CSS Document */
            
            .some-class { width:100px; padding:20px 30px }	
            

Multiple Declarations

Multiple declarations for a set of properties must be written on one line. You may write them on separate lines, it will not affect the outcome of the CSS but the preprocessor will output extraneous information that may make your stylesheet cluttered with comments.

Correct Multiple Declarations

            /* CSS Document */
            
            .some-class, .another-class, .yet-another-class { 
            	width:100px;
                padding:20px 30px;
            }	
            

Incorrect Multiple Declarations

            /* CSS Document */
            
            .some-class,
            .another-class,
            .yet-another-class { 
            	width:100px;
                padding:20px 30px;
            }	
            

Accessing the JOY! Preprocessor

As much joy as the preprocessor will give you it does require that you give it a few hints about what you’d like to convert and what context you’d like the values converted in.

  1. Let the preprocessor know what declarations you want preprocessed by entering a css comment /*@joy immediately after the open declaration curly brace {.
  2. Give the declaration context /*@joy(960, 16)*/ and close the comment. The first parameter is the width context, the second is optional and refers to font-size.
  3. If no font-size parameter is set the font-size will default to 16px.
  4. You must set a width context. If no context is desired, use "1".
  5. Note: see supported CSS Properties. Use only pixel (px), ems (em) or percent (%) values.
  6. Property values set in percent (%) or ems (em) values are ignored by the preprocessor and left as they appear in the stylesheet.
            /* CSS Document */
			
            /* Preprecessor key breakdown */
            /*@joy(context width, font size)*/
            
            #sidebar { /*@joy(960)*/
                width:320px;
                font-size:12px;
            }
            
            .title { /*@joy(1, 18)*/
            	font-size:24px;
            }
            

JOY! Responsive CSS Preprocessor Output

We’ll show you a before and after of the CSS we’ve put through the preprocessor. CSS properties that are currently not supported will be ignored. The preprocessor will then comment the original value of the property before the calculation and output the context to which it was calculated, as well as, font size context.

If you choose to preprocess your stylesheet with “Get Less JOY!” the “line” comment directly after the open curly brace refers to the original context in your stylesheet before preprocessing.

            /* CSS Document Before Preprocessor */
			
            #sidebar { /*@joy(960)*/
                width:320px;
                font-size:12px;
            }
            
            .title { /*@joy(1, 18)*/
            	font-size:24px;
            }
            
            #footer {
            	text-align:center;
            }
            
            
            /* CSS Document After Preprocessor (Get Less JOY!) */
            
            #sidebar { /* line: 15,  context: 960px, 16px */
                width: 33.333333333%; 	/* 320px */
                font-size: 0.75em; 	/* 12px */
            }
            
            .title { /* line: 45,  context: 1, 18px */
            	font-size: 1.5em; 	/* 24px */
            }
            

That’s all there is to it. Check out supported css properties for more information regarding how JOY! works. Basic JOY! development demos have also been made available so you can see JOY! in action.