Fat Folder Design | CSS

November 4, 2011July 31, 2014

Better flexible site layout with resize detection.

This is an update to a previous post located here: Flexible site layout with resize detection.

A while back I posted an article about a simple and quick javascript that would add or remove styles to whatever elements you want based on window width. This is a great way to make a single site compatible with multiple display types, everything from a phone to a desktop with an unreasonable large screen if you’d like. That code used an if statement, and was rather ineffective, I have since rewritten it to be easier to deploy to new themes and came up with this.

var sizeable = 'body,#master,#content,#posts,#sidebar,#footer,#comments';
var sizes = {'450':'phone','750':'tablet','1000':'desktop'};
$(document).ready(function(){
       $(window).resize();
});
$(window).resize(function(classes){
       $.each(sizes,function(k,v){
               var w = parseInt($(window).width());
               if(w>=k){
                       $(sizeable).removeClass().addClass(v);
               }
       });
});

var sizeable = 'body,#master,#content,#posts,#sidebar,#footer,#comments';

var sizes = {'450':'phone','750':'tablet','1000':'desktop'};

$(document).ready(function(){

$(window).resize();

});

$(window).resize(function(classes){

$.each(sizes,function(k,v){

var w = parseInt($(window).width());

if(w>=k){

$(sizeable).removeClass().addClass(v);

}

});

Snipplr: http://snipplr.com/view/60562/flexible-site-layout-with-resize-detection-now-improved/

Short, more concise, and easier to implement all you do is create an object with a simple {width: ‘style name’} format and the script will do the rest. It’s then up to you do add all the appropriate styles to your CSS document. This can of course all be done with CSS and the @media tag, but I prefer this method because it simple to deploy and it’s switches are much faster. As always leave a comment with any question or problems and I’ll get back to you as soon as I can.

October 20, 2011July 31, 2014

Rageface Matching Game

I’ve been bugged about putting this online so I finally decided to. I made it during a period between contracts a long time ago, it’s a simple browser based card matching game. The subject being the ever popular Reddit rage faces, of course I actually regularly visited reddit back then.

http://fatfolderdesign.com/rageface_matching_game/

The game has an added troll mode which is explained once you beat it, it simply allows you to send someone a plausible URL that will leave them unable to complete the game, whenever a match appears, el senor troll face will ruin their day.

Usually I’d talk about how it’s made and works but this is an old bit of code and since it’s so singularly focuses I don’t think anybody will find it useful, if someone really does want to know then lave a comment and I’ll explain it.

October 10, 2011July 31, 2014

CSS Colorizer Update

I noticed a few quirks in the CSS colorizer, so I made an update. This will now grab any HEX color code in the same declaration, no matter where it is. That means that you can use it to change compact background with image styles or border colors. Also added a catch for the “transparent” keyword it’ll catch that as well. Code is below, snipplrs been updated.

<?php
require('../../../wp-load.php');
function colorize($m){
	// Your code to get the new colors, this is grabbing values stored by the wordpress theme's option page.
	$c=get_option('tc_'.$m[4]);
	$m[3] = $c;
	if($c!=''){
		return $c;
	}else{
		return $m[0];
	}
}
header("Content-type: text/css");
$css = file_get_contents('style.css');
$css = preg_replace('~/\*.*\*/|\n|\t|(?<=:)\s+|(?<={)\s+|(?<=})\s+|(?<=,)\s+|\s+(?=;)|\s+(?={)|\s+(?=})|\s+(?<=:)~sU','',preg_replace_callback('~((transparent|#[A-F0-9a-f]{6}))(?=(.)+(?=/\*#(.+)#\*/))~U','colorize',$css));
echo $css;
?>

<?php

require('../../../wp-load.php');

function colorize($m){

// Your code to get the new colors, this is grabbing values stored by the wordpress theme's option page.

$c=get_option('tc_'.$m[4]);

$m[3] = $c;

if($c!=''){

return $c;

}else{

return $m[0];

}

header("Content-type: text/css");

$css = file_get_contents('style.css');

$css = preg_replace('~/\*.*\*/|\n|\t|(?<=:)\s+|(?<={)\s+|(?<=})\s+|(?<=,)\s+|\s+(?=;)|\s+(?={)|\s+(?=})|\s+(?<=:)~sU','',preg_replace_callback('~((transparent|#[A-F0-9a-f]{6}))(?=(.)+(?=/\*#(.+)#\*/))~U','colorize',$css));

echo $css;

The changes only take place in the regular expressions, specifically the second one. Leave any new feedback in the comments and I’ll keep making changes as needed.