[BootStrap] MiniTutorial Parte 5

Usando Bootstrap

Proyecto GitHub

Como muchos de los grandes proyectos de codigo abierto, el poder de Bootstrap no viene solo de los desarrolladores en el nucleo del proyecto, sino tambien de la comunidad de desarrollo que lo sustenta. GitHub es un gran repositorio de codigo para los proyectos, y al momento de escribir, Bootstrap es uno de los proyectos mas populares. Con mas de 42.000 estrellas y mas de 10.000 forks el proyecto es un hervidero de activad. Como ya se dijo en el minitutorial numero 1
si desea utilizar bootstrap solo tiene que descargar el archivo .zip desde el sitio o puede hacerlo usando git.

Para los no iniciados, git es un sistema de control de versiones de codigo libre y abierto. Bootstrap y gran cantidad de otros proyectos  usan gitHub, que es un repositorio de codigo en linea para proyectos de git. Para descargar el codigo fuente de Bootstrap, ejecute lo siguiente desde la linea de comandos:

git clone https://github.com/twitter/bootstrap.git

Con esto clona bootstrap y le dara una descarga completa de todos los archivos, no solo el CSS/Javascript sino tambien todas las paginas de la documentacion y los archivos LESS para los elementos dinamicos de javascript.
Si se desea, usando los archivos LESS, usted puede compilar su propia version de Bootstrap, con las caracteristicas o las personalizaciones que necesita.

Personalizando Bootstrap

Usted puede descargar el codigo fuente, O si desea personalizar facilmente algunos colores, el tamaño o los plugins, puede poner bootstrap a sus necesidades a traves de su sitio web.

Cuando utiliza la pagina de personalizar usted elige los componentes que necesita.

Por ejemplo, usted puede optar por dejar todas las funciones de web resposive, o tal ves le gustaria dejar fuera las clases de boton que entran en conflicto con las que ya tienes.

Tambien puede optar por cualquiera de los plugins de Jquery. Si usted sabe que no va usar los modales o el carrusel, se puede dejar fuera de la compilacion, por lo que tiene un archivo mas pequeño para solicitar (descargar).

Por ultimo, puede configurar las variables LESS. Todo, desde el numero de columnas, a los colores de la tipografia, pueden ser modificados aqui. Con estas opciones se puede atender Bootstrap a sus necesidades.

Usando LESS

Hay algunas maneras de utilizar LESS con Bootstrap. La primera, y quizas la mas facil, es usar un preprocesador como CodeKit o simpLESS. Usted puede utilizar estas herramientas para ver ciertos archivos o carpetas. Entonces cuando se guarda cualquiera de los archivos, construyen los archivos CSS maestros. Ademas de utilizar las tecnicas tradicionales de estilo CSS, puede utilizar funciones avanzadas como mixins
y funciones para cambiar dinamicamente la apariencia de su sitio con solo cambiar algunas variables.

 CodeKit

 SimpLESS

LESS es un lenguaje de hojas de estilo dinamico para escribir CSS. Se le permite escribir las variables, funciones, y mixins para su CSS. La carpeta /less de Bootstrap tiene unos pocos archivos, pero para establecer variables globales, compruebe los archivos variables.less  y mixins.less.

 

En el archivo variables.less, encontrara todas las variables globales para Bootstrap. Digamos que usted quiere cambiar el color de todos los enlaces. Solo tendria que actualizar LESS para compilar el CSS, y todos los enlaces cambiarian de color.

/* Codigo anterior */
@linkColor: #08c;
@linkColorHover:  darken(@linkColor, 15%);

/* Codigo Nuevo */
@linkColor: #7d00cc;
@linkColorHover:  darken(@linkColor, 15%);


Ahora, todos los enlaces se cambian a un color purpura, y los botones y otros elementos de la interfaz que requieran @linkColor seran actualizados atraves de su sitio. La anidacion por si sola es un gran ahorro de tiempo.

Text Snippets (Fragmentos de Texto)

Para desarrollar rapidamente sitios de bootstrap, podemos utilizar Sublime Text y bootstrap snippets de DEVtellect en Github. Esto hace que la adicion de cualquier componente sea tan facil de añadir como usar una atajo del teclado.

Para instalar los snippets (fragmentos), puedes clonar el repositorio git en tu carpeta de paquetes.

git clone git@github.com:devtellect/sublime-twitter-bootstrap-snippets.git

Hay una recopilacion para un monton de aplicaciones IDEs/Editores de Texto.

Photoshop Templates (Plantillas de Photoshop)

Ademas de los snippets (fragmentos), se han producido algunos documentos de photoshop de todos los elementos de marcado (markup) de bootstrap. Mi favorito viene de REPIX Design.

Aqui estan algunas caracteristicas:

* Colores ajustables
* Capas separadas
* Basado de vectores

El PSD es gratis, por las peticiones del autor usted paga con un tweet.

Temas

Si usted tiene que instalar un sistemas o algo parecido y desea añadir algun tema, hay pocas maneras de encontrarlo libre y de primera calidad de Bootstrap. Mis favoritos son {Wrap}Bootstrap  y Bootswatch. Ambos tienen algunas grandes opciones, y hacen qeu sea facil obtener un nuevo estilo a su sitio.

Construido con Bootstrap

Si usted esta buscando aun mas inspiracion, eche un vistaso a Build with Boostrap, un Tumblr que cuenta con capturas de pantalla de sitios Bootstrap enviados por usuarios. Es una manera divertida de ver sitios web creados con Bootstrap.

Conclusion

Como puede ver, Cualquiera que sea el proyecto, Boostrap puede llenar las necesidades de casi cualquier proyecto web. Su mezcla de resposive framework, amplias extensiones de complementos Javascript, y componentes de interfaz robusta, lo hacen  desarrollar facil, rapido y rico en caracteristicas.