BlueTripCSS Framework

Los Framework CSS son hojas de estilos genéricas que facilitan la redacción de CSS para nuestras páginas, cada una de ellas tiene sus virtudes y defectos, BlueTripCSS es un framework que toma las mejores características de estos frameworks (960.gs, Blueprint, LogiCSS, YAML, Elements, YUI) para facilitarnos la creación y maquetación de paginas html.

Este framework contiene la técnica CSS Reset, estilos necesarios para manejo de tipografías, otra para el manejo de la maquetación, además de ello se incluye los estilos necesarios para impresión basados en Hartija, es decir es una hoja de estilos muy completa.

Como utilizar BlueTripCSS
Lo primero es descargar los archivos fuente bluetrip.tar.gz, extraemos el archivo y encontraremos los siguientes archivos:

  • screen.css, contiene CSS Reset, estilos para las fuentes, formularios, listas, entre otros.
  • print.css, la hoja de estilos para impresión basado en Hartija.
  • ie.css, estilos para compatibilidad con Internet Explorer
  • style.css, el cual contendrá nuestros estilos personalizados.

Luego para utilizar este framework es necesario incluir los CSS en el header el html que estamos redactando, de la siguiente forma y en el mismo orden.

  1. <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection">
  2. <link rel="stylesheet" href="css/print.css" type="text/css" media="print">
  3. <!--&#91;if IE&#93;>
  4. <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection">
  5. <!&#91;endif&#93;-->
  6. <link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection">

Lo siguiente es editar el archivo screen.css y cambiar a[href^=”http://yourwebsite.com”] por el URL de tu web. Entonces podemos empezar con la creación del HTML, para ello el primer elemento debe tener la clase container.

  1. <div class="container">
  2.    <!-- Contenido HTML -->
  3. </div>

Pueden ver ejemplos de uso de BlueTripCSS en Typography Demo y en Grid Demo. Obviamente en el web del autor pueden encontrar mas información del uso de este framework y los ejemplos de utilización.

Comentarios Total 1 comentario



[…] via: Capsize Designs y Unijimpe […]

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)