• Publicidad
  • Contacto
Tech News, Magazine & Review WordPress Theme 2017
  • Noticias
    • Evento
    • Capacitación
    • Recursos
  • Video
  • Podcast
  • Ciencia
    • Salud
    • Ciencia Ficción
    • Historia
    • Marketing Digital
    • Software
      • Seguridad
      • Privacidad
      • Internet
      • Desarrollo/programación
      • Diseño
  • Tecnología
    • Innovación
    • LifeStyle
    • Audio & Video
    • Fotografía
    • Transformación Digital
  • Entretenimiento
    • Ciencia Ficción
    • Cine
    • Trailers
Sin resultados
Ver todos los resultados
Pixelco Tech
  • Noticias
    • Evento
    • Capacitación
    • Recursos
  • Video
  • Podcast
  • Ciencia
    • Salud
    • Ciencia Ficción
    • Historia
    • Marketing Digital
    • Software
      • Seguridad
      • Privacidad
      • Internet
      • Desarrollo/programación
      • Diseño
  • Tecnología
    • Innovación
    • LifeStyle
    • Audio & Video
    • Fotografía
    • Transformación Digital
  • Entretenimiento
    • Ciencia Ficción
    • Cine
    • Trailers
Sin resultados
Ver todos los resultados
Pixelco Tech
Sin resultados
Ver todos los resultados

Ahorra tiempo y esfuerzo en el diseño usando un framework CSS

Diego Cambiaso por Diego Cambiaso
20/02/2009
en Desarrollo/programación, Diseño, Recursos
Tiempo de lectura2 minutos
Compartir en FacebookCompartir en TwitterCompartir en WhatsappCompartir en TumblrCompartir en Telegram

Para trabajar con el diseño de un sitio y crear su CSS, ver las tipografías, hacer los ajustes necesarios para imprimir el contenido, etc., una excelente forma de ahorrar tiempo y hacer las tareas mucho más fáciles, es usar algún framework CSS, que por estos días abundan y ofrecen muchas opciones que sin dudas hacen que nuestro trabajo sea mucho más fácil.

golden-gridHe probado muchos de estos recursos, pero sólo he usado uno, no obstante, les presento los que me parecen que son más interesantes y potentes.

Ya pasó algún tiempo desde que descubrí BluePrint, este es un framework que, como casi todo los de su tipo, ayuda acortar los tiempos de desarrollos de la maquetación, brindando un sistema de reticulado, de tipografía, de reseteo de la CSS, etc. De esta forma con este, podemos crear una reticula e ir posicionado el contenido para luego desarrollar la CSS.

Luego conocí 960.gs que es similar a BluePrint pero que ofrece un ancho 960px además de dos variaciones de 12 y 16 columnas. El motivo de usar 960 píxeles, es debido a que en la actualidad, muchos monitores poseen una resolución de 1024×768 y esta magnitud es divisible por 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 y 480. Ya tengo planeado en mi próximo proyecto, usar a 960.gs en vez de BluePrint, justamente porque creo que se adapta mejor a las espcificaciones del diseño.

The Golden Grid fué el último de estos frameworks CSS que descubrí por medio del sitio Web Resources Depot. Este se especializa en presentar un modelo de diseño basado en un reticulado, de hecho ofrece: variaciones de 6 y 12 columnas, un reticulado, otro para incluir fotos y videos, etc.

emastic que es otro framework CSS, también creado por Vladimir Carrer que es el mismo de The Golden Grid. Este entorno se caracteriza por: ser muy liviano (menos de 4kb); permitir personalizar el ancho de página en: em, px y %; utilizar columnas fijas y fluídas; etc.

Por último, también le quería recomendar YAML, este es muy completo, ofrece todo lo que uno esperaría de un producto de su tipo y mucho más, documentación, demos, ejemplos muy completos y también, una herramienta de edición online.

¿Por qué usar un framewrok CSS?

Ofrecen muchas ventajas entre ellas, son muy fáciles y rápidos de aprender y en verdad ayudan mucho a trabajar en cada detalle del diseño, sobre todo si la plantilla que nos pasa el diseñador gráfico es muy elaborada.

Y tú ¿cuál conoces? ¿cuál utilizas?

Tags: 960960.gsBluePrintCSSCSSDiseñoemasticframeworkmaquetacionRecursosThe Golden GridYAML
Diego Cambiaso

Diego Cambiaso

Comunicador Social, Desarrollador de Software y UX Designer. Blogger desde el 2006, creador de Pixelco Tech. Viajero y fotógrafo. Entusiasta del diseño, apasionado por la tecnología y el social media. EN-ES-IT

RelacionadoEntradas

Microsoft Teams - Interface
Noticias

Microsoft Teams disponible para usuarios de Office 365 en el mundo

por Diego Cambiaso
20/03/2017

Microsoft liberó Microsoft Teams para usuarios de Office 365 en 181 mercados y en 19 idiomas. Office 365 está diseñado...

Imac retina 5k con 1TB
Diseño

Los mejores gadgets para diseñadores

por Diego Cambiaso
27/09/2016

Por la mente del diseñador pasan mil ideas por segundo, es este talento el cual hace que sea un profesional...

Descubre una colección fantástica de íconos para sistema operativo de teléfono

