YAML: framework CSS

ByLuis

YAML (Yet Another Multicolumn Layout) es un framework XHTML/CSS que nos permite crear plantillas para diseños web proporcionandonos diferentes tipos de layouts. Está basado en estándares, es sencillo de usar y comprobado en sitios web profesionales.
yaml.png
A parte, nos ofrece una herramienta online para crear nuestros propios diseños de forma rápida y sencilla. Tan solo deberemos indicar el tipo de diseño, los tamaños, podremos añadirle elementos HTML y por último recuperar el código fuente.
YAML
Vía / Ajaxian

Similar Posts

|

CSS grid: filas con misma altura

ByLuis

Tener un grid con todas las filas al mismo tamaño puede ser algo difícil de conseguir. El problema viene con que CSS grid toma el tamaño de las filas según el tamaño máximo de sus celdas.

Para conseguir ello es necesario que el contenido de la celda tenga posicionamiento absoluto, y jugar con ::before para simular contenido vacío que rellene la celda:

.grid {
  margin: 0 auto;
  width: 60vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  grid-auto-rows: auto;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grid--same-height .cell {
  position: relative;
}
.grid--same-height .cell::before {
  content: "";
  display: inline-block;
  padding-bottom: 100%;
}

.grid--same-height .content {
  height: 100%;
  position: absolute;
  margin-top: -100%;
}

Teniendo en cuenta que el HTML sería:

<div id="grid" class="grid">
  <div class="cell">
    <div class="content">
      <img src="https://picsum.photos/500/500"/>
    </div>
  </div>
  ...
</div>

Para el ejemplo uso picsum.photos, un lorem ipsum para fotos que permite indicar distintos tamaños de imágenes.

Podéis ver un ejemplo en este pen

CSSeasy: layouts CSS

ByLuis

Uno de los trabajos iniciales con los que nos solemos encontrar al empezar un proyecto web es la de realizar el diseño inicial de la estructura de la página (layout). Normalmente se suele hacer un copy/paste de un proyecto anterior, pero en el caso de que no dispongamos de esa base previa, siempre podemos buscar en un lugar donde nos lo ofrezcan.
CSSeasy nos ofrece 8 diseños, 4 estáticos y 4 fluidos. Siendo los 4 diseños para los dos diferentes tipos los siguientes: 1 columna sin navegación, 1 columna con navegación arriba, 2 columnas con navegación izquierda y 2 columnas con navegación derecha.
csseasy.png
Lo que se echa en falta es una explicación más detallada, ellos recomiendan ver el código fuente y experimentar con él, el código está algo comentado, pero quizás no sea necesario para gente que se esté iniciando en el diseño web o que pasen de diseño con tablas a diseño sin tablas.
CSSeasy.com
Vía / Digg

|

Mastering the 960 Grid System

ByLuis

We’re already familiar with the 12- and 16-column variants of 960.gs, but did you know that a 24-column alternative exists too? In this article, you’ll master the 960 grid system by dissecting the 24-column version demo. If you’ve only used 960gs before for Photoshop mockups, consider this your lucky day. By the end of this article, you’ll be able …

Post original

|

Presentando CSS World Awards

ByLuis

css-world-awards-logo.gif En CSS Manía acabamos de anunciar el primer certamen que premiará a los mejores diseños en CSS.

Desde el primer día que lanzamos CSS Manía, teníamos en mente el galardón. Pensábamos organizarlo mediante votación popular pero sabiendo del lío que se podría montar qué mejor opción que contar con un prestigioso y relevante jurado como el que forman: Andy Budd, Cameron Moll, Molly E. Holzschlag, Roger Johansson y Sergio Villareal donde la calidad y el valor de los futuros premiados obtiene mayor reconocimiento.

Read More “Presentando CSS World Awards”

6 formas de hacer un diseño destacable

ByLuis

A la hora de hacer diseños mucha gente puede opinar sobre ello mejor que yo, pero a mí estos consejos me han gustado. Está claro que en muchos diseños no se pueden usar, pero para algunas circunstancias sí son interesantes de aplicar.

  • Fondos de pantalla grandes: los fondos de pantalla grande pueden hacer que el diseño resalte, a parte de que son fáciles de añadir.consejos1.png
  • Layout original: no es la primera vez que veo diseños con secciones de tamaños que superan el ancho y alto del navegador y que para acceder a cada sección hay que hacer un scroll progresivo (mediante javascript). Son originales y en algunos casos muy acertados. En el ejemplo que os pongo, cada color es una sección y el tamaño original tiene un ancho de 6000px.consejos2.png
  • Navigación creativa: la navegación puede dar mucho juego para mejorar el diseño, ya sea mediante rollovers u otras cosas. Eso sí, ante todo que prime la usabilidad. En el ejemplo que os paso los menús van a juego con los colores de la calle.consejos3.png
  • Minimalismo: aunque por ahora se ha tratado de consejos con un gran diseño, eso no implica que un gran diseño tenga que ser aparatoso, puede ser perfectamente minimalista, lo cual hace que llame mucho la atención.consejos4.png
  • Logo: está claro que un buen logo hace que te represente y además te diferencie.
  • Layout horizontal: aunque la gente está acostumbrada al scroll vertical, este tipo de diseño puede llegar a ser muy atractivo, aunque haya gente que lo odie.consejos6.png

6 Methods to Make Your Website Standout