Tutorial: Perkins 3

Pero el cuento es que Perkins nació un poco antes y revolucionó el Internet mentira. La cosa es que Carlos continuó el proyecto sin mirar al lado y ya lo tiene en una versión 3 que incluye un CLI y una integración con bower.

Así que manos a la obra porque les voy a explicar como instalar Perkins y a entender lo simple que es hacer sitios web que no sean iguales a todos (se nota que le tengo mala onda a Bootstrap?).

Ingredientes

  • NodeJS
  • NPM
  • Saber usar consola (terminal)
  • Saber HTML y CSS

Preparación

Para comenzar la receta debemos tener a mano el NodeJS con NPM instalado, si no lo tiene vaya ahora al mercado google e instálelo.

Ahora debe abrir la consola o terminal, como quiera decirle, y haga lo siguiente:

sudo npm install -g perkins

Esto instalará de forma global perkins para que posteriormente lo usemos como comando de sistema. Por cierto, estoy asumiendo que usted utiliza sudo; pero si está logeado como root no será necesario.

Luego del comando lo que saldrá en pantalla será la foto de Carlos Elías, no, en serio, saldrá lo siguiente:

Sigue y sigue, porque instala muchas cosas

Y eso, se instaló. Ahora podemos usar el comando “perkins“.

Manos a la masa

Con el comando Perkins podremos iniciar nuestro sitio para comenzar a desarrollar y diseñar. En mi decisión personal lo que yo he estado haciendo es evitarme hacer wireframes y comenzar a diseñar directamente, casi como ejecutando el “wireframe” directamente al HTML. ¿Me explico?

Lo interesante de Perkins es que no necesitamos un servidor web como Apache para poder previsualizar los cambios, Perkins viene con un servidor integrado que interpreta los Less, así que tampoco vamos a necesitar instalar Less.js. Ahora, comenzaremos iniciando nuestro sitio, digamos que se va a llamar “ejemplo” (uy, que original). Para hacer eso tenemos que escribir el siguiente comando:

perkins init ejemplo

Esto retornará lo siguiente:

Al hacer esto Perkins creará la carpeta “ejemplo” y dentro de ella instalará las dependecias necesarias en la carpeta vendors. También podemos notar que nos entrega las opciones de iniciar un sistema más complejo (una app) o si queremos iniciar con el servidor para previsualizar el sitio.

Yo recomiendo no utilizar ninguna opción porque lo primero que haremos es abrir nuestro editor favorito y revisar lo que perkins nos entrega. En mi caso, usaré SublimeText 2, para que no se pierdan.

Estando ya en el editor veremos las carpetas que entrega perkins, además del index.html con un ejemplo. Si abrimos ese index.html veremos que en su interior existe un “” que hace referencia al archivo “stylesheets/app.css“. Ocurre que este archivo se compila automáticamente luego de abrir el servidor. Nosotros debemos trabajar en el archivo “vendor/perkins/app.less” que posteriormente se convertirá en “app.css“.

Luego, comenzaremos abriendo el archivo “vendor/perkins/app.less” donde nos encontraremos con los “bowties”, que son como plugins que perkins tiene para poder tratar con otros elementos. Acá, activaremos el “grid, feedback, form y table”, no es necesario el archivo “ui” porque ese sirve para cuando usamos jQuery UI.

Acá debemos tratar el archivo como un LESS normal. Perkins además cuenta con mixins que pueden encontrar en el archivo “vendor/perkins/assets/_mixins.less”. Los mixins son funciones que ayudan al desarrollo con Less y que aplica para todo el app.less. Este tema lo llevare a fondo en un próximo tutorial porque da para harto rato.

Finalmente solo nos queda ver el sitio en el servidor local. Volveremos a la consola e iniciaremos el servidor del siguiente modo:

perkins server ejemplo

Esto iniciará el servidor en el puerto 8000 (que es por defecto) y lo podremos visitar en http://localhost:8000

Eso es todo con perkins, en el siguiente tutorial vamos a repasar algunos mixins y a seguir con nuestro sitio “ejemplo“.

¡Bon apetit!

Blog, Tutorial
2 minutos