Descubre una colección fantástica de íconos para sistema operativo de teléfono

22/03/2015
Descubre más de 40 fuentes con un diseño muy especial y hermoso

Descubre más de 40 fuentes con un diseño muy especial y hermoso

08/03/2015
Siguiente
Descarga gratis WP WooThemes Ultimate Icon Set, una colorida colección de íconos

Descarga gratis WP WooThemes Ultimate Icon Set, una colorida colección de íconos

Comentarios 5

  1. rodrigo garcía says:
    15 años

    Personalmente he probado y trabajado con 960, Blueprint y YAML y siempre he tenido los mismos inconvenientenes: son demasiado grandes, ocupan mucho código para armar la estructura y a veces ocupan contenedores vacíos para hacerlo. Hace 1 año decidí tomar los, a mi juicio, mejores principios y técnicas de cada uno e hice mi propia grilla o framework css. Hace un mes atrás decidí compartirla ya que me ha sido de gran utilidad al estar adaptada a mis necesidades como diseñador y tomando como base la simpleza y facilidad como base para construirla. Se llama Simple, Grilla CSS y tanto el código, como su manual y ejemplos estan en mi blog a disposición de todos los que quieran usarla: http://rgarcia.cl/compartiendo-una-grilla-css-de-uso-personal/

    Ha sido testeada en Firefox (Windows, Mac Ubuntu) | Explorer 7, 6 y 5.5 (Windows) | Opera (Windows) | Chrome 0.2.1 (Windows) | Safari (Windows, Mac) y el despliegue es consistente en todos. No usa contenedores vacíos para estructurar las secciones y está en español.

Pixelco Tech

VideosReviews - Tutoriales
El HONOR Magic V2 llegará con una función de juego que cambiará el futuro del gaming móvil

El HONOR Magic V2 llegará con una función de juego que cambiará el futuro del gaming móvil

25/08/2023
    Resistencia: La última esperanza de la humanidad – Trailer

    Resistencia: La última esperanza de la humanidad – Trailer

    12/08/2023
      Misión: Imposible – Sentencia Mortal Parte I 

      Misión: Imposible – Sentencia Mortal Parte I

      12/08/2023
        2001 Space Odyssey una historia de evolución que incluye IA

        2001 Space Odyssey una historia de evolución que incluye IA

        12/08/2023
          Master E-Tech el utilitario 100% eléctrico ya disponible en Colombia

          Master E-Tech el utilitario 100% eléctrico ya disponible en Colombia

          12/08/2023
            4+2 Herramientas profesionales de inteligencia artificial para la generación de imágenes

            4+2 Herramientas profesionales de inteligencia artificial para la generación de imágenes

            26/05/2023
              SSD Predator: la nueva munición de BIWIN para gamers exigentes

              SSD Predator: la nueva munición de BIWIN para gamers exigentes

              29/11/2023
              Nexxt Home lanza cerradura conectada: 10 meses de batería y apertura por app

              Nexxt Home lanza cerradura conectada: 10 meses de batería y apertura por app

              29/11/2023
              Samsung reafirma su apoyo a la candidatura de Busan como ciudad anfitriona de la Expo 2030

              Samsung reafirma su apoyo a la candidatura de Busan como ciudad anfitriona de la Expo 2030

              27/11/2023
              Samsung Galaxy M34 5G – Ficha técnica y experiencia de uso

              Samsung Galaxy M34 5G – Ficha técnica y experiencia de uso

              24/11/2023
              Conoce en profundidad qué es Dolby Atmos: la revolución del sonido envolvente

              Conoce en profundidad qué es Dolby Atmos: la revolución del sonido envolvente

              23/11/2023
              La Inteligencia Artificial revoluciona el sector de la salud: impulsando la eficiencia y la calidad de la atención médica

              La Inteligencia Artificial revoluciona el sector de la salud: impulsando la eficiencia y la calidad de la atención médica

              20/11/2023

              Pixelco Tech

              Pixelco Tech es sitio de noticias de tecnología, diseño y desarrollo web e Internet escrito por profesionales.

               

              Objetivo de Pixelco Tech

              Informar, promocionar, proporcionar recursos y ayuda sobre el diseño y desarrollo web, estándares, Internet y tecnología.

              Buscar

              Sin resultados
              Ver todos los resultados
              • Contacto
              • Publicidad
              • Sobre Pixelco
              • Política de Privacidad
              • Términos del Servicio

              © 2023 Pixelco por Diego Cambiaso.

              Sin resultados
              Ver todos los resultados
              • Noticias
              • Video
              • Podcast
              • Ciencia
              • Tecnología
              • Entretenimiento
                • Ciencia Ficción
                • Cine
                • Trailers
              • Pixelco
                • Sobre Pixelco
                • Política de Privacidad
                • Política de cookies
                • Términos del Servicio
                • Publicidad

              © 2023 Pixelco por Diego Cambiaso.

              Welcome Back!

              Login to your account below

              Forgotten Password?

              Retrieve your password

              Please enter your username or email address to reset your password.

              Log In

              Add New Playlist

              Este sitio web utiliza cookies. Si continúa utilizando este sitio web, está dando su consentimiento para que se utilicen cookies. Visite nuestra Política de Privacidad y Política de Cookies.