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.