CSS Framework

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
ceilingfish

CSS Framework

Post by ceilingfish »

Don't know if anyone else has tried this but I have found the following a really pretty useful resource for creating compliant templates with suitably hacked css. It's here:

http://www.contentwithstyle.co.uk/Artic ... -framework

I have actually modified the installer for my version so that by default it loads the starting site with each of these templates, meaning I can show them various layouts really quickly.

Hope that helps someone.

Tom
alby

Re: CSS Framework

Post by alby »

Very useful :-)
westis

Re: CSS Framework

Post by westis »

Ceilingfish, that's a BRILLIANT article! And the one about Modular CSS on the same site is too: http://www.contentwithstyle.co.uk/Artic ... dular-css/

I'm thinking of using these methods to create a bunch of different, easily customizable templates (using only CSS, with the same HTML template for all of them) that either could be included with the CMSMS package and/or downloaded separately. Or perhaps someone else is keen on that? :-)

I would encourage anyone who knows a bit about CSS to read these two articles to get some very useful ideas about how to make a variety of very different template styles by only changing the CSS!

Thanks Ceilingfish, you've made me postpone things that I should have done tonight if I hadn't been inspired by these articles... ;-)
iNSiPiD

Re: CSS Framework

Post by iNSiPiD »

What would be utterly brilliant is if templates were rendered as images with placeholder text. I'm sure that gd could handle this.

That way when people were deciding which template to apply for a new page they wouldn't have to rely on names. Instead you could have a separate tab for templates and just click the appropriate thumbnail.

Is this do-able on-the-fly? Though I hate to use any MS app as an example, something like what PowerPoint prvides would be terrific.
iNSiPiD

Re: CSS Framework

Post by iNSiPiD »

This is really a very good project. I'd suggest adding a variety of these to the core templates/themes.

Google also does a surprisingly good job of translating the pages.

It'd be just great now if the CSS manager could display the CSS in a left frame and a preview window to the right so you could do semi-live tweaking and mods.
nils73
Power Poster
Power Poster
Posts: 520
Joined: Wed Sep 08, 2004 3:32 pm

Re: CSS Framework

Post by nils73 »

iNSiPiD wrote: This is really a very good project.
YAML is simply great. Okay, there are two reasons for this:

First, I speak German. ;)
Second: It is well done, but it has its glitches.
It'd be just great now if the CSS manager could display the CSS in a left frame and a preview window to the right so you could do semi-live tweaking and mods.
You could use Firefox and Web Developer Extension by Chris Pederick - edit CSS "insite" is then just a shortcut away. Within any website you are surfing. I wonder how I could ever live and work without Firefox and its extensions. ;)

Regards,
Nils
westis

Re: CSS Framework

Post by westis »

nils73 wrote: YAML is simply great. Okay, there are two reasons for this:

First, I speak German. ;)
Second: It is well done, but it has its glitches.
Actually, browsing the site with Google Translate is quite allright also. What are the glitches that YAML has?

We won't use this for the 0.12 default templates, but as there is a themes site in the making it would be really great if someone would like to make a CMSMS theme of YAML that other people can download.

:D
iNSiPiD

Re: CSS Framework

Post by iNSiPiD »

Firefox and Web Developer Extension
I do, I do! :) But it's not the same as having it built into the CMS.
...it would be really great if someone would like to make a CMSMS theme of YAML that other people can download.
If only I knew how! :D
westis

Re: CSS Framework

Post by westis »

...it would be really great if someone would like to make a CMSMS theme of YAML that other people can download.
If only I knew how! :D
It's easy. Just replace the menu with tag for the CMSMS menu to use. And replace the content with {content} and {content block="block1"} etc. Then attach the stylesheets to the template and that's about it. :D
nils73
Power Poster
Power Poster
Posts: 520
Joined: Wed Sep 08, 2004 3:32 pm

Re: CSS Framework

Post by nils73 »

Maybe I find some time to work on the YAML-template. The Viewpoint project I created is based on a modified version of YAML (version 1). Version 2 has some fixes but it isn't as flexible as I would like it to be. I will look into it the other day ...

Regards,
Nils
iNSiPiD

Re: CSS Framework

Post by iNSiPiD »

Yes, Patricia. That's where I got the idea from originally and also the Developer's Toolbar for FF.

Very handy.
User avatar
kermit
Power Poster
Power Poster
Posts: 693
Joined: Thu Jan 26, 2006 11:46 am

Re: CSS Framework

Post by kermit »

if someone bases things off of yaml, be careful not to incorporate yaml examples in material that's distributed with cms made simple because yaml is cc licensed and those licenses are not gpl compatible.

ref: http://www.fsf.org/licensing/licenses/i ... erLicenses

you can use the documentation to learn, but using the examples provided are definately a licensing headache waiting to happen. templates using yaml code can still most certainly be made available for separate download, just not bundled with cms made simple; unless the project gets specific permission from the yaml author to incorporate their work into gpl licensed software.


probably should also refer to this article about hacking css for ie7, to make sure yaml's css hacks will be 'forward compatible' with ie7..
http://www.positioniseverything.net/art ... acker.html


for some further layout inspiration, i'd suggest the following:
http://webhost.bridgew.edu/etribou/layouts/  (look at skidoo too)
http://www.positioniseverything.net/ (look at the 'improved' piefecta and the 'jello' layouts)

i've learned a lot from taking apart the skidoo layouts in particular. the guy who made those is brilliant and his code is very well documented (and released to public domain).
eternity (n); 1. infinite time, 2. a seemingly long or endless time, 3. the length of time it takes a frozen pizza to cook when you're starving.
4,930,000,000 (n); 1. a very large number, 2. the approximate world population in 1986 when Microsoft Corp issued its IPO. 3. Microsoft's net profit (USD) for the quarter (3 months) ending 31 March 2007.
CMSMS migration and setup services | Hosting with CMSMS installed and ready to go | PM me for Info
westis

Re: CSS Framework

Post by westis »

Hi kermit,

Yeah, we won't use YAML for the default templates. It would be nice to have some examples based on YAML for download from the Themes site later, however, or simply the HTML and CSS frameworks that YAML is using.

The other links you referred to are indeed very nice also, thanks for those links! The default layout for 0.12 is based on several sources and also has an elastic width layout.

:D
User avatar
kermit
Power Poster
Power Poster
Posts: 693
Joined: Thu Jan 26, 2006 11:46 am

Re: CSS Framework

Post by kermit »

westis wrote:
The other links you referred to are indeed very nice also, thanks for those links! The default layout for 0.12 is based on several sources and also has an elastic width layout.
i like the concept of the jello one on pie... fluid width but with limits... min width to keep things from getting scrunched too much (the primary annoyance with css only layouts), and a max width to keep things in check on large displays. it would help if ie wasn't so braindead.

my other 'ideal' layout would be one similar to the one i used frequently in the glory days of tables... fixed width columns of 600-160-200, changable on the fly to 760-200 for a wider content column. had a script that kept it the whole layout from growing too wide on large screens (if widths were allowed to be fluid). main content and navigation was in the first column (viewable at 640w), and as the client screen grew, they gained an extra column (or two) with secondary content and navigation.  have not figured out how to do this in css only though (it can be done with scripts, but i don't like to use them for accessibility reasons).
eternity (n); 1. infinite time, 2. a seemingly long or endless time, 3. the length of time it takes a frozen pizza to cook when you're starving.
4,930,000,000 (n); 1. a very large number, 2. the approximate world population in 1986 when Microsoft Corp issued its IPO. 3. Microsoft's net profit (USD) for the quarter (3 months) ending 31 March 2007.
CMSMS migration and setup services | Hosting with CMSMS installed and ready to go | PM me for Info
Post Reply

Return to “Tips and Tricks”