This is how I include the Blueprint CSS framework in my cake app.
NOTE: In $html->css($path, $attributes), the first argument is the path from app/webroot/css. The second argument is html attributes.
<head>
<?php
echo $html->css(array('blueprint/screen', 'blueprint/ie', 'style'), null, array('media' => 'screen, projection'));
echo $html->css('print', null, array('media' => 'print'));
?>
</head>
Results in:
<link rel="stylesheet" type="text/css" href="/app/css/blueprint/screen.css" media="screen, projection" /> <link rel="stylesheet" type="text/css" href="/app/css/blueprint/ie.css" media="screen, projection" /> <link rel="stylesheet" type="text/css" href="/app/css/style.css" media="screen, projection" /> <link rel="stylesheet" type="text/css" href="/app/css/print.css" media="print" />
Linking JavaScript libraries is very similar.
$jslibraries = array('prototype', 'scriptaculous', 'jquery');
This will link to prototype.js, scriptaculous.js and jquery.js respectively as long as there in app/webroot/js.
Put echo $javascript->link($jslibraries); into the head of your layout and you’re done. You have all three JavaScript libraries at your disposal.
Other good resources:
yeah but you lose your conditional comments that prevent the ie.css from only being included in ie7 or lower. This solutions send it to all browsers. which breaks some of the blueprintcss styles for non IE.
Your better off splitting the first 2 css files out into their own $html->css calls
css( array( join( DS, array( 'blueprint', 'screen' ))), null, array( 'media'=>'screen, projection' )); ?>
css( array( join( DS, array( 'blueprint', 'ie' ))), null, array( 'media'=>'screen, projection' )); ?>
css( array( join( DS, array( 'blueprint', 'print' ))), null, array( 'media'=>'print' )); ?>
yeah, well you get the point.
Yeap, thanks!