CSS

Listado de Frameworks para CSS

Los frameworks CSS disponen una serie de clases (de hojas de estilo) ya creadas con las que ayudar a posicionar elementos en la página y crear estructuras de maquetación, más o menos versátiles. Así, en el desarrollo de páginas nuevas, o en el rediseño de páginas antiguas, podemos ayudarnos de frameworks CSS para disponer de una rejilla donde posicionar los distintos componentes de nuestro diseño. Con ello nos ahorraremos el tiempo de tener que crear de nuevo decenas de clases que estamos aburridos de implementar para crear maquetaciones a 2, 3 ó 4 columnas, con divisiones de cabecera, cuerpo y pie, etc.

960 Grid System

Es, tal vez, el más utilizado de los frameworks CSS, cuyas páginas se construyen en anchuras de 960 píxeles (de ahí su nombre). Ofrece dos posibilidades de maquetación de páginas, con una rejilla de 12 ó 16 columnas. Nosotros escogimos este framework CSS para explicarlo a los lectores de DesarrolloWeb.com, justamente por ser tan popular. En nuestro trabajo con este sistema hemos podido comprobar que es muy versátil y sobre todo, sencillo de utilizar.

Página web de 960 Grid System
Manual de 960 Grid System

Simple

Este framework CSS lo presenta un desarrollador chileno, con lo que todos los ejemplos y documentación que puedas encontrar está en español. El creador lo ha realizado para poder simplificar las cosas, no sólo en el desarrollo de las páginas, sino también en el aprendizaje. Lo destacamos en segundo lugar por ser un producto en castellano, que siempre se agradece tener herramientas para trabajar en nuestro propio idioma.

Página web de Simple
Artículo en DesarrolloWeb.com sobre Simple

Blueprint

Es un framework CSS que pretende reducir el tiempo de desarrollo de las páginas web. Ofrece una estructura sólida en la que fundar tu trabajo de diseño, por medio de la típica rejilla. Pero no se limita simplemente a eso, sino que ofrece otra serie de clases muy útiles para estilizar componentes típicos, como formularios, botones, pestañas, tipografías o para que tus páginas web se puedan imprimir de manera óptima en papel.

Página web de Blueprint

YUI Grids CSS

El framework CSS de Yahoo! Es un código CSS que permite maquetar páginas con distintas anchuras (750px, 950px, y 974px) y hacer todas las cosas típicas que se pueden desear en una página. Tiene 6 plantillas predefinidas y la posibilidad de crear más de 1.000 combinaciones de maquetación, en regiones de 2, 3 y 4 columnas. Forma parte de la Yahoo! User Interface Library, lo que da una garantía adicional, por venir de tan renombrado buscador.

Página web de YUI Grid CSS

Tripoli

Tripoli no es un framework CSS y según remarcan los creadores, ello significa que no te obliga a desarrollar tu página de una manera determinada. En contra, lo que ofrece es un código CSS que resetea los estilos predefinidos de los navegadores y los redefine, consiguiendo una base estable sobre la que realizar un sitio y que se vea igual en cualquier cliente web. Puede ser interesante porque intenta no caer en los problemas que tienen los frameworks CSS.

Página web de Tripoli

Boilerplate

Este framework me ha parecido interesante porque está creado por uno de los desarrolladores iniciales de Blueprint, que ha fundado el nuevo proyecto para poner en marcha sus ideas particulares. Como él dice, este framework está pensado para simplificar las cosas y ser ligero, aportando todo lo básico para poder maquetar una web, pero sin las complejidades que tiene Blueprint y con convenciones de nombres que dan más sentido y significado a lo que estamos codificando.

Pagina web de Boilerplate

BlueTrip

Según sus creadores, BlueTrip es una combinación de lo mejor de distintos frameworks CSS de los que hemos hablado ya. Su nombre viene de la unión de BLUEprint – TRIpoli, haciendo referencia a esa unión de ideas de los mejores framewoks, entre los que también se han inspirado en nuestro framework preferido en estos momentos, 960 grid, por su sencillez.

Página web de BlueTrip

Otros Framework CSS

Pongo otros frameworks CSS que he encontrado y que no he investigado tanto las posibilidades que ofrecen, aunque también pueden ser interesantes, sobre todo puede que den enfoques diferentes que puedan ser útiles en ciertas ocasiones.

Elements
ESWAT
Content with style
My CSS Framework
Hartija
Malo (Framework CSS ultra pequeño)
emastic

read more

Diseño de Temas para WordPress

He aqui un ejemplo diseño con css de un tema (solo el index) wordpress, de 3 columnas, una barra de navegación , pie de página y cabecera de página, la imagen que se muestra debajo describe el funcionamiento del mismo, y los detalles que se aplican con el css, debajo de la imagen el codigo html para general la web y el css que la formatea.

trescolumnas

Este diseño cuenta con lo siguiente:

- Container
- Header
-Top Navigation Menu
- Left Navigation Menu
- Right Navigation menu
- Content Part
- Footer

Aqui vemos el codigo html del index:

<div id=container>
<div id=”header”>
<h2>Header</h2>
</div>
<div id=”topnav-container”>
<ul id=”topnav”>
<li> <a href=”#”>Home</a> </li>
<li> <a href=”#”>Categories</a> </li>
<li> <a href=”#”>Services</a> </li>
<li> <a href=”#”>About us</a> </li>
<li> <a href=”#”>Contact us</a> </li>
</ul>
</div>
<div id=”leftnav”>
This is a left navigation bar.
This is a left navigation bar
This is a left navigation bar
</div>
<div id=”rightnav”>
This is a right navigation bar
</div>
<div id=”content”>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod

tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam
</p>
</div>
<div id=”footer”>
<h2>Footer</h2>
</div>
</div>

Aqui vemos el CSS que formatea este diseño:

#container {
margin: 10px auto;
width: 95%;
border: 1px solid gray;
}
#header {
padding: 3px;
border-bottom: 1px solid gray;
}
#topnav-container {
border-bottom: 1px solid gray;
padding: 4px 0;
background: #e0e0e0;
}

%

read more

CSS: Color y Background

css-background

La propiedad CSS background te permite controlar el color de fondo de cualquier elemento, indicarlo como imagen, repitiendo la imagen de fondo verticalmente u horizontalmente y la posición de la imagen de fondo en la página.

Si deseamos indicar el fondo con un color, el código CSS sería este.

body {background-color: #00ff00}
body {background-color: #00ff00}

En este ejemplo el elemento al que se le ha añadido color es el cuerpo de la página,pero puede ser cualquier otro elemento.

Para colocar la imagen de fondo sería así:

body {background-image: url(‘tuimagen.jpg’) }

read more