Creando un sencillo sistema de Templates html con Kit y Codekit

Hace un tiempo escribí un post sobre Codekit. Una herramienta imprescindible en mi día a día. Para quien no lo conozca, CodeKit es una aplicación para Mac OsX que permite usar precompiladores de Css,Html y Javascript, sin pasar por la “temible” consola. Hace unos días buscando algún precompilador para Html, decidí ver qué opciones me ofrecía CodeKit. Las opciones que encontré fueron:

  • – Haml
  • – Jade
  • – Slim
  • – Kit

De la lista anterior nunca había escuchado sobre Kit, así que me di a la tarea de descubrir de que nuevo precompilador se trataba. Para mi sorpresa descubrí que Kit es un pequeño precompilador creado por el creador de la aplicación  Codekit.

logo codekit

¿Qué hace Kit?

Kit permite importar variables, archivos .Kit y archivos html dentro de un documento. Usando una variación de los comentarios tradicionales en Html, y generando un archivo con extensión Html.

¿Cómo funciona?

Lo primero será contar con la aplicación Codekit para que Kit pueda ser procesado, lo segundo será crear un archivo: nombre_de_archivo.kit. Finalmente utilizar la sintaxis que el desarrollador nos indica en su documentación. Aquí un ejemplo básico.

<!-- $imgPath = img/-->

<div class="logo">
<img src="<!-- $imgPath -->logo.png" alt="">
</div>

Hemos creado una variable llamada $imgPath que tiene como valor el directorio de imágenes de nuestro sitio. Esto nos dará el siguiente resultado.

<div class="logo">
<img src="img/logo.png" alt="">
</div>

Al momento de compilarse se generara un archivo : nombre_de_archivo.html. Además de variables podemos importar archivos Html, de esta manera podríamos generar un sistema básico de templates, donde pondríamos las partes de la web que más se repiten, y de esta manera poder reutilizarlos sin tener que estar reescribiendo código.

¿Cómo lo hago?

Esta es la forma en la cual tengo organizado un pequeño sistema de templates. Lo primero que tengo es un directorio llamado Kit en el cual tengo cada una de las partes de la web que deseo reutilizar:

  • _variables.kit
  • _head.kit
  • _foot.kit
  • _template.kit

_variables.kit

Aquí defino las variables globales que utilizare en mi sitio

<!-- $imgPath = img/ -->
<!-- $cssPath = css/ -->
<!-- $jsPath = js/ -->

_head.kit

Aquí defino la cabecera de mi documento Html.

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><!-- $titulo --></title>
<meta name="description" content="<!-- $descripcion -->">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">

<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="<!-- $cssPath -->styles.css">
<script src="<!-- $jsPath -->vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->

 

Si observamos el código anterior dentro de la etiqueta <title> y <meta name>, hago llamadas a dos variables,que aun no he definido, estas variables las defino más tarde en mi archivo _template.kit

_foot.kit

Aquí defino el pie de pagina de mi documento Html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/retina/retina.js"></script>

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>

_template.kit

Este es el archivo que concentra todos los documentos kit creados anteriormente.

<!-- Variables Globales -->
<!-- @import "_variables" -->

<!-- Variables particulares de la pagina --> 
<!-- $titulo = Titulo de la pagina -->
<!-- $descripcion = Descripción del sitio -->

<!-- @import "_head" -->

<h1>Hola Mundo</h1>

<!-- @import "_foot" -->

Como podemos observar he importado el documento que contiene las variables de mi sitio usando dentro de un comentario la palabra @import¿Recuerdan las variables que mandaba a llamar dentro del documento _head.kit? Con esto puedo establecer un titulo y descripción diferente para cada una de las paginas que se creen.

Finalmente importo los documento _head.kit y _food.kit. Estableciendo entre ellas el código que ira dentro del body de mi documento Html. Al momento de compilar el archivo _template.kit tendremos como resultado el siguiente código.

<!-- Variables Globales -->

<!-- Variables particulares de la pagina --> 

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Titulo de la pagina </title>
<meta name="description" content="Descripción del sitio ">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">

<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/styles.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->

<h1>Hola Mundo</h1>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/retina/retina.js"></script>

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>

El archivo _template.kit servirá de base para las paginas que creemos. Por ejemplo si tenemos una web que tiene 3 vistas : inicio.html, nosotros.html, historia.html. Tendríamos que crear tres archivos _template.kit

Por defecto cuando Codekit compila un documento .kit este generara un documento Html con el mismo nombre de nuestro documento : _template.kit >_template.html

Para cambiar esto y poder elegir el nombre de exportación abrimos Codekit, seleccionamos la carpeta donde se encuentra nuestro proyecto, ubicamos nuestro documento _template.kit y le damos click derecho seleccionando: Select Output Path… Y finalmente elegimos el nombre que queremos que tenga nuestro documento a la hora de exportarlo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *