960.GS CSS Plantilla y Tutorial de Fotografía CSS

Lo ames o lo odies, el 960.gs es un prototipo increíblemente rápido. Al utilizar clases preestablecidas, puede lograr diseños bastante complejos con poco o ningún esfuerzo.

Hoy le traemos una plantilla gratuita de una sola página, totalmente codificada utilizando 960.gs. La plantilla tiene algunos efectos CSS3 ingeniosos y utiliza @ font-face para implementar algunas tipografías personalizadas hermosas. A continuación, encontrará la descarga y un tutorial básico paso a paso sobre cómo crear el suyo propio.

Puede descargar la plantilla de forma totalmente gratuita y utilizarla como desee sin atribución.

Descargar la plantilla

  • Vista previa en el navegador
  • Descargar .ZIP

Aquí hay una vista previa rápida de cómo se ve la plantilla:

Descarga los recursos 960.GS

Lo primero que querrás hacer es dirigirte al sitio web de 960 Grid System y hacer clic en el botón de descarga en la parte superior izquierda de la página.

La descarga tiene un montón de cosas, pero lo único que necesitamos son tres archivos CSS: reset.css, text.css y 960.css. Estos son los componentes estándar sobre los cuales se construye el sistema de red. Las hojas de estilo de reinicio y texto son completamente opcionales, pero las usaremos para garantizar que todo se mantenga agradable y coherente en varios navegadores.

El siguiente tutorial asumirá que estás bastante familiarizado con CSS y 960.gs. Si necesita un curso intensivo sobre sistemas de red, consulte mi guía 960 en Six Revisions.

Paso 1: Comience sus archivos HTML y CSS

Además de los archivos CSS que vienen con 960.gs, necesitaremos los nuestros. Cree un directorio en su máquina, agregue los archivos que descargó y cree un archivo index.html y un archivo style.css.

Pegue el siguiente código en su HTML para comenzar:

Básicamente, solo hemos vinculado a nuestros diversos archivos CSS (probablemente demasiados para una sola página web, pero esto está diseñado para expandirse) e iniciamos el cuerpo HTML.

El diseño presenta barras delgadas grises en la parte superior e inferior de la página. Queremos que estos se extiendan a lo largo de toda la página, por lo que los colocamos fuera de los 960 div.

A continuación, entre el encabezado y el pie de página hay un div con una clase de "container_12". Ya que estamos usando la versión de 12 columnas del sistema 960, esto creará un div que se extiende a lo largo de la página y se centra automáticamente en forma horizontal.

Paso 2: Las Fuentes

Usaremos dos fuentes personalizadas que no sean web para este proyecto: Lobster y Caviar Dreams. Ambos se pueden encontrar en la biblioteca del kit FontSquirrel @ Font-Face.

Descargue los kits para cada fuente y coloque los diversos archivos de fuentes en su archivo de proyecto. En el CSS que viene con cada kit, debe encontrar el código @ font-face para incrustar esa fuente. Tome el fragmento de cada fuente y péguelo en su archivo stye.css.

Usando este código, ahora podemos incluir estas fuentes en nuestras pilas de fuentes simplemente escribiendo 'Lobster13Regular' o 'CaviarDreamsRegular'.

Paso 3: Encabezado

Como ya agregamos el encabezado a nuestro HTML, todo lo que tenemos que hacer para que aparezca es agregar un estilo básico.

Básicamente, todo lo que hemos hecho aquí es darle al encabezado una altura y un color de fondo.

Paso 4: Navegación HTML

Lo primero que aparece después del encabezado es la navegación. Esto es un poco complicado ya que está flotando en el lado derecho de la página. Podríamos establecer una clase 960 y luego usar el comando push, pero es mucho más fácil simplemente no aplicar ninguna clase al div y el float con CSS.

Para el HTML solo necesitamos una lista desordenada estándar con algunos enlaces. He incluido algunos enlaces de marcadores de posición aquí, pero obviamente querrás personalizar esto para tu propio sitio.

Paso 5: navegación CSS

A continuación tenemos que configurar un montón de estilos para la navegación. Los enlaces, las listas no ordenadas, los elementos de la lista y los efectos de desplazamiento tienen que resolverse.

Observe que hemos establecido la fuente en Caviar Dreams como aprendimos anteriormente y nos aseguramos de que se incluyeran algunas copias de seguridad en caso de que el navegador no cargue la fuente adecuada.

Lo más extraño aquí es que hemos usado un flotador a la izquierda y otro a la derecha. Para que los elementos de la lista aparezcan en una línea en lugar de apilados, tenemos que hacer flotar los "ul li". izquierda. Para hacer que el conjunto se adhiera al lado derecho de nuestro div contenedor, flotamos el #nav a la derecha.

Todo lo demás es solo un conjunto de estilos básicos como el color, el tamaño de fuente, etc. Para diferenciar el enlace al pasar, apliqué un subrayado simple.

En este punto su página debería estar empezando a tomar forma. Asegúrese de que se vea cerca de la vista previa a continuación.

Paso 6: Encabezado HTML

Después de la navegación, agregue un div con un id de? Titular? y una clase de? grid_12? La clase grid_12 hará que el ancho del div sea igual al de todo el contenedor. Dentro de ese div coloque una etiqueta h2 y una etiqueta de párrafo con algún contenido.

Observe que después de los divs de navegación y encabezados hay un div con una clase de 'clear'. Así es como el 960 Grid System borra los flotadores implementados anteriormente. Asegúrate de lanzar esto cuando quieras comenzar una nueva fila de contenido.

Paso 7: Encabezar CSS

A continuación, agregue los estilos para el título, la etiqueta h2 del título y la etiqueta del párrafo del título. Configuré el h2 a 50px Lobster y el párrafo a 25px Caviar Dreams.

Con eso, tu página ahora debería tener una barra superior, un área de navegación y un buen titular.

Paso 8: El HTML de Big Photo

Para agregar en la foto, usaremos un div vacío con la clase grid_12 y estableceremos el fondo usando CSS.

Paso 9: El Big Photo CSS

Para el CSS, establecimos una imagen de fondo para el div, le dimos un borde de 3px y aplicamos una sombra CSS3-box. El borde blanco no se mostraría sobre un fondo blanco, por lo que la sombra le da cierta profundidad a la imagen.

Paso 10: Línea de artículo HTML

El último fragmento de HTML que necesitamos son los cuadros y el texto en la parte inferior de la página.Las diseñaremos con una clase para que sea más fácil agregarlas más adelante.

Para construir esta sección queremos dos columnas: una para la imagen y otra para el texto al lado. Aquí es donde el 960.gs nos lo pone fácil. Ya que estamos usando la versión de 12 columnas, queremos que nuestro número total sea doce para que se extienda por todo el contenedor.

Aplicando el? Grid_4? clase seguida por el? grid_8? clase, obtenemos dos columnas, la primera de las cuales es la mitad del ancho de la segunda (8 + 4 = 12).

Observe que hemos duplicado nuestro código e insertado diferentes imágenes. Esto nos da dos de los? LineItem? áreas Simplemente agregue otro fragmento duplicado para agregar un tercero o cuarto.

Paso 11: CSS de línea de pedido

A continuación, agregamos un montón de estilo a esta área para que se vea bien. Dale a las imágenes una sombra y un contorno y aplica las fuentes apropiadas.

Tenga en cuenta que hemos utilizado? Esquema? en lugar de? frontera? aquí. Este es un buen truco de CSS que esencialmente le permite tener un borde de imagen que no arruina su diseño.

Cuando haya terminado, sus artículos de línea deben verse impresionantes y se dividirán en columnas claramente definidas.

Paso 12: CSS de pie de página

El paso final es aplicar los mismos estilos al pie de página que al encabezado. Esto le da al sitio un buen contraste pesado en la parte inferior y superior.

Resultado final

¡Eso debería darle un producto acabado de trabajo! Observe que la mayor parte de nuestro trabajo fue realmente en el estilo de los objetos que colocamos en la página. No pasamos casi tiempo preocupándonos por el posicionamiento. Este es el cuadro principal de los sistemas de red como 960 y Blueprint.

Podemos argumentar semántica todo el día, pero al final, estas herramientas lo ayudan a enfocarse más en el diseño y menos en los problemas de diseño. Es probable que mientras más experiencia tenga con CSS, menos verá la necesidad de usar un sistema de cuadrícula para realizar el diseño por usted, pero hasta entonces es bueno que sus problemas se resuelvan antes de que surjan.

Conclusión

Como es inevitable en este tipo de publicaciones, varias personas sin duda dejarán comentarios en los sistemas de grillas. La verdad es que rara vez los uso. Sin embargo, veo su valor y disfruto jugueteando con ellos para ver qué puedo hacer. En pocas palabras, si no te gusta 960.gs, ¡no descargues la plantilla!

Sin embargo, si te sientes cómodo con los sistemas de grilla y te gustan las cosas gratis, descarga el archivo y retócalo. Si lo usa en un proyecto, lance un enlace a continuación (opcional) para que pueda verificar cómo lo implementó y extendió el diseño. Si necesitas una sugerencia, esa gran foto está gritando para que se convierta en un control deslizante de jQuery.