Kube framework css and javascript

Posted on 7 of agosto, 2015 by admin in Kube

En los últimos días eh estado investigando acerca de los framework para los front pages ya que existe un grupo de estos, siempre eh utilizado el famoso bootstrap es lo mejor que eh visto de hecho lo utilizo en este blog. Pero tiene un inconveniente al ser una buena opción vemos que en internet hay un porciento de páginas que lo utilizan para los front por ende muchas páginas son aparecidas, por esto empecé a ver los ranking de framework css y javascript para tratar de no tener paginas tan similares.

Estos son los framework más populares:

  1. Bootstrap
  2. Foundation 3
  3. Skeleton
  4. YAML 4
  5. Kube

Kube es un framework css and javascript parecido a Bootstrap aunque más moderado que se puede utilizar para desarrollar front pages de forma profesional. Este es utilizado profesionales muchos profesionales del área de desarrollo de website y diseñadores. Este es un framework simple y completo tiene todas las herramientas para desarrollar los más complejos front pages.

Vamos a implementar kube y desarrollaremos un layout simple para ver el funcionamiento de kube.

Lo primero es descargar el framework kube de la página oficial el link es el siguiente:

http://imperavi.com/kube/

Luego de esto crear una carpeta y descomprimir, tendremos los siguientes directorios:

directory2

Ahora necesitamos utilizar un editor, yo recomiendo sublimetext2 es free y tiene infinidad de plugins que nos facilitan la vida. Tomaremos el archivo index y veremos la estructura que utiliza el kube.

Para configura el kube solo es necesario adicionar el archivo kube.min.css y los archivos js, primero jquery y luego el archivo kube.min.js.

Tendremos lo siguiente:

image1

Ahora abrimos el archivo con google Chrome y verificamos que no haya ningún error javascript. Kube como todos los framework css, nos permite desarrollar los layout que sean de forma responsivas, basándose en grid y la utilización de los media query de css, kube al igual que bootstrap está basado en un grid de 12 columnas.

Empezaremos con algo sencillo agregamos un navbar y tendremos algo como esto:

image2

Ahora abrimos en el Chrome para ir viendo como está quedando y veremos algo como esto:

image3

Ahora agregamos la estructura de cómo se desplegara el contenido, eh escogido una estructura de dos columnas una con un 70% y la otra con un 30%

image4

La estructura con algo de contenido se vería de la siguiente forma:

image5

Y para finalizar agremos el footer y ya tendremos nuestro layout listo:

image6

Ya todo está listo para ver esto con más detalle puedes descargar el código de este post si tienes alguna duda puedes escribirme un email y lo contestare lo más pronto posible.

Descargar Ejemplo