Integrando Less en KumbiaPHP

image 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.

image

Leave a Reply

Your email address will not be published. Required fields are marked *