En esta ocasión vamos a integrar less en nuestro framework KumbiaPHP Beta2, en el ejercicio que realizaremos vamos a modificar el template que por default trae Kumbia.
Pues a iniciar…
Cololar el js de less en la siguiente dirección
kumbiaPHP/default/public/javascript/less.js
y crear un nuevo archivo llamado structura.less en la carpeta de css
kumbiaPHP/default/public/css/structura.less
Nuestro archivo less quedaría dela siguiente manera.
@width-page: 900px; @background-color: #FFFFF; @color-fondo-header: #ffffff; @color-h1: #3c3b39; body{ .begin(@width-page); background-color:@background-color; } #header{ .begin(@width-page); height:140px; background-color: fadein(spin(@color-fondo-header, 40), 10%); background-image:url(http://www.curitas.com.mx/media/22/12801665865140/bg-home-header.jpg); background-position:right; background-repeat: no-repeat; #logo{ float:right; min-height:40px; width:350px; } } h1{ color:fadein(spin(@color-h1, 0), -10%); font-size:24px; } h2{ color:fadein(spin(@color-h1, 20), 40%); font-size:22px; } h3{ color:fadein(spin(@color-h1, 20), 80%); font-size:16px; } p{ font-size:16px; } a{ text-decoration:none; color:#010101; } a:hover{ color:#c0c0c0; } /*Footer*/ #footer{ .begin(@width-page); height:30px; font-size:14px; border-top: 1px solid #c3c3c3; a{ text-decoration:none; margin-left:2px; color:#cfcfcf; } a:hover{ color:#000; } .alignleft .links { width:500px; float:left; margin-left:-10px; margin-top:0px; li { list-style:none; float: left; } } .alignright { float:right; margin-top: -15px; } } .li-footer(@float) { width:500px; float:@float; margin-left:-10px; margin-top:0px; li { list-style:none; float: left; } } /*Funciones*/ .begin(@width-page){ width:@width-page; min-height:20px; margin:0 auto; }
Ahora modificamos el template
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=’Content-type’ content=’text/html; charset=<?php echo APP_CHARSET ?>’ />
<title>Vspiel</title>
<link rel=”stylesheet/less” type=”text/css” href=”<?php echo PUBLIC_PATH ?>css/structura.less”>
<?php echo Tag::js(“less”) ?>
</head>
<body>
<?php View::partial(‘header’) ?>
<div id=’content’>
<?php View::content(); ?>
</div>
<?php View::partial(‘footer’) ?>
</body>
</html>
Aquí el resultado final.