BootStrap, un producto de Twitter

Extracto

BootStrap es un producto de Twitter desarrollado en 2011. La necesidad de trabajar de forma homogenizada sobre un proyecto donde concurren múltiples derarrolladores en el presente y en el futuro, justifica la estructura y el producto de Bootstrap.

Composición

Los elementos de Bootstrap están compuestos por una combinación de HTML, CSS y JavaScript, que gracias a la liberación por parte de Twitter como OpenSource, sufre una constante modificación -mejora- de sus elementos, creándose, incluso, ediciones particulares, muchas de ellas muy espectaculares.
Descarga de Bootstrap en http://getbootstrap.com/, en esta página nos encontramos tres distribuciones, de las cuales nos ocuparemos de dos Bootstrap compiled y Bootstrap sourcecode.

Bootstrap compiled

Quizá la más cómoda para trabajar desde un principio, aunque se te puede quedar corta en cuanto empieces a trabajar con ella. Su árbol de dependencias es este:

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff

Bootstrap sourcecode

Toda la distribución entera, su árbol de dependencias es el siguiente.
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/

Compilar nuestro Bootstrap

Mediante el comando grunt que podemos instalar así:
  1. Instalar grunt-cli globalmente con npm install -g grunt-cli
  2. Navegar al directorio root de /bootstrap, y allí ejecutar npm install. Npm verá el archivo package.json y automáticamente instalará las dependencias necesarias.

Comandos disponibles de grunt

  • grunt dist, Compila CSS y JavaScript
  • grunt watch. Mira en el directorio less y automáticamente recompila en CSS cualquier cambio que se haya producido en ese directorio.
  • grunt test, Ejecuta JSHint y corre las pruebas QUnit en PhantomJS.
  • grunt docs, Construye y pruebas de CSS, JavaScript y otros activos que se utilizan cuando se ejecuta la documentación a nivel local a través de Jekyll server.
  • grunt, lo recompila absolutamente todo.
Podríamos tener problemas con la instalación de las dependencias o ejecutando los comandos de grunt. Si esto ocurre primero borra el directorio /node_modules/ generado por rpm y entonces re-ejecuta npm install.
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: