initial commit of the BlueTrip Theme for Drupal 6

What is BlueTrip for Drupal ?

-----------------------------

The BlueTrip theme for Drupal is the adaptation of the CSS framework "BlueTrip"

( developed by Mike Crittenden at Capsize Designs ) for the Drupal system.

You can find the original BlueTrip framework here :

http://bluetrip.org/

(-> http://www.capsizedesigns.com )

BlueTrip from bluetrip.org:

"A full featured and beautiful CSS (Cascading Style Sheets) framework which 

combined the best of Blueprint, Tripoli (hence the name), Hartija's print 

style-sheet, 960.gs's simplicity, and Elements' icons. BlueTrip gives you a 

sensible set of styles and a common way to build a website so that you can 

skip past the grunt work and get right to designing."

BlueTrip is the grid system that have been used by Mark Boulton to develop 

the new Drupal.org design:

http://drupal.markboultondesign.com/iteration11/homepage_notloggedin.html

What is a Grid System ?

-----------------------

A grid system is a set of css class and id that you can use to quickly create

complicated layouts. When using a grid system, you can define the aspect of

the page by just dropping the appropriate class in your markup.

BlueTrip creates an invisible grid within your page, and provides you with a 

24-column grid inside of a 950px wide container. You can use this grid to 

set the width of element by just changing their class.

To set the width of a section, you'll be using div class="span-XX" where XX is 

the number of columns (out of 24) you want that section to take up. For example, 

if you want two equal sized columns, you would do div class="span-12" for the 

first element, and div class="span-12 last" for the second element. Note that 

the last element in the row should always have the "last" class so BlueTrip 

knows not to add any padding to the right of that one.

You can also add empty columns before and after a section for white space. This 

is done using the prefix-XX and suffix-XX classes. Obviously, prefix-XX adds XX 

blank columns before the section, and suffix-XX adds XX columns after the 

section. So say you want to have a 3-column layout with an empty column between 

each of the main columns. That requires nothing more than 3 divs in a row, the 

first with class="span-5 suffix-1", the second with class="span-12 suffix-1", 

the last with class="span-5 last".

The advantages of the grid system are many :

* Flexibility: Want a 4-column layout? Or perhaps a 3-column with an extra 

column of white space in between each? You got it.

* Browser Compatibility: Fully tested.

* Speed: Do anything you can do from scratch in half the time.

If you're still confused, check out the source on the grid examples in the 

example folder or here :

http://www.bluetrip.org/example/grid.html

You can also see a demonstration by checking the index.html file in the example

folder, or here :

http://bluetrip.org/demos/

BlueTrip Feature List :

------------------------

* 24-column grid

* Sensible typography styles

* Clean form styles

* A print style-sheet

* An empty starter style-sheet

* Sexy buttons

* Status message styles

* Hover infos on span for admin (from 960)

* Show/Hide link for admin (built for Drupal)

* Build from the BASIC 2 theme for Drupal, and therefor include all Basic 2 

features, like body classes, clean id/class system, etc...

What has been done to make it into a Drupal theme ?

---------------------------------------------------

The adaptation of BlueTrip to a Drupal theme have been done by using BASIC 2 

as a starting point. Most the BASIC default css styles have been removed and 

replaced by BlueTrip's css. The css styles from BlueTrip have been preserved

but also extended to the Drupal default output (like input or tabs).

Then the page.tpl.php has been adapted so it accepts one to three columns 

layout by default, and so it is easy to modify. 

There have been modifications only very few modification to the other templates

like node/block/box. And even template.php is practically the original from

BASIC 2, except that the regions have been commented by default.

I added a link for the admin user (user 1) to show/hide the grid. This is very

useful as the grid is only needed every once in a while to check the layout.

You can activate or deactivate the grid by just clicking on the link that should

be on the bottom left of the browser window.

I also added the hover effect, made in the debug.css, adapted from the 960

grid system. To do this, I had to create some original images, as the 960 grid

system only goes up to 16 columns.

In the Drupal 6 version and later, you can configure wether you want to have the

'edit' and 'configure' links on blocks when overing them, and you can also

enable the 'auto-cache-clearing' function, that will rebuilt the theme registry

on each page load. This is a nice add on when developing, but remember to turn

it of before launching the site, because it tends to use a lot of memory.

How to install ?

----------------

1. Download BlueTrip from http://drupal.org/project/bluetrip

2. Unpack the downloaded file and place the bluetrip folder in your Drupal

   installation under one of the following locations:

		sites/all/themes

    -> making it available to all Drupal sites in a multi-site configuration

		sites/default/themes

    -> making it available to only the default Drupal site

		sites/example.com/themes

    -> making it available to only the example.com site if there is a

       sites/example.com/settings.php configuration file

3. Log in as an administrator on your Drupal site and go to Administer > Site

   building > Themes (admin/build/themes) and make BlueTrip the default theme.

The modified BlueTrip framework is included, so no need to download it, thanks

to Mike Crittenden at at Capsize Designs.

Modifying the CSS styles

-------------------------

To modify the css styles, use the style.css file and not the screen.css file,

this is to preserve the integrity of the BlueTrip framework

Thanks

-------

Thanks to Mike Crittenden at Capsize Designs for developing the original

BlueTrip framework, and allowing me to contribute it to Drupal

http://bluetrip.org/

http://www.capsizedesigns.com

Thanks to Raincity Studios for helping me during the development of this theme

http://www.raincitystudios.com/

Thanks to me :

http://www.couzinhub.com/en/home

And Thanks to you for using BlueTrip for Drupal

 No newline at end of file

<?php // $Id$ ?>

<div class="block <?php echo $block_classes; ?> clearfix" id="block-<?php echo $block->module; ?>-<?php echo $block->delta; ?>">

  <div class="block-inner">

    <?php if ($block->subject): ?>

		  <h3 class="title block-title"><?php echo $block->subject; ?></h3>

		<?php endif; ?>

    <div class="content">

      <?php echo $block->content; ?>

    </div>

	  <?php print $edit_links; ?>

  </div> <!-- /block-inner -->

</div> <!-- /block -->

<hr/>

 No newline at end of file

; $Id$

name = BlueTrip

description = A full featured and beautiful CSS framework

screenshot = screenshot.png

engine = phptemplate

features[] = logo

features[] = name

features[] = slogan

features[] = mission

features[] = node_user_picture

features[] = comment_user_picture

features[] = favicon

features[] = primary_links

features[] = secondary_links

stylesheets[all][] = css/tabs.css

stylesheets[all][] = css/screen.css

stylesheets[all][] = css/style.css

stylesheets[print][] = css/print.css

stylesheets[all][] = css/debug.css

scripts[] = js/switchgrid.js

core = "6.x"

 No newline at end of file

<?php // $Id$ ?>

<div class="comment <?php print $comment_classes; ?>">

  <div class="comment-inner">

    <?php if ($title): ?>

      <h3 class="title"><?php echo $title; if (!empty($new)): ?> <span class="new"><?php echo $new; ?></span><?php endif; ?></h3>

    <?php elseif (!empty($new)): ?>

      <div class="new"><?php echo $new; ?></div>

    <?php endif; ?>

	  <?php if ($unpublished): ?>

      <div class="unpublished"><?php echo t('Unpublished'); ?></div>

    <?php endif; ?>

    <?php if ($picture): ?>

	    <div class="picture"><?php echo $picture; ?></div>

	  <?php endif; ?>

	  <div class="submitted">

	    <?php print $submitted; ?>

	  </div>

    <div class="content">

      <?php echo $content; ?>

    </div>

    <?php if ($links): ?>

      <div class="links">

        <?php echo $links; ?>

      </div>

    <?php endif; ?>

  </div> <!-- /comment-inner -->

</div> <!-- /comment -->

<hr/>

 No newline at end of file

/* $Id

This stylesheet is a modified version of the 960 debug.css file, adapted to work

with BlueTrip for Drupal by CouzinHub

*/

.showgrid .span-1:hover,

.showgrid .span-2:hover,

.showgrid .span-3:hover,

.showgrid .span-4:hover,

.showgrid .span-5:hover,

.showgrid .span-6:hover,

.showgrid .span-7:hover,

.showgrid .span-8:hover,

.showgrid .span-9:hover,

.showgrid .span-10:hover,

.showgrid .span-11:hover,

.showgrid .span-12:hover,

.showgrid .span-13:hover,

.showgrid .span-14:hover,

.showgrid .span-15:hover,

.showgrid .span-16:hover,

.showgrid .span-17:hover,

.showgrid .span-18:hover,

.showgrid .span-19:hover,

.showgrid .span-20:hover,

.showgrid .span-21:hover,

.showgrid .span-22:hover,

.showgrid .span-23:hover,

.showgrid .span-24:hover{

  background-color: rgba(0, 255, 255, .2);

  background-repeat: no-repeat;

  background-position: top right;

  outline: 1px solid #d66;

}

.showgrid .span-1:hover {  background-image: url(../images/grid_count/1.png);}

.showgrid .span-2:hover {  background-image: url(../images/grid_count/2.png);}

.showgrid .span-3:hover {  background-image: url(../images/grid_count/3.png);}

.showgrid .span-4:hover {  background-image: url(../images/grid_count/4.png);}

.showgrid .span-5:hover {  background-image: url(../images/grid_count/5.png);}

.showgrid .span-6:hover {  background-image: url(../images/grid_count/6.png);}

.showgrid .span-7:hover {  background-image: url(../images/grid_count/7.png);}

.showgrid .span-8:hover {  background-image: url(../images/grid_count/8.png);}

.showgrid .span-9:hover {  background-image: url(../images/grid_count/9.png);}

.showgrid .span-10:hover {  background-image: url(../images/grid_count/10.png);}

.showgrid .span-11:hover {  background-image: url(../images/grid_count/11.png);}

.showgrid .span-12:hover {  background-image: url(../images/grid_count/12.png);}

.showgrid .span-13:hover {  background-image: url(../images/grid_count/13.png);}

.showgrid .span-14:hover {  background-image: url(../images/grid_count/14.png);}

.showgrid .span-15:hover {  background-image: url(../images/grid_count/15.png);}

.showgrid .span-16:hover {  background-image: url(../images/grid_count/16.png);}

.showgrid .span-17:hover {  background-image: url(../images/grid_count/17.png);}

.showgrid .span-18:hover {  background-image: url(../images/grid_count/18.png);}

.showgrid .span-19:hover {  background-image: url(../images/grid_count/19.png);}

.showgrid .span-20:hover {  background-image: url(../images/grid_count/20.png);}

.showgrid .span-21:hover {  background-image: url(../images/grid_count/21.png);}

.showgrid .span-22:hover {  background-image: url(../images/grid_count/22.png);}

.showgrid .span-23:hover {  background-image: url(../images/grid_count/23.png);}

.showgrid .span-24:hover {  /*no img for 24 */}

 No newline at end of file