CSSBlog ES » frameworks

520 Grid System, framework orientado a Facebook

Pedro CM — Sat, 27 Nov 2010 14:06:38 +0000

Las páginas de fan son el medio ideal de las empresas en Facebook para promocionarse y conseguir nuevos clientes, fidelizándolos. 520 Grid System te facilita la tarea, ya que es un framework orientado específicamente a FBML (Facebook Markup Language), que ayuda a realizar el proceso de boceto y diseño. Cuenta con 12 columnas fáciles de dividir en el caso de que deseemos tener un diseño fluido. Por ahora no contiene estilos para textos, tablas, formularios, pero se encuentra en la lista de tareas.

En esta página de Facebook podéis ver un ejemplo de su funcionamiento. A continuación muestro su página oficial:

Ver la página oficial del framework 520 Grid System

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

The 1KB Grid CSS, un framework extremadamente simple

Fem CSS Framework

Centage, un framework avanzado basado en CSS/LESS

Fem CSS Framework

Pedro CM — Sat, 27 Nov 2010 12:44:33 +0000

Fem CSS es un framework muy ligero (todos los módulos comprimidos pesan cerca de 10 kb, y sólo la grilla 6.5 kb). Ha sido inspirado en 960 grid system, es una grilla de 12 columnas con un acho de 960 píxeles. Según el autor, trabajar con 12 columnas es más cómodo que trabajar con más, por ello esta peculiaridad. Podemos obtener columnas más anchas sin modificar nuestra hoja de estilo, es muy simple trabajar con él. A continuación os muestro la página oficial del framework, desde donde podréis descargarlo. Recordad que existen más frameworks además de este, que os pueden ser muy útiles.

Ver la página oficial del framework

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

520 Grid System, framework orientado a Facebook

Baseline, Framework HTML5 + CSS3

Centage, un framework avanzado basado en CSS/LESS

Centage, un framework avanzado basado en CSS/LESS

Pedro CM — Mon, 15 Nov 2010 22:16:31 +0000

Centage es un framework complejo orientado a crear simples y avanzadas estructuras fácilmente. Está basado en less.js, una implementación en Javascript de less.css, y hace uso de sus funciones avanzadas, como pueden ser las variables, mezclas y la jerarquización. No utiliza ningún valor en píxeles, menos la expansión y compresión dependiendo de la anchura del navegador.

Por otro lado, La mayor desventaja de este framework es el requerimiento de Javascript para su funcionamiento, aunque existen otras soluciones ofrecidas en la página del autor.

Centage está en periodo alpha, y, aunque funciona en la mayoría de navegadores, en Opera da problemas y no está totalmente testeado en Internet Explorer.

Ver el framework Centage

Podéis ver más frameworks en CSSBlog.es.

¿Qué os parece?

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

El Framework todo en uno: BlueTripCSS

Fem CSS Framework

Baseline, Framework HTML5 + CSS3

MarkerCSS, un framework al estilo español

Pedro CM — Thu, 11 Mar 2010 18:15:59 +0000

MarkerCSS es un framework creado en castellano, que nos ayudará a maquetar nuestro código CSS de manera más cómoda y sencilla. Mediante referencias en las clases podremos aplicar estilos de forma cómoda, sin tener que ir a modificar el código CSS, porque ya vendrá todo listo. Únicamente tendremos que insertar en la clase la referencia correspondiente a la propiedad que deseemos insertar, con su valor, por ejemplo:

Configuración del body

Referencias “T” “A” “C” “GG” “V” “GV” “TT”
Esto crea referencias a familias de tipografías, por ejemplo “A” para Arial.

Referencia “s” + número del 7 al 20, y del 20 al 200 de 10 en 10
El tamaño de la tipografía; ejemplo “s14″ para un tamaño de 14 píxeles.

Referencia “c” + números prestablecidos
Ver colores prestablecidos; ejemplo “c16″.

Referencia “tl” “tc” “tr”
Alineación del texto ala izquierda, al centro a la derecha respectivamente, por ejemplo, “tc” para alinearlo al centro.

Podemos ver más ejemplos en su página oficial: http://www.markercss.com/index.php?page=ejemplos

