CSS | Michael Hartmayer

Posts Tagged ‘CSS’

960gs Margin Mod July 23rd, 2009

Michael Hartmayer

Lately I’ve been working with the marvelously easy to use and understand CSS framework, 960 Grid System. After getting started with it, I very quickly noticed that, while easy and efficient, it has a flaw. You absolutely can NOT extend your elements to end after a margin, touching the next grid element. And so, one becomes effectively shackled to having margins between any horizontally placed grid elements.

Here’s a quick Mod that I wrote that will allow you to negate that problem, without modifying the 960gs CSS itself. Also, it is important to note, that while this does allow you to push your grid class over the margin, you still can’t pull the next element back. Still, another mod could be written using the same flavor to accomplish that as well.

So, without further adieu, here it is:

960.overExtend.css

/*
 
Modifies the 960gs to allow elements to carry over
into the margins, so that they may snugly touch
the next grid over. Simply use the appropriate grid,
as you normally would, and then attach the additional
overExtend class to it, to make it over extend into
the margin. 
 
Example:
 
<div id="myContainer" class="grid_5 grid_5_overExtend">
...
</div>
 
*/
 
/* Margin Mod 12 Col */
.container_12 .grid_1_overExtend { width:80px !important; margin-right:-10px !important; }
.container_12 .grid_2_overExtend { width:160px !important; margin-right:-10px !important; }
.container_12 .grid_3_overExtend { width:240px !important; margin-right:-10px !important; }
.container_12 .grid_4_overExtend { width:320px !important; margin-right:-10px !important; }
.container_12 .grid_5_overExtend { width:400px !important; margin-right:-10px !important; }
.container_12 .grid_6_overExtend { width:480px !important; margin-right:-10px !important; }
.container_12 .grid_7_overExtend { width:560px !important; margin-right:-10px !important; }
.container_12 .grid_8_overExtend { width:640px !important; margin-right:-10px !important; }
.container_12 .grid_9_overExtend { width:720px !important; margin-right:-10px !important; }
.container_12 .grid_10_overExtend { width:800px !important; margin-right:-10px !important; }
.container_12 .grid_11_overExtend { width:880px !important; margin-right:-10px !important; }
 
/* Margin Mod 16 Col */
.container_16 .grid_1_overExtend { width:60px !important; margin-right:-10px !important; }
.container_16 .grid_2_overExtend { width:120px !important; margin-right:-10px !important; }
.container_16 .grid_3_overExtend { width:180px !important; margin-right:-10px !important; }
.container_16 .grid_4_overExtend { width:240px !important; margin-right:-10px !important; }
.container_16 .grid_5_overExtend { width:300px !important; margin-right:-10px !important; }
.container_16 .grid_6_overExtend { width:360px !important; margin-right:-10px !important; }
.container_16 .grid_7_overExtend { width:420px !important; margin-right:-10px !important; }
.container_16 .grid_8_overExtend { width:480px !important; margin-right:-10px !important; }
.container_16 .grid_9_overExtend { width:540px !important; margin-right:-10px !important; }
.container_16 .grid_10_overExtend { width:600px !important; margin-right:-10px !important; }
.container_16 .grid_11_overExtend { width:660px !important; margin-right:-10px !important; }
.container_16 .grid_12_overExtend { width:720px !important; margin-right:-10px !important; }
.container_16 .grid_13_overExtend { width:780px !important; margin-right:-10px !important; }
.container_16 .grid_14_overExtend { width:840px !important; margin-right:-10px !important; }
.container_16 .grid_15_overExtend { width:900px !important; margin-right:-10px !important; }

Share and Enjoy:

No Comments »

PHP LoadScript Class June 27th, 2009

Michael Hartmayer

This is a really handy class I wrote that loads all your scripts Server Side so that when your page loads there aren’t so many HTTP Requests. Useful if you’re trying to load 6 different js files and 4 different style sheets, or whatever. That’s 10 requests, completely gone. Just keep in mind that it dumps all your files straight into the html document- so, as long as you don’t have a problem with that, this is a great tool.

In addition, it’s really easy to add your own script types. Check out the script for details.

( Available At: PasteBin: LoadScript Class )

Usage:

<?php
   # Include Class
   include_once('class.scriptloader.php');
 
   # Instantiate
   $jsLoader = new ScriptLoader('JS');
 
   # Add Scripts
   $jsLoader->addScript('my-javascript.js');
   $jsLoader->addScript('jquery.js');
   $jsLoader->addScript('other-scripts.js');
 
   # Dump into Document
   $jsLoader->echoScripts();
?>

On a quick note, it’d probably be a lot ‘neater’ to mod-rewrite a php file to handle at least one request per script type. That way it doesn’t all get dumped straight into the page.

Something like:

RewriteRule ^script\.(.*)$ script-loader.php?type=$1 [L]

And for script-loader.php

<?php
   switch($_GET['type']) {
      case 'js':
         // Load all of the JavaScript files here
         break;
   }
?>

That way when you load something like script.js it will dump all of your java scripts into a ‘fake’ file. Just make sure to use the default $ScriptLoader->type (don’t set one when instantiating) if you are loading it from a src=”foo.bar”.

.. or something like that xD

Share and Enjoy:

No Comments »

Michael Hartmayer – Portfolio

Posts Tagged ‘CSS’

960gs Margin Mod July 23rd, 2009

PHP LoadScript Class June 27th, 2009

Categories

Archives