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.