Vídeos

Aquí os muestro varios vídeos, el primero sobre instalación de MarkerCSS y el segundo sobre cómo aprender a usarlo.

Zona de descarga

Podemos descargar Marker CSS desde este enlace:

Descargar MarkerCSS

Si lo deseas puedes revisar la lista de frameworks que existe en CSSBlog.es

Contenido exclusivo para los suscriptores del Feed RSS

¡Gracias por seguirnos cada día!. Tu fidelidad será premiada con contenidos exclusivos. Hoy puedes descargar:

20 iconos futuristas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

Fem CSS Framework

Baseline, Framework HTML5 + CSS3

Centage, un framework avanzado basado en CSS/LESS

CSScaffold, framework CSS con mejoras gracias a PHP

Pedro CM — Wed, 30 Dec 2009 13:56:31 +0000

CSScaffold es un framework CSS escrito en PHP. En lugar de crear un framework estático que utiliza las habilidades estándares de CSS, como BluePrint (no semántico e inflexible), usa PHP para extender el CSS. La sintaxis es exactamente como la de CSS, pero tienes nuevas y poderosas habilidades, así que incrementamos la productividad de los CSS Frameworks, gracias a las capacidades dinámicas de Cacheer. Con solo soltar Scaffold en tu sitio, tendrás acceso a todas sus funcionalidades, como pueden ser:

Constantes
Mixins
Selectores anidados
Expresiones
Cacheo y gzipping
Ampliable mediante plugin.

Todo esto con el uso de Cacheer. También existen otras novedades:

Crea un grid.png para tí.
Limpia, optimiza, comprime y cachea tu CSS directamente.
Redefine la manera de crear layouts. No tendrás que preocuparte por los floats, Scaffold lo hace por tí.
Viene con clases que simplifican tareas comunes, por ejemplo: #page {class:container; }
Acceso a los anchos de grid por variables
Fácil reemplazamiento de imágenes

Cómo funciona

Scaffold se encuentra en tu directorio CSS. Siempre que llames a un archivo CSS, .htaccess dirige la llamada a traves de Scaffold.

No tienes que hacer que trabaje de forma automática, pero puedes señalar directamente los archivos CSS a Scaffold.

Es mucho mejor ver vídeos para saber más sobre este Framework. Unos vídeos dicen más que mil palabras:

CSScaffold Introduction from Anthony Short on Vimeo.

Si deseas obtener más documentación (en inglés) acerca de CSScaffold, adelante.

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

Fem CSS Framework

Centage, un framework avanzado basado en CSS/LESS

Baseline, Framework HTML5 + CSS3

Aplica las modernas técnicas de CSS3 a IE6 con eCSStender

Pedro CM — Fri, 30 Oct 2009 18:31:25 +0000

Ya os he hablado varias veces de los frameworks, en esta entrada os mostraré otro, se llama eCSStender y es un framework Javascript que nos permitirá optimizar nuestra hoja de estilo, además de simplificar el proceso pudiendo utilizar selectores CSS avanzados, como border-radius o @font-face, entre otros, pero una cosa que debo destacar es que funcionarán en Internet Explorer 6 (también puedes ver que selectores CSS avanzados puedes usar por ahora con este framework -a medida que pasa el tiempo va siendo más compatible-).

El framework pesa 16 KB y puede de ser descargado desde su página oficial:

Ver página oficial de eCSStender y/o descargar el framework

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

Baseline, Framework HTML5 + CSS3

Fem CSS Framework

Qwery, nuevo selector CSS3

Baseline, Framework HTML5 + CSS3

Pedro CM — Thu, 03 Sep 2009 15:22:32 +0000

BaselineCSS es un framework pensado para personas que utilizan cuadrículas y dan gran importancia a la tipografía del sitio. Si utilizáis templates que dispongan de HTML5 + CSS3, es una buena opción para aquellos que deseen usar este frameworks con el propósito de aumentar sus conocimiento.

Lamentablemente sólo funciona con navegadores web avanzados, así que en Internet Explorer 6 y 7 no funcionará. Recomiendo actualizarse a otro navegador (o pedir a los usuarios que se actualizen) para disfrutar de las nuevas novedades del futuro de la web.

