«Dynamic CSS layouts in 5 minutes»

uli · 2008-06-09 21:43:06

Today I found an interesting article introducing a CSS grid technique based upon a CSS oriented script by Shaun Inman. From the introduction of the first mentioned article:

CSS Cacheer by Shaun Inman, is a script that intercepts requests made to CSS files on the server, processes the CSS, then caches it. This enables us to use constants, compressors and even a dynamic grid. The grid is a plugin I wrote that enables users to define a grid within your css. You’ll never need a grid.css again. This is a tutorial to show you how to use it.

Apart from that it all seems really easy when it is running, I unfortunately can’t get it to work on my MAMP, and this is not a TXP plugin. Does anybody know this script and has it running?
Is this in the end convertible into a TXP plugin? I mean, layout grids in minutes … could come in handy sometimes!

anthonyshort · 2008-06-09 22:35:44

I could probably help you out :)

The two main problems people usually have in getting Shaun Inmans Cacheer to work are the .htaccess files and permissions.

1. You need to make sure you take the .htaccess file from the downloaded zip. So in the first folder there is
/css-cacheer
css-cacher.php
.htaccess

2. The /css-cacheer/cache folder needs to be CHMOD 777 – that is, it needs to be writable by the script.

Other than that it’s usually just a drag and drop affair.

Let me know how it goes :)

Last edited by anthonyshort (2008-06-09 22:36:14)

uli · 2008-06-10 00:20:02

Hi Anthony,

thanks for your offer, it’s much appreciated!
Unfortunately I haven’t got it running yet, though I’ve had everything set up already as you noted down. Screenshots and some detail would help you diagnose, but we’ve got past 2am here, I have to come back to you tomorrow :)

Thanks again!
Uli

uli · 2008-06-10 09:48:27

Hi Anthony,
I’m not sure what exactly isn’t working, the script, the css, wrong browser? In SAF2 I get the following results:

.

Edit: Here’s a screenshot of what it should look like:

Last edited by uli (2008-06-10 09:53:19)

anthonyshort · 2008-06-10 14:29:18

Make sure the ‘columns’ property appears first on every element. Currently, the script parses everything after that property simply so it doesn’t have to scan every selector/property in the CSS.

It appears that SOME of the styles are working. Just not the actual columns. If you have Firefox with the Firebug extension, looks at the CSS of the page (or just open up the cache file), and see what the selectors look like.

Make sure you’ve got the grid settings in your css as well.

@grid {
grid-width: 966;
gutter-width: 18;
column-count: 24;
}

If this doesn’t fix it. Post up your master.css. Its only about 10 or so lines anyway depending on how you write it.

uli · 2008-06-10 16:20:10

Make sure you’ve got the grid settings in your css as well.

You mean if these [at]grid {grid-width: 966; etc ...} appear? Nope, not contained in Firebug. I seem to have made the necessary style assignments, though. Stylesheet looks like so:

@server import url(base.css);
@grid { 
	column-count: 24; 
	gutter-width: 18; 
	grid-width: 966; 
	}
.container div { 
	background: #eee; 
	margin-bottom: grid(gutter); 
	}
#header { 
	columns: 24; 
	height: 75px; 
	}
#promo { 
	columns: 24; 
	height: 300px; 
	}
#info-1 {
	columns: 8; 
	height: 300px; 
	border-right: 2px solid #eee; 
	padding: 0 18px 0 0; 
	}
#info-2 { 
	columns: 8; 
	height: 300px; 
	}
#info-3 { 
	columns: 8; 
	height: 280px; 
	padding: 10px; 
	margin-right: 0; 
	}

anthonyshort · 2008-06-10 23:59:40

It looks like it should be working. It seems to be getting everything except the width. I’m honestly lost :)

If you’re running it on localhost, go to http://localhost/css/master.css. You should see the compressed css. Up the top it lists the plugins that are working. You can also check and see if ‘columns:’ is being replaced and if Grid is enabled.

You may have found a good bug though! If all else fails, post up your zip and ill have a close look.

uli · 2008-06-11 00:21:45

If you’re running it on localhost, go to http://localhost/css/master.css

Anthony, I’ve already posted the contents of master.css above. Do you mean something else?

anthonyshort · 2008-06-11 00:44:13

http://localhost/css/master.css will show the outputted/processed css. CSS Cacheer will intercept it and process it before it displays. So you’ll be able to see if its replacing properties correctly. If you enable the pretty plugin, its nice and easy to read as well.

It should be replacing the grid settings, column properties and grid() constants.

uli · 2008-06-11 21:36:18

Success! (You’ve got mail.)

Textpattern CMS

Textpattern CMS support forum

#1 2008-06-09 21:43:06

«Dynamic CSS layouts in 5 minutes»

#2 2008-06-09 22:35:44

Re: «Dynamic CSS layouts in 5 minutes»

#3 2008-06-10 00:20:02

Re: «Dynamic CSS layouts in 5 minutes»

#4 2008-06-10 09:48:27

Re: «Dynamic CSS layouts in 5 minutes»

#5 2008-06-10 14:29:18

Re: «Dynamic CSS layouts in 5 minutes»

#6 2008-06-10 16:20:10

Re: «Dynamic CSS layouts in 5 minutes»

#7 2008-06-10 23:59:40

Re: «Dynamic CSS layouts in 5 minutes»

#8 2008-06-11 00:21:45

Re: «Dynamic CSS layouts in 5 minutes»

#9 2008-06-11 00:44:13

Re: «Dynamic CSS layouts in 5 minutes»

#10 2008-06-11 21:36:18

Re: «Dynamic CSS layouts in 5 minutes»

Board footer