Esta disponible la nueva versión de Bootstrap para su descarga.

El equipo de trabajo de Twitter acaba de anunciar la disponibilidad de una nueva versión final de este proyecto open source que combina HTML 5, CSS y Javascript para permitirnos crear rápidamente sitios Responsive Web Design.

Cerca de tres meses después del último lazamiento y sin tiempo para conocer sus posibilidades, el nuevo Bootstrap 2.3 trae algunas mejoreas en la accesibilidad de links en cualquier componente, corrección de errores de la versión anterior o  actualización a jQuery 1.9 entre otras mejoras de diversa consideraciópn.

Bootstrap 2.3 es la última versión de rama 2 del popular framework CSS antes de la llegada del nuevo Bootstrap 3.0 que se espera suponga un salto de calidad con la llegada de importantes novedades.

Todos aquellos que deseen más información acerca de las características y posibilidades del nuevo Bootstrap 2.3, así como acceder a su descarga pueden hacerlo desde blog.getbootstrap.com

Groundwork  es un conjunto de herramientas totalmente responsive basadas en HTML5, CSS, Sass y Javascript.

El sistema de grid (rejilla) flexible de Groundwork facilita los desarrollos rápidos que, además, se escalan para ajustarse al tamaño de cualquier pantalla, ya sea desde un dispositivo móvil hasta una televisión de gran formato.

El grid de Groundwork permite definir formatos en cualquier cantidad de columnas hasta un máximo de doce divisiones, pero lo que tiene en especial frente a otros sistemas de grids es que se puede asignar diferentes anchuras a las columnas. Es decir, si decidimos tener dos columnas, no necesariamente han de tener la misma anchura ambas.

Groundwork es open source, alojado en Github y 100% gratuíto. Ha sido construído desde cero utilizando Sass, un potente preprocesador de CSS. Sass es una extensión de CSS3 que incorpora reglas anidadas, variables, herencia en selectores y mucho más. El código generado con Saas es convertido a CSS estandar bien formado mediante la utilidad de linea de comandos o utilizando algún plugin de un framework basado en web.

Al tratarse de un conjunto de herramientas (toolkit) ofrece mucho más al desarrollador a través de los siguientes componentes: grid, media queries,  tipografía, formularios, botones, navegación, tabs(pestañas), elementos UI (Interfaz de usuario), tablas, iconos, iconos sociales (facebook, twitter, etc.), texto responsive (se adapta con fluidez y automáticamente a las dimensiones de la patalla de cualquier dispositivo con el que se visualice la página web), ventanas modales, tooltips yOrbit. Este último es un estupendo slider de imágenes y de contenido.

Poner a prueba la compatibilidad de nuestro navegador con css3 es una labor indispensable para los que estamos en el mundo del diseño web, y en la actualidad tenemos mucha ayuda para eso y se llama The CSS3 Test

Se trata de un sitio que pone a prueba nuestro navegador, entregándonos un detallado informe sobre las características de CSS3 que soporta y las que no, brindándonos además una calificación porcentual y un resumen de las pruebas totales que ha superado.

Un aspecto interesante es la manera en la que organiza los resultados, lo cual hace mucho más sencilla su lectura. Hay que tener en cuenta, eso sí, que la herramienta sirve solamente para saber qué características soporta el navegador, más no si dicho soporte está implementado o no de una manera más o menos correcta.

Vamos a mostrar como hacer animaciones de texto en CSS3, para ello se usa el Plugin Textillate.js

Textillate.js es un plugin jQuery que permite hacer efectos animados con texto utilizando CSS3.Está desarrollado aprovechando el potencial de las librerías animate.css y lettering.js. Combinando el uso de estas estupendas librerías, Textillate facilita enormemente la aplicación de animaciones CSS3 a cualquier texto.

A continuación podemos ver un ejemplo de lo sencillo que es animar texto con este plugin.

<h1 class="tlt">
    <ul class="texts">
        <li data-out-effect="fadeOut" data-out-shuffle="true">Some Title</li>   
        <li data-in-effect="fadeIn">Another Title</li>
    </ul>
  </h1>

El codigo para hacer la animacion

$('.tlt').textillate();

Para lograrlo necesitamos: jQuery, animate.css y lettering.js

Fuente Textillate

Los generadores de codigo CSS3 son aplicaciones qu nos ayudan a crear buenos efectos y diseños unicos paranuestra web

En ocaciones cuando no logramos obtener los resultados que deseamos usamos los Inspectores de elementos de los navegaodores avanzados o el Firebug para Firefox. Pero no mas ya que podemos obtener esos y mejores resultados de una forma legible obtenida desde los generadores de codio CSS3, que ademas nos ayudan a aprender esta nueva tecnologia de la web.

Generador de Botnes CSS3

cssbuttongenerator.com

Es una excelente herramienta que genera botones con css3 permitiéndonos la configuración de cada elemento del botón.

Generador de Sombras CSS3

Generador de Sombras CSS3

Excelente para crear un aspecto de sombra para nuestro sitio o sistema web sin usar imágenes recortadas

Generador de Bordes Redondeados con CSS3

CSS3.me

Esta herramienta prácticamente hace que nos ahorremos mucho tiempo en buscar como hacer los ya conocidos bordes redondeados.

Espero les sea de utlidad estos generadores de CSS3, y en proximas oportunidades estare publicando otros mas.

Workless es un framework HTML5 y CSS3 que nos permite crear sitios cross-browser de una manera óptima ya que influye todos los elementos basicos que se usan con freacuencia para crear sitios de este tipo

Este proyecto fue desarrollado en base a un marshup de Bootstrap y HTML5 Boilerplate convirtiendolo en un framework mas completo ya que cuenta con un sistema de grillas y estilos para formularios, tablas, botones etiquetas, notificaciones y tipografía. Adema cuenta con fuentes de icono y algunos plugins de Jquery integrados como modales, tooltips y formato de texto.

Como usar Workless?

Para usar workless simplemente tienes que instalar la base en el nuevo proyecto y llamar a los archivos css y javascript que se encuentan en la misma; luego tocaría personalizar el codigo html5 y css a tu gusto

Se puede descargar desde http://workless.ikreativ.com/