Visitar la página del framework Baseline CSS

Vía | CSSNoLanche

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

Comprobar la compatibilidad de novedades CSS3 y HTML5

Microsoft anuncia el soporte CSS3 & HTML5 para Internet Explorer 9 (IE9)

Espectacular animación 3D de Creative Commons con CSS3 y HTML5

The 1KB Grid CSS, un framework extremadamente simple

Pedro CM — Mon, 31 Aug 2009 23:10:35 +0000

Existen muchos frameworks complejos que lo hacen todo: CSS Reset, sistema de cuadrículas, estilos de forms… Pero lo complejo tiene su contra (son difíciles de modificar, ocupan mucho tamaño y enlentecen el sitio…). The 1KB Grid CSS es un framework extremadamente ligero y sencillo, que nos permitirá crear cuadrículas simples, pudiendo personalizarlas de forma fácil desde su sitio web antes de descargarlas.

Ver la página oficial de The 1KB Grid CSS y empezar a crear cuadrículas

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

520 Grid System, framework orientado a Facebook

Baseline, Framework HTML5 + CSS3

Fem CSS Framework

Frameworks sencillos para maquetar nuestra web

Pedro CM — Mon, 15 Jun 2009 12:49:47 +0000

No siempre los frameworks tienen porqué ser pesados y largos. Os hemos mostrado una lista de ellos (si no sabes qué es un framework visita esta guía), pero queremos indicar que también existen frameworks sencillos. Por ejemplo, Vladimir Carrer ha creado el framework más simple que existe, compuesto por solo 1 línea de código y 4 propiedades. Dicho framework se indica a continuación:

.dp50 {width:50%;  float:left;  display: inline;  *margin-right:-1px; }

Con este framework podremos crear estructuras basadas en CSS de 2, 4, 6, 8, 16… columnas gracias a la clase expuesta en el framework, que reduce el div al 50% de ancho.
Podemos ver algunas estructuras que usan este framework:
Ejemplo 1
Ejemplo 2
Ejemplo 3
Una de las mejores cosas de este framework es su compatiblidad con Internet Explorer, pudiendo ser compatible desde las versiones 5.5 en adelante.
Otro Framework sencillo es “Malo“, que cuenta con solo 8 líneas de código.
¿Utilizáis frameworks sencillos o complejos?

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

Frameworks CSS más usados

Lista de Frameworks CSS

Frameworks CSS y XHTML para desarrollar en iPhone

Orientación a objetos en CSS con cssWithVars

Pedro CM — Thu, 02 Apr 2009 06:00:35 +0000

Tomás Corral Casas (amischol) nos ha avisado de un plugin que ha creado que facilita la orientación a objetos en CSS, ya que reutiliza el código y utiliza variables. El plugin se llama cssWithVars y es gratuito.

Este es el mensaje que nos ha dejado acerca de su proyecto, cssWithVars :

Hoy he sacado a la luz la primera versión del plugin para jQuery que he dado a llamar “cssWithVars”. Tras muchos años de desarrollo web, una de las cosas que más me ha molestado es el no poder aplicar la orientación a objetos a los CSS, y siempre terminaba con código duplicado, además los frameworks CSS disponibles, actualmente, obligan al usuario a conocer y no facilitan la orientación a objetos. cssWithVars utiliza variables y permite la reutilización efectiva de código.

Descargaros el archivo con SRC, formas de uso en:

http://www.safecreative.org/work/0903222806064

Como bien dice, podéis descargar cssWithVars aquí: http://www.safecreative.org/work/0903222806064

Se añade la posibilidad de trabajar con variables en tu CSS.

1.- Primero se define la variable en nuestra hoja de estilos:

variable1 {

float:left; 

font-size:1em;

}

2.- La reutilizamos en otro lado “encorchetando” su nombre:

.titulo_post {

[variable1]

}

Se puede ver un ejemplo de su funcionamiento. gracias a CSSNoLanche.

¡Gracias Tomás!

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

Vídeo: CSS orientado a objetos (Object Oriented CSS)