Search

I have been looking for a means of rapidly developing interactive prototypes for our site designs at Domain7. So I have been building a library of commonly used HTML elements, combining these with CSS for typography and layout, and adding some basic effects available from popular JavaScript libraries. (I've only just started to play with jQuery and Mootools in the last few days, but settled on Mootools for the included effects only because the effects I was able to produce were closer to what I had in mind.)

Three templates are available:

  • 960 pixel fixed width
  • 12-column fluid width
  • 16-column fluid width

These templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the Mootools JavaScript library. The idea for building these templates was inspired by Andy Clarke, author of Transcending CSS, who advocates a content-out approach to rapid interactive prototyping, crediting Jason Santa Maria with the grey box methodology.

These templates are offered free of charge in accordance with the applicable licenses for 960 Grid System and Mootools.

  • The Fluid Grid System is released under the GPL/MIT Licenses
  • 960 Grid System is released under the GPL/MIT Licenses
  • Mootools is released under the MIT License

Fluid 960 Grid System on GitHub

Clone a local repository of the Fluid 960 Grid System from GitHub: http://github.com/bauhouse/fluid960gs/tree

Symphony Fluid 960 Grid System Ensemble on GitHub

Clone a local repository of the Fluid 960 Grid System from GitHub: http://github.com/bauhouse/sym-fluid960gs/tree

Attachments:
fluid960gs-1.0.5.zip

One bug I'm already aware of is the problem that occurs when closing the Accordian box, then opening it and trying to use the accordian feature. The JavaScript is forcing a fixed height on the element and it is not properly resizing. My JavaScript skills are fairly minimal, so if anyone knows how to fix this, please let me know. Thanks.

Ah Andy Clarke, I know him, very nice fella.

Andy writes a good book, too. One that has inspired me to build a front end ensemble for Symphony that takes a modular approach to building a site. This meant finding a flexible way to build layouts. Nathan Smith provided a good starting point.

How do you know Andy?

He called me up one day, he lives around 30 minutes away, anyway he was looking for standard based designers in the area, and he said I was one of the only one he could find that he would recommend. So we met at Starbucks, and chatted design. He's very cool, and is incredibly knowledgeble on CSS. If he doesn't know it, its not worth knowing.

Cool. Good to have such a great resource so close by. I've always been impressed by Andy's work and I'm very impressed with his book. Unfortunately, I'm half a world away, so I'll have to settle for pouring over a book rather than chatting over coffee.

Where are you based?

Its ok, I found your site. Nice. You look like Val Kilmer, if you don't mind me saying. :)

Anyway back to topic, don't want to get told off.

Interested in this 16 col grid, seems very extreme. But I like extremes.

I've posted some live demos after discovering my long neglected domain has been home to comment spammers and forum abusers. So I tore it all down and put this up instead:

www.designinfluences.com/fluid960gs/

That should help you understand a little better what this is about. I have been focusing solely on admin interfaces for the ensembles that I have been working on. It seemed time to start building a way of managing the front end in an elegant way. The next step will be to build some Symphony ensembles that use this grid system to showcase Symphony's features.

Version 1.0.1: Updated the files with content to match what I have posted on the demo site, plus a little CSS to style links for the site information (footer) element.

Wow Stephen! This is awesome! Thanks for sharing!

Glad to be able to contribute. I hope it helps.

Nice! I've had good results using Blueprint. I'll have to check out Fluid 960 closer.

Oh, and Andy Clark's book rocks. I wish I knew him!

If one changes the secondary menu at the top right to include longer titles for the links, it makes the window resize.

I do like the idea a lot though. I have not heard of this grid system before and it seems to be something that I should probably begin to use as a framework for creating new sites. I'm going to mess around with it a lot over the next few days while at work.

Michael, hope you've had some fun messing around with the grid system. I haven't had a chance to look at the issue with the secondary menu. I have some issues of my own with this. I have set an arbitrary width for the list items based on the longest text, using ems. That way, if text is resized, the width resizes accordingly. You may want to override this width. I believe this is set at about line 106 in nav.css:

ul.main li ul li a {
  width:12em;
  line-height:2em;
  height:2em;
  text-align:left;
  color:#fff;
  border-top:1px solid #444;
  background:#444;
}

Change the width to whatever you need. That may or may not help. Ideally, though, I want the list items to drop down to align right edges with the right edge of the parent li. I haven't figured out how to do that just yet. If you have any ideas, let me know.

Fluid 960 Grid System 1.0.2

I've updated the Fluid 960 Grid System to fix an issue I was having with using an external JS file for the Mootools accordion effect. The solution? Change the spelling of accordian to accordion. So if anyone was wondering why the accordion code was the only JS not referenced as an external file, it's as simple as not being able to spell.

That realization also helped to add another accordion effect for the section menu, included in this update.

Edit: The live demo has been updated as well: http://www.designinfluences.com/fluid960gs/

Attachments

I'd like to hear some experences with other css frameworks like tripoli and such... Recently found this believe its quite like the 960 grid system here.... And does it finally open the possibility to have xslt dynamically change external css files? beyond just dynamic classes?....

Stephen, I was already a fan of Nathan's 960 grid system but your implementation of it is great. Thanks for making all this available. Like newnomad above I've also been playing with Anthony Short's Cacheer plugin which is also really interesting. I love the way you have incorporated Mootools but I just wondered which version of Mootools you included. There doesn't seem to be a version number. I am guessing 1.11. Except I am struggling to incorporate a slideshow which already works with Mootools 1.11. It just doesn't play nicely with your accordion etc. Which is strange. If anybody can point the way to the light I'd be grateful. Thanks

Glad you're having some fun with this. I'll have to take a look Shaun Inman's CSS Cacheer and Anthony's take on it. Regarding the JavaScript, yet, it is Mootools 1.11. I'm not sure what might be causing the compatibility problem with the accordion feature. I'm a noob when it comes to JavaScript.

Create an account or sign in to comment.

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.3-5.6 or 7.0-7.3
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.5 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details