Templates using the Yahoo Grids CSS UI Library (YUI) ...

[wesyah234]

Has anyone created any templates using the Yahoo UI Grids CSS libraries?  This library, along with their Fonts library, looks like a great starting point for an easily modifiable cmsms template.  If one was created, it could be included as one of the standard templates in the installation of CMSMS.

main documentation:
http://developer.yahoo.com/yui/grids/

a nice example writeup:
http://24ways.org/2006/intricate-fluid-layouts

[kermit]

not using the grids here... yet

but i am really starting to like the 'reset' and 'fonts' part of 'reset-fonts-grids.css'

for those who don't know what that is, it's a foundation to put at the start of your css to completely wipe the slate clean & level the playing field...

Code: Select all

/*
Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.2.0
*/
/*reset.css*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;}
/*fonts.css*/body{font:13px arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}pre, code {font:115% monospace;*font-size:100%;}body * {line-height:1.22em;}

try it, you'll like it.

[heatherfeuer]

Kermit,

Thanks for the links!  That is so a way cool tool!!  Just think what that could do for online newsletters!  Complicated layouts like you can get in print AND do it all without a single table!

[wesyah234]

Interesting thing I just noticed about the reset css is that ul / li tags get reset too, so your lists look like nothing, until you set them to the look you want...

I have a template going now in cmsms that uses the yahoo css layouts... I'll post it if anyone's interested.

[cyberman]

I'll post it if anyone's interested.

Great idea - please do it here

http://themes.cmsmadesimple.org/Share_a_Theme.html

[wesyah234]

What to upload?  the xml file created by the theme exporter?

[cyberman]

Yep. You can zip it too. Maybe a short readme.txt inside could useful.

[wesyah234]

Actually, it isn't much at all... yahoo lets you fetch the css right from their server, if you want, so the only css you need is your own styling.

I'll just post the main template source here:

I used global content blocks for the header, footer, and side navigation area.

I also just used a basic menu template that outputted UL/LI's for each content page, no cascading menus.



{sitename} - {title}
{metadata}

{stylesheet}



 
   
      {global_content name='header'}
   
   
     
       
         
            {content}
         
       
     
     
       
         
            {menu template="basic"}
         
          {global_content name='side'}
       
     
   
   
      {global_content name='footer'}
   
 

[cyberman]

I also just used a basic menu template that outputted UL/LI's for each content page, no cascading menus.

Thanks - can you post content of basic menu template for all (newbies) too?