Construya una página web receptiva y compatible con dispositivos móviles con Skeleton

Recientemente publicamos un artículo en el que se muestran 20 ejemplos asombrosos de uso de consultas de medios para el diseño web responsivo. Estas páginas web responden extremadamente bien a diferentes tamaños de ventanas de navegadores, desde enormes pantallas HD a teléfonos inteligentes.

Hoy vamos a mostrarle cómo usar una placa de calderas llamada Skeleton para eliminar los dolores de cabeza del diseño y la construcción de una página web receptiva. ¡Te sorprenderás de lo fácil que es!

¿Qué es el esqueleto?

La página de inicio de Skeleton describe el proyecto como "una pequeña colección de archivos CSS y JS que pueden ayudarte a desarrollar rápidamente sitios que se ven hermosos en cualquier tamaño, ya sea una pantalla de computadora portátil de 17" o un iPhone ".

Esencialmente, lo que ha hecho el creador de Skeleton, Dave Gamache, es reformar el antiguo marco 960 para enfrentar mejor los desafíos modernos que presenta la gran cantidad de dispositivos que acceden regularmente a la web. Aunque el proyecto también incluye algunos extras adicionales como jQuery, hoy nos centraremos principalmente en el aspecto del diseño. Tenga en cuenta que debido a que esta placa está muy bien organizada, es bastante fácil eliminar todo lo que no usamos. El autor pone un gran énfasis en la personalización: ¡guarda lo que te gusta, cambia lo que no!

Vistazo

Demostración en vivo: Haga clic para iniciar

Empezando

El primer paso es ir a descargar el proyecto. Después de descargar y descomprimir todo, abra el archivo HTML incluido y elimine todo el contenido del contenedor.

Antes de comenzar a crear la página, es importante averiguar cómo funciona todo. Skeleton se basa en un marco de cuadrícula, por lo que si odias los marcos de cuadrícula, no te va a ganar. Siéntase libre de dejar de leer ahora, deje un comentario desagradable sobre el desarrollo de la web semántica y siga adelante.

Para aquellos de ustedes que todavía están interesados, hay dieciséis columnas, cada una de las cuales tiene un margen izquierdo de 10 px y un margen derecho de 10 px. Con un ancho total de 960 píxeles para el contenedor, aquí están los tamaños para cada columna:

/ * Base Grid * / .container .one.column {width: 40px; } .container .two.columns {ancho: 100px; } .container .three.columns {width: 160px; } .container .four.columns {width: 220px; } .container .five.columns {width: 280px; } .container .six.columns {ancho: 340px; } .container .seven.columns {ancho: 400px; } .container .eight.columns {ancho: 460px; } .container .nine.columns {width: 520px; } .container .ten.columns {ancho: 580px; } .container .eleven.columns {ancho: 640px; } .container .twelve.columns {width: 700px; } .container .thirteen.columns {width: 760px; } .container .fourteen.columns {width: 820px; } .container .fifteen.columns {ancho: 880px; } .container .sixteen.columns {ancho: 940px; }

Al igual que con la mayoría de los sistemas de columnas, su objetivo es sumar el número total: 16. Entonces, si desea dividir la página entre dos columnas, debe crear dos divs separados y aplicar las clases: ¿ocho columnas? a cada.

Hay otras funciones útiles que también deberías conocer, como la capacidad de dividir el ancho en tercios. Simplemente aplicar el? Un tercio? o? dos tercios? Clases, que son iguales a 300px y 620px respectivamente.

.container .one-third.column {width: 300px; } .container .two-thirds.column {width: 620px; }

Además, para crear espacios vacíos o columnas vacías, agregue las clases de desplazamiento: desplazamiento por uno, desplazamiento por dos, etc. Cada uno de estos esencialmente agrega sesenta píxeles más de relleno para tener en cuenta las brechas en el contenido.

Hojas de estilo

El código de arriba proviene de la incluida? Skeleton.css? expediente. También hay otros dos archivos CSS importantes: base y diseño. El? Base.css? el archivo incluye estilos preestablecidos para tipografía, botones, formularios, pestañas, etc. La mayoría de lo que se encuentra aquí es completamente opcional y está destinado a ser anulado por el usuario. Si crees que esta repetición es demasiado fuerte para lo que quieres hacer o si tomas demasiado control, abandona este archivo.

El? Layout.css? El archivo es una hoja de estilo muy organizada pero aún en su mayoría vacía incluida para su comodidad. Aquí es donde colocarás cualquier CSS personalizado que quieras agregar a tu página. Este archivo CSS también contiene cualquier consulta @media adicional que desee implementar. Las consultas predeterminadas están en? Skeleton.css? y, básicamente, solo aplique un nuevo ancho a todas las clases de columna cuando la ventana se reduzca a ciertos tamaños.

Página web Paso 1: Navegación

Ahora que conocemos los conceptos básicos de Skeleton, ¡saltemos y construyamos una página web con él! Mantendremos el diseño agradable y mínimo para enfocarnos en lo limpio y organizado que todo saldrá casi sin esfuerzo por su parte.

Lo primero que queremos agregar a nuestra página es un elemento de logotipo simple y algunos enlaces de navegación. Cada uno de ellos tiene su propia división y le daremos a la primera una anchura de dos columnas y la segunda una anchura de catorce (2 + 14 = 16).

