Can panels or panels 2 do grid design

I am working on project "news website" and i want to use grid design, i want to start using a css framework "blueprint"

check out a sample : http://bjorkoy.com/blueprint/sample.html

http://www.sontakey.net/wp-content/uploads/2007/08/example.html

Blueprint Generator

http://kematzy.com/blueprint-generator/

Blueprint project
http://code.google.com/p/blueprintcss/

CommentFileSizeAuthor
#10 screenshot_01_0.jpg16.11 KBtoma

Comments

catch’s picture

catch
he/him
Primary language English
commented
Status: Active » Fixed

You can do this by using a "flexible layout" in panels - shouldn't require any css work on your end to get basic structure up. Marking as fixed, but please re-open if this doesn't answer your question.

toma’s picture

toma commented

thanks for your help, i start to play with zen theme

merlinofchaos’s picture

merlinofchaos commented

Note that flexible isn't nearly as powerful as the blueprint generator, and it seems likely that at some point someone will want to create a layout plugin that uses blueprint. I think this should be fairly straightforward, and hopefully at some point someone will do so and contribute it.

toma’s picture

toma commented

it will be a great addition to panels, may be something like panel grids, i am not a programmer, i start to play with some addition with themes etc..may be something like frontpage grids as people need to have some grids on frontpage for newspaper/magazine website, if panels use the grids idea/system that blueprint framework use, will be just great :)

mjlassila’s picture

mjlassila commented

I have been using Yahoo YUI Grids CSS-framework (http://developer.yahoo.com/yui/grids/) with Panels some time now. Grids CSS is not as flexible framework/ elegant as Blueprint, but for my purposes it has been working well and it is well supported and used in very high-profile sites.

To get started you need to create basic grid structures to be put in layouts subfolder in Panels module directory. You should also create a basic Drupal theme which has page.tpl.php modified to be used with YUI Grids (eg, no fixed sidebars etc.). If I can find time soon to clean away all site specific stuff from my template/panel layout files, I'll share them if someone is interested. But creating basic site template using YUI Grids and Panels 2 is pretty straightforward and good exercise in theming, so I engourage you to do it yourself :)

toma’s picture

toma commented

Its a good idea to add some grids to panels, i was looking for yahoo grids, but really i get lost, i prefer the blueprint, its simple for me :) if u can provide an example, it will be great

toma’s picture

toma commented

ou should also create a basic Drupal theme which has page.tpl.php modified to be used with YUI Grids (eg, no fixed sidebars etc.)

This is what i am looking for, can you provide me some more information, i think its a good idea what you have done, because i want to stay with panels as its provide more controle to add content,

also YAML css framework , have drupal module but its GPL "http://www.yaml-fuer-drupal.de" use additional panels layouts

If I can find time soon to clean away all site specific stuff from my template/panel layout files, I'll share them if someone is interested.

I am very interested

catch’s picture

catch
he/him
Primary language English
commented
Title: Can panels or panels 2 do grid design » Panels 2 and grid design
Category: support » feature
Status: Fixed » Active

Setting this back to active since it's clearly more in-depth than I originally thought.

toma’s picture

toma commented

I start to look at yahoo grids and find an online tool to build grids ana layout (http://developer.yahoo.com/yui/grids/builder/)
I think i will start with this layout in my page.tpl.php
yui-t7: Includes no sidebar and a main area width of 750px.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
2	 "http://www.w3.org/TR/html4/strict.dtd"> 
3	<html> 
4	<head> 
5	   <title>YUI Base Page</title> 
6	   <link rel="stylesheet" href="http://yui.yahooapis.com/2.3.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css"> 
7	</head> 
8	<body> 
9	<div id="doc" class="yui-t7"> 
10	   <div id="hd"><h1>YUI: CSS Grid Builder</h1></div> 
11	   <div id="bd"> 
12	    <div class="yui-g"> 
13	    <!-- YOUR DATA GOES HERE --> 
14	    </div> 
15	 
16	    </div> 
17	   <div id="ft">Footer is here.</div> 
18	</div> 
19	</body> 
20	</html>

I have two choice, the first its easy for me as i am not a programmer, make a frontpage with grids and try to use somepaage-tpl.php and the second is to make some addition to panel module layouts and it will be better if you can share some example you ve already done with your theme

Thanks

toma’s picture

toma commented
StatusFileSize
new screenshot_01_0.jpg16.11 KB

Panels loves grids :) i just make it work, i modified the twocol stacked panels and make a grid layout from the online yahoo tool, make new layout with name someyahoogrids.inc , i don't use the "$idstr" for the moment, 

<?php
// $Id: someyahoogrids.inc,v 1.5.6.4 2007/08/24 02:49:06 merlinofchaos Exp $

/**
 * implementation of hook_panels_layouts
 */
function someyahoogrids_panels_layouts() {
  $items['someyahoogrids'] = array(
    'module' => 'panels',
    'title' => t('someyahoogrids'),
    'icon' => 'layouts/someyahoogrids.png',
    'theme' => 'panels_someyahoogrids',
    'css' => 'layouts/grids.css', 
    'panels' => array('top' => t('Top'), 'left' => t('Left side'), 'right' => t('Right side'), 'right2' => t('Right 2')), 'right3' => t('Right 3')), 'left2' => t('Left 2')),
  );

 return $items;
}

/**
 * This function uses heredoc notation to make it easier to convert
 * to a template.
 */
function theme_panels_someyahoogrids($id, $content) {
  if ($id) {
    $idstr = " id='$id'";
  }

  $output = <<<EOT

<div id="bd"> 
	    <div class="yui-gd"> 
	    <div class="yui-u first"> 
	    $content[top] 
	        </div> 
	    <div class="yui-u"> 
	   $content[right]
	        </div> 
	</div> 
	<div class="yui-gc"> 
	    <div class="yui-u first"> 
	   $content[left]
	        </div> 
	    <div class="yui-u"> 
	   $content[right2]
	        </div> 
	</div> 
	<div class="yui-gd"> 
	    <div class="yui-u first"> 
	    $content[left2]
	        </div> 
	    <div class="yui-u"> 
	   $content[right3]
	        </div> 
	</div> 
	 
	    </div>
merlinofchaos’s picture

merlinofchaos commented
Status: Active » Closed (won't fix)

I can't commit YUI code to Drupal due to drupal.org's policies on committing 3rd party code, especially that isn't GPL. So there's really nothing I can do here; but YUI stuff can be added as an additional plugin. I don't have the bandwidth to maintain such a module.

Nor do I have the bandwidth to attempt to do layouts based upon blueprint generator. But I really hope someone out there odes.

summit’s picture

summit commented

A year later! Wandering if somebody has come up with a solution for this!
Subscribing,
Greetings,
Martijn

crea’s picture

crea commented
Version: 5.x-2.x-dev » 6.x-3.x-dev
Assigned: toma » Unassigned
Status: Closed (won't fix) » Active

It seems making grid layout builder in Panels 3 would be more simple, since Panels 3 now has own layour builder. Just need some guy with JS knowledge to put little modifications inside, so layout builder could use grid units and classes. Unfortunatly I don't know JS :(( But I can help with php part. Anyone willing to join forces ?

crea’s picture

crea commented
Category: feature » task

This is community task, not feature request, as Merlin was clear about it, and he is quite busy now anyway.

crea’s picture

crea commented
Title: Panels 2 and grid design » Panels 3 grid layout builder
crea’s picture

crea commented
Status: Active » Closed (fixed)

It turned out to be fast enough to make grid layouts as CTools plugins

merlinofchaos’s picture

merlinofchaos commented

The world might benefit from a writeup on how you do this.

juan_g’s picture

juan_g commented
Component: User interface » Plugins - layouts
Status: Closed (fixed) » Active

It turned out to be fast enough to make grid layouts as CTools plugins

How, please?

And might it work with the 960 Grid System? (This system, similar to Blueprint, was adapted to Drupal by the NineSixty base theme).

juan_g’s picture

juan_g commented
Status: Closed (fixed) » Active

Well, after asking that, I've just seen a related NineSixty issue with some testing on Panels 3.0 plugins for 960 grids.

Something interesting is that the NineSixty base theme could bring to Panels both a well-known grid layout system and also optional content-first source order (swapping display order with pull and push classes).

The new drupal.org theme (site redesign project) is 960.gs-derived, like NineSixty.

crea’s picture

crea commented

How, please?

Look at existing layouts that come with Panels as example. They should be in "plugins/layouts" subdirectory of Panels module. Basically for your own plugin you need to make .inc file, and template file and put it in similar subdirectory of your module, then make this plugin directory available to Ctools via hook_ctools_plugin_directory() function.

juan_g’s picture

juan_g commented

Thank you.

crea’s picture

crea commented
Status: Active » Closed (fixed)
bensnyder’s picture

bensnyder commented

[duplicate]

bensnyder’s picture

bensnyder commented
Status: Active » Closed (fixed)

FYI, just released some new 960gs panel layouts on that same issue above: #538992: Sweeping changes for upcoming 2.0