A continuación, vamos a poner un simple? DS? para Design Shack en el primer div y una lista de enlaces en el segundo div. Nos quedaremos con gran parte del estilo predeterminado del texto solo para que puedas tener una idea de lo que son los estilos de esqueleto.

<h1>DS</h1> <ul> <li>Casa</li> <li>Acerca de</li> <li>portafolio</li> <li>Contacto</li> </ul>

CSS de navegación

Skeleton se encargará de nuestro diseño y de la mayoría de nuestros estilos de texto. Todo lo que tenemos que hacer es agregar algunos márgenes verticales para poner todo lo que queremos. También decidí eliminar algunos de los estilos de enlace predeterminados a favor o en el mío.

Lo que he hecho es aplicar un espaciado superior a todo el contenedor solo para golpearlo un poco. También he movido los enlaces hacia abajo porque, de forma predeterminada, se alineaban con la parte superior de la gran? DS? Y los quería cerca del medio.

.container {margin-top: 50px; } #nav {margen: 13px 0 0 0; } #nav ul li {display: inline; margen: 0 20px 0 0; margen inferior: 130px; } #nav a {text-decoration: none; } #nav a: hover {text-decoration: underline; }

Con eso, hemos tenido un buen comienzo. El estilo de texto de Skeleton está saliendo muy bien y definitivamente se adapta al aspecto clásico y minimalista que buscamos aquí.

Paso 2: Imagen de encabezado

Al diseñar una página web receptiva, es importante comprender cómo funcionan las imágenes. Claro, cualquier cosa que muestre el navegador se puede cambiar de tamaño, pero ¿qué sucede cuando una imagen es demasiado grande para su contenedor de contratación?

Para responder a esta pregunta, arrojemos una gran imagen en la parte superior de nuestra página. Para hacer esto, agregamos otro div igual que antes. Será el ancho completo de nuestro contenedor, por lo que debemos aplicar las? ¿Dieciséis columnas? clases

<h1>DS</h1> <ul> <li>Casa</li> <li>Acerca de</li> <li>portafolio</li> <li>Contacto</li> </ul> <img src="//lesptitesaffairesdemayl.be/img/images_1/build-a-responsive-mobile-friendly-web-page-with-skeleton_4.jpg"> <h2>Paso 3: Mensaje de bienvenida</h2> <p>Estoy llamando a esta siguiente sección la de? Bienvenido? Sección simplemente porque no tengo otro buen nombre para ello. Ahora que hemos probado un área de navegación y una imagen, todavía necesitamos probar un párrafo de texto puro y uno que contenga imágenes mezcladas con texto. Este será el primero.</p> <p>Basándose en el mismo HTML que ya hemos construido, comience un nuevo div de dieciséis columnas y agregue un encabezado y un párrafo como se muestra a continuación.</p> <textarea wrap="soft" readonly=""> <h1>DS</h1> <ul> <li>Casa</li> <li>Acerca de</li> <li>portafolio</li> <li>Contacto</li> </ul> <img src="//lesptitesaffairesdemayl.be/img/images_1/build-a-responsive-mobile-friendly-web-page-with-skeleton_5.jpg"> <h2>Paso 4: Tres columnas</h2> <p>Ahora hemos hecho una sección de navegación, una imagen por sí misma y un párrafo por sí mismo. Es hora de crear algunas columnas que integren texto e imágenes juntas. Para lograr esto, usaremos el? Un tercio? clase que aprendimos acerca de arriba Esto nos permitirá dividir rápidamente el ancho en tres columnas de contenido casi sin trabajo por nuestra parte. </p> <p>Comenzaremos con el bloque de HTML a continuación. Primero lanzamos una etiqueta h2, luego una imagen y finalmente un párrafo de texto.</p> <textarea wrap="soft" readonly=""> <h2>Uno</h2> <img src="//lesptitesaffairesdemayl.be/img/images_1/build-a-responsive-mobile-friendly-web-page-with-skeleton_6.jpg"> <p>Si reducimos un poco la ventana, vemos algunos cambios dramáticos. El diseño se reinventa por completo, y la parte sorprendente es que aún se ve genial. Ni siquiera me tomé el tiempo para imaginar cómo se vería todo cuando se reformateó, pero aquí está todo bien y en una pila vertical.</p> <img src="//lesptitesaffairesdemayl.be/img/images_1/build-a-responsive-mobile-friendly-web-page-with-skeleton_7.jpg"> <p>Para finalizar, puede personalizar los elementos en la carpeta de imágenes para sus propios fines. Skeleton incluye varios recursos visuales, como el Apple Touch Icon para dispositivos iOS y un favicon.</p> <h2>Conclusión</h2> <p>Cuando comencé a leer sobre diseño web sensible, aprecié los beneficios obvios, pero no me entusiasmó el trabajo adicional que se necesita para planificar un sitio web que se adapte a dispositivos de cualquier tamaño. </p> <p>Sin embargo, con una herramienta como Skeleton, el esfuerzo que se necesita para hacer que una página web responda es realmente mínimo. En todo caso, es una buena muestra para analizar y desarmar algunas prácticas recomendadas para implementar su propio sistema de respuesta. </p> <p>Deja un comentario a continuación y dinos lo que piensas de Skeleton. ¿Crees que las páginas web sensibles merecen el esfuerzo extra? ¿Ha comenzado a hacer que sus diseños sean amigables con una amplia gama de dispositivos?</p>