Manual de estilo WEB - Montagne
Introducción
El objetivo del siguiente manual es abarcar todos los patrones de diseño del sitio web de Montagne y las comunicaciones adyacentes, mediante el desarrollo de una librería de patrones de uso común.
Guías generales:
- Al momento de desarrollar o maquetar una nueva funcionalidad en el frontend del sitio web, se deberán utilizar los elementos aquí utilizados. De hecho, esta misma guía utiliza la librería que define. Si se define un nuevo estilo global, debe definirse también en esta guía.
- Debemos aplicar, siempre que sea posible, una metodología mobile-first, diseñando y priorizando los recursos para pequeñas pantallas, y luego para dispositivos con mayores resoluciones.
- Mantener la semántica de los contenidos, utilizar los elementos HTML acorde a su función.
- Siempre tener en cuenta la optimización para buscadores (SEO). Nunca olvidar rich-snippets y open graphs.
- Incorporar atributos ARIA (Accessible Rich Internet Applications) siempre que sea necesario. ARIA in HTML y Allowed ARIA roles, states and properties .
Características técnicas
- Utilizamos principios de atomic design . Esto también nos permite incorporar únicamente los elementos que necesitamos para el desarrollo de un proyecto.
- Modulizado: cada átomo, componente o molécula tiene su propia hoja de estilo y su archivo JS.
- CSS: utilizamos SCSS (Sass) para compilar y devolver un único archivo.
- JS: utilizamos Babel para transpilar los scripts (podemos utilizar ECMAScript 2015), Uglify para comprimirlos y un concatenador para unificarlos en un único archivo.
- También usamos jQuery (sin depender de otras librerías -por ejemplo, ui, mobile, etc). Siempre cargamos jQuery desde Google Hosted Libraries .
- Utilizamos gulp para definir las tareas repetitivas de compilación, transpilación, etc. La configuración se realiza en el archivo
gulpfile.js, que debe estar en el raíz del proyecto.
Convenciones
- Los archivos JS y CSS que sean módulos (átomos, componentes, moléculas) deben comenzar con guión abajo. Ejemplo:
_product-list.scss - Para la nomenclatura de clases y ids, utilizar guión medio, yendo de lo general a lo particular. Ejemplo:
.product-list-image - Tratar de evitar, siempre que sea posible, un abuso de dependencias en CSS. Por ejemplo, si un elemento se va a mostrar en un único contexto (y tenemos 100% certeza de que eso no va a cambiar en el tiempo), podemos definir la regla CSS llamando directamente al elemento, en lugar de hacerlo con dependencias. Esto ayuda a reducir el tamaño de los archivos CSS. Por ejemplo, comparar:
#header_nav_customer_loggedvsheader nav#header_nav #header_nav_customer a#header_nav_customer_logged.
Instalación
Ya que utilizamos varias librerías de NodeJS para compilar, concatenar, comprimir, etc archivos, necesitamos instalarlo en el servidor o PC de desarrollo:
- Descargar nodejs e instalarlo. En Windows descargamos el instalador desde nodejs.org . En CentOS, debemos instalar el repositorio y luego realizar la instalación:
curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash - sudo yum -y install nodejs - Luego de realizar checkout del proyecto, en el directorio raíz ejecutar
npm install. Esto instalará todas las dependencias de nodejs que necesita el proyecto, en la carpetanode_modules. - Para compilar los archivos SCSS y JS, ejecutar:
npm run build-devpara desarrollo (no comprime los archivos) onpm run build-prod(comprime los archivos).
IMPORTANTE: el archivo gulpfile.js que forma parte de esta guía contiene las tareas y configuraciones específicas para esta guía (sic). En los entornos/sitios/aplicaciones en los que se utilice, se deberá editar el archivo para reflejar las rutas reales de cada caso.
Átomos
Grilla
Si bien no es obligatoria su utilización y dependerá de cada escenario, se incluye el sistema de grilla de Bootstrap 4.
Las únicas diferencias son que el .container:
- No está limitado a un ancho definido de acuerdo al tamaño de la ventana, sino que siempre utiliza el 100% disponible, a excepción de ventanas con un ancho superior a los
1361px, en ese caso el ancho del.containerqueda limitado a1330px. - El padding izquierdo y derecho es de
10pxen lugar de15px.
De esta manera el layout es más fluido y se aprovecha más el tamaño del dispositivo.
De todas maneras, si se precisa utilizar la grilla original (sin la modificación de .container), se puede utilizar la clase .bs-container, que es la de Bootstrap original.
Todos los breakpoints están definidos como variables:
$breakpoint-mobile: 700px; /* En este breakpoint se modifica el tamaño de la tipografía */
/* Los siguientes breakpoints son para el sistema de grilla de Bootstrap */
$breakpoint-bs-sm: 576px; $breakpoint-bs-sm-width: 540px;
$breakpoint-bs-md: 768px; $breakpoint-bs-md-width: 720px;
$breakpoint-bs-lg: 992px; $breakpoint-bs-lg-width: 960px;
$breakpoint-bs-xl: 1200px; $breakpoint-bs-xl-width: 1140px;
$breakpoint-xxl: 1361px; $breakpoint-xxl-width: 1330px; /* Este breakpoint no está definido por Bootstrap, lo agregamos nosotros para aprovechar un poco más el viewport */
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col-6
.col-2
1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3
.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3
<div class="container">
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col-6">.col-6</div>
<div class="col-2">.col-2</div>
</div>
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>Responsive
Más allá de lo explicitado en Grilla:
- Existe un breakpoint adicional de
700px, en el cual se realiza un cambio global en los tamaños de tipografía (ver apartado Tipografía). - Hay un elemento global
#wrapperque contiene todo el contenido de la página, exceptuando el header.
Márgenes y espaciado
- Los espacios (margin, padding, line-height) se deben expresar como múltiplos de 5px. Esto garantiza un correcto ritmo vertical.
- Está definida la variable
$baselinede Sass. - Utilizamos
box-sizing: border-box;para mantener el ritmo vertical y que el mismo no se modifique por paddings. - En cuanto al espaciado horizontal, por una cuestión de consistencia también se recomienda utilizar margin y padding múltiplos de 5px, pero no es obligatorio.
Tipografía
- La tipografía principal utilizada para textos es Montserrat. Se importa directamente desde el CDN de fuentes de Google.
. Nota: la fuente instalada en sistema es distinta en peso con la fuente incrustada desde Google Fonts. Si está instalada, tiene a mostrarse más negrita de lo que realmente es. - Para mobile usamos un tamaño base de
11px, para desktop de15px. El tamaño base está definido en el elementohtml. - Utilizamos un factor de
4/3para escalar las tipografías en desktop, y de1.285en mobile, utilizandorem. Herramientas útiles: Type-Scale y Modular-Scale - Para mayor legibilidad, el largo de las líneas debe estar limitado a no más de 80 caracteres.
- Los títulos deben ser cortos y precisos.
- El alto de línea se debe expresar siempre en múltiplos de 5px. La variable
$baselineestá definida globalmente en 5px.
Rompeviento de hombre Tengger
Tela: Rip Stop con Milky. Tejido con recubrimiento interno impermeable,repelente al agua con protección UV.
Exterior: Poliamida 100%.
Recubrimiento: Poliuretano 100%.
Interior: Red estampada. Poliéster 100% Tafeta Cire 210T. Poliéster 100%.
Campera de hombre Título de página
- Altamente impermeable.
- Esta prenda posee un tratamiento de repelencia al agua, que dificulta que el tejido la absorba favoreciendo las propiedades de impermeabilidad y antimanchas.
- Resulta una prenda versátil tanto para su uso urbano, como para actividades outdoor.
- Para potenciar las propiedades térmicas del producto, se recomienda el uso de una segunda piel debajo (micropolar fleece, friza, etc).
Descripción:
- Capucha fija con 2 puntos de ajuste. Sólo 2 puntos.
- Puños elastizados. Esta es otra aclaración.
- Regulación en ruedo.
- Bolsillos internos.
- Bolsillos laterales con cierres.
- Costuras principales termoselladas.
Descuento Cumpleaños
El descuento Cumpleaños (25%) es válido para todos aquellos socios de la Comunidad Montagne, el día de su cumpleaños. Es condición obligatoria que el cliente haya recibido la oferta vía correo electrónico dos días previos a la fecha de cumpleaños configurada en su perfil. En dicho correo, se especifica el código de descuento que se deberá aplicar en el primer paso del carrito de compras para validar el descuento. El usuario podría no tener configurada una fecha de cumpleaños en su perfil, en ese caso Montagne queda exento de responsabilidad y/o obligación de ofrecer el mencionado descuento. El usuario podrá verificar la fecha de cumpleaños asignada a su perfil ingresando en https://www.montagne.com.ar/es/perfil. Si el usuario ya hubiese recibido un código de descuento de cumpleaños en los últimos 364 días, no recibirá uno nuevo. Se precisa un mínimo de antigüedad en la Comunidad Montagne de 1 (un) mes. No aplica para Calzado. No es combinable ni acumulable con otros descuentos, ofertas, beneficios, ahorros, tarjetas de regalo, reintegros o promociones, ya sean organizadas por Montagne o por bancos, medios de pago o instituciones financieras.
Remeras y Camisas
La primera capa cumple la función de absorber la transpiración y transferirla a la cara exterior del tejido para que se evapore. Esta tecnología del tejido suele llamarse “Dry”, y es fundamental para cualquier actividad outdoor.
En algunos casos, la trama se vuelve áspera y rígida, por eso te recomendamos que busques texturas suaves y resistentes. La chomba Dry Pro de Montagne cuenta con elasticidad mecánica y es de secado rápido. Otra opción para un estilo outdoor, son las camisas manga corta Botsuana y Sydney de hombre, o Kiara y Ludmila de mujer, que también tienen un sistema de protección contra el sol con un índice de hasta 50 UV.
<h1>Rompeviento de hombre Tengger</h1>
<p><strong>Tela</strong>: Rip Stop con Milky. Tejido con recubrimiento interno impermeable,repelente al agua con protección UV. <br />
<strong>Exterior</strong>: Poliamida 100%. <br />
<strong>Recubrimiento</strong>: Poliuretano 100%. <br />
<strong>Interior</strong>: Red estampada. Poliéster 100% Tafeta Cire 210T. Poliéster 100%.
</p>
<h1 class="section-title align-center">Campera de hombre <span class="label label-grey">Título de página</span></h1>
<ul>
<li>Altamente impermeable. </li>
<li>Esta prenda posee un tratamiento de repelencia al agua, que dificulta que el tejido la absorba favoreciendo las propiedades de impermeabilidad y antimanchas. </li>
<li>Resulta una prenda versátil tanto para su uso urbano, como para actividades outdoor. </li>
<li>Para potenciar las propiedades térmicas del producto, se recomienda el uso de una segunda piel debajo (micropolar fleece, friza, etc). </li>
</ul>
<p><strong>Descripción:</strong></p>
<ul>
<li>Capucha fija con 2 puntos de ajuste. <span class="note">Sólo 2 puntos. </span></li>
<li>Puños elastizados. <span class="note">Esta es otra aclaración. </span></li>
<li>Regulación en ruedo. </li>
<li>Bolsillos internos. </li>
<li>Bolsillos laterales con cierres. </li>
<li>Costuras principales termoselladas. </li>
</ul>
<h2>Descuento Cumpleaños</h2>
<p>El descuento Cumpleaños (25%) es válido para todos aquellos socios de la Comunidad Montagne, el día de su cumpleaños. Es condición obligatoria que el cliente haya recibido la oferta vía correo electrónico dos días previos a la fecha de cumpleaños configurada en su perfil. En dicho correo, se especifica el código de descuento que se deberá aplicar en el primer paso del carrito de compras para validar el descuento. El usuario podría no tener configurada una fecha de cumpleaños en su perfil, en ese caso Montagne queda exento de responsabilidad y/o obligación de ofrecer el mencionado descuento. El usuario podrá verificar la fecha de cumpleaños asignada a su perfil ingresando en https://www.montagne.com.ar/es/perfil. Si el usuario ya hubiese recibido un código de descuento de cumpleaños en los últimos 364 días, no recibirá uno nuevo. Se precisa un mínimo de antigüedad en la Comunidad Montagne de 1 (un) mes. No aplica para Calzado. No es combinable ni acumulable con otros descuentos, ofertas, beneficios, ahorros, tarjetas de regalo, reintegros o promociones, ya sean organizadas por Montagne o por bancos, medios de pago o instituciones financieras. </p>
<h3>Remeras y Camisas</h3>
<p>La primera capa cumple la función de absorber la transpiración y transferirla a la cara exterior del tejido para que se evapore. Esta tecnología del tejido suele llamarse “Dry”, y es fundamental para cualquier actividad outdoor. <br />
En algunos casos, la trama se vuelve áspera y rígida, por eso te recomendamos que busques texturas suaves y resistentes. La chomba Dry Pro de Montagne cuenta con elasticidad mecánica y es de secado rápido. Otra opción para un estilo outdoor, son las camisas manga corta Botsuana y Sydney de hombre, o Kiara y Ludmila de mujer, que también tienen un sistema de protección contra el sol con un índice de hasta 50 UV. </p>Títulos
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Phasellus rutrum massa et ex sodales
Et porttitor ex molestie
Donec et arcu mi
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Et porttitor ex molestie
Consectetur adipiscing elit
Phasellus rutrum massa et ex sodales
Lorem ipsum dolor sit amet Sin márgenes
Lorem ipsum dolor sit amet Sin margen superior
Lorem ipsum dolor sit amet Sin margen inferior
<h1>Lorem ipsum dolor sit amet</h1>
<h2>Consectetur adipiscing elit</h2>
<h3>Phasellus rutrum massa et ex sodales</h3>
<h4>Et porttitor ex molestie</h4>
<h5>Donec et arcu mi</h5>
<h1 class="title-light">Lorem ipsum dolor sit amet</h1>
<h1 class="title-bold">Lorem ipsum dolor sit amet</h1>
<h1 class="title-very-bold">Lorem ipsum dolor sit amet</h1>
<h1 class="title-very-bold large">Lorem ipsum dolor sit amet</h1>
<h1 class="uppercase">Lorem ipsum dolor sit amet</h1>
<h1 class="uppercase title-light">Et porttitor ex molestie</h1>
<h1 class="uppercase title-bold">Consectetur adipiscing elit</h1>
<h1 class="uppercase title-very-bold">Phasellus rutrum massa et ex sodales</h1>
<h1 class="no-margin">Lorem ipsum dolor sit amet <span class="label label-grey">Sin márgenes</span></h1>
<h1 class="no-margin-top">Lorem ipsum dolor sit amet <span class="label label-grey">Sin margen superior</span></h1>
<h1 class="no-margin-bottom">Lorem ipsum dolor sit amet <span class="label label-grey">Sin margen inferior</span></h1>Colores
$color-black
#000
$color-white
#FFF
$color-primary
#E2001A
$color-background-grey
#F6F6F6
$color-grey-light
#e7e7e7
$color-grey-medium
#c5c5c5
$color-grey-dark
#606060
$color-grey-10
#222
$color-grey-20
#333
$color-grey-30
#464646
$color-grey-40
#5D5D5D
$color-grey-50
#757575
$color-grey-60
#8E8E8E
$color-grey-70
#A8A8A8
$color-grey-80
#C4C4C4
$color-grey-90
#E1E1E1
$color-grey-95
#EEE
$color-blue
$color-blue-light
$color-blue-light
#4a9fd5
$color-blue-dark
#235789
$color-warning
$color-yellow
$color-yellow
#f6e27f
$color-green-light
$color-success
$color-success
#87c38f
$color-green-dark
#226f54
$color-error
#ed6a5a
Alertas
¡Felicitaciones! Este es un mensaje de éxito.
¡Ups! Este producto no es combinable con la promoción. Esta es una advertencia.
¡Error! El campo número de la tarjeta de crédito no puede estar vacío. Este es un mensaje de error.
Nota: la promoción del cumpleaños no es aplicable a Calzado. Este es un mensaje informativo.
¡Felicitaciones! Este es un mensaje de éxito.
cerrar
¡Ups! Este producto no es combinable con la promoción. Esta es una advertencia.
cerrar
¡Error! El campo número de la tarjeta de crédito no puede estar vacío. Este es un mensaje de error.
Nota: la promoción del cumpleaños no es aplicable a Calzado. Este es un mensaje informativo.
cerrar
<div class="alert-container">
<div class="alert alert-success" role="alert"><span class="alert-content">¡Felicitaciones! Este es un mensaje de éxito. </span></div>
<div class="alert alert-warning" role="alert"><span class="alert-content">¡Ups! Este producto no es combinable con la promoción. Esta es una advertencia. </span></div>
<div class="alert alert-error" role="alert"><span class="alert-content">¡Error! El campo número de la tarjeta de crédito no puede estar vacío. Este es un mensaje de error. </span></div>
<div class="alert alert-info" role="alert"><span class="alert-content">Nota: la promoción del cumpleaños no es aplicable a Calzado. Este es un mensaje informativo. </span></div>
</div>
<div class="alert-container">
<div class="alert alert-success" role="alert">
<span class="alert-content">¡Felicitaciones! Este es un mensaje de éxito. </span>
<a class="alert-close" href="javascript:void(0)">
<i class="fa fa-times" aria-hidden="true"></i>
<span>cerrar</span>
</a>
</div>
<div class="alert alert-warning" role="alert">
<span class="alert-content">¡Ups! Este producto no es combinable con la promoción. Esta es una advertencia. </span>
<a class="alert-close" href="javascript:void(0)">
<i class="fa fa-times" aria-hidden="true"></i>
<span>cerrar</span>
</a>
</div>
<div class="alert alert-error" role="alert">
<span class="alert-content">¡Error! El campo número de la tarjeta de crédito no puede estar vacío. Este es un mensaje de error. </span>
<a class="alert-close" href="javascript:void(0)" aria-hidden="true">
<i class="fa fa-times"></i>
<span>cerrar</span>
</a>
</div>
<div class="alert alert-info" role="alert">
<span class="alert-content">Nota: la promoción del cumpleaños no es aplicable a Calzado. Este es un mensaje informativo. </span>
<a class="alert-close" href="javascript:void(0)">
<i class="fa fa-times" aria-hidden="true"></i>
<span>cerrar</span>
</a>
</div>
</div>
<div class="alert-container">
<div class="alert alert-success alert-with-icon" role="alert">
<span class="alert-icon"><i class="fa fa-check"></i></span>
<span class="alert-content">¡Felicitaciones! Este es un mensaje de éxito. </span>
</div>
<div class="alert alert-warning alert-with-icon" role="alert">
<span class="alert-icon"><i class="fa fa-exclamation-triangle"></i></span>
<span class="alert-content">¡Ups! Este producto no es combinable con la promoción. Esta es una advertencia. También sucede que es una advertencia bastante extensa. </span>
</div>
</div>Etiquetas
Advertencia Producto destacado Nuevo Envío gratis Posible error Sin stock
Rompeviento de hombre Tengger Nuevo
Antiparras Freeride Doblelente Sin stock
Características técnicas Nueva descripción
<p>
<span class="label label-warning">Advertencia</span>
<span class="label label-info">Producto destacado</span>
<span class="label label-success">Nuevo</span>
<span class="label label-primary">Envío gratis</span>
<span class="label label-error">Posible error</span>
<span class="label label-grey">Sin stock</span>
</p>
<h1>Rompeviento de hombre Tengger <span class="label label-info">Nuevo</span></h1>
<h1 class="title-bold">Antiparras Freeride Doblelente <span class="label label-grey">Sin stock</span></h1>
<h2>Características técnicas <span class="label label-primary">Nueva descripción</span></h2>
Breadcrumb
<ol class="breadcrumb" aria-label="Breadcrumb">
<li class="breadcrumb-list"><a href="">Home</a></li><!--
--><li class="breadcrumb-list"><a href="">Hombre</a></li><!--
--><li class="breadcrumb-list"><a href="">Camperas</a></li><!--
--><li class="breadcrumb-list breadcrumb-active" aria-current="page">Impermeables</li>
</ol>Botones
Opciones de colores, peso y capitalización:
Estilo ghost:
Distintos tamaños:
También se puede hacer lo mismo con <a>:
Podemos incluir íconos, utilizar FontAwesome o en su defecto archivos SVG. Los íconos pueden estar a la izquierda (default) o a la derecha (agregando la clase btn-with-right-icon)
También se puede agregar sombra, ideal para destacar call-to-action, utilizando la clase btn-shadow
<p>Opciones de colores, peso y capitalización: </p>
<div class="btn-container">
<button type="button" class="btn btn-primary">Botón primario</button>
<button type="button" class="btn btn-blue-dark btn-uppercase">Más información</button>
<button type="button" class="btn btn-blue-light">Aceptar</button>
<button type="button" class="btn btn-black btn-bold">Ver detalle</button>
<button type="button" class="btn btn-grey">Ver promoción</button>
<button type="button" class="btn btn-white">Otro botón</button>
<button type="button" class="btn btn-green-dark">Enviar</button>
<button type="button" class="btn btn-green-light">Enviar</button>
<button type="button" class="btn btn-yellow">Generar alerta</button>
</div>
<p>Estilo ghost: </p>
<div class="btn-container">
<button type="button" class="btn btn-primary btn-ghost">Botón primario</button>
<button type="button" class="btn btn-blue-dark btn-ghost btn-uppercase">Más información</button>
<button type="button" class="btn btn-black btn-ghost btn-bold">Ver detalle</button>
<button type="button" class="btn btn-grey btn-ghost">Ver promoción</button>
</div>
<p>Distintos tamaños: </p>
<div class="btn-container">
<button type="button" class="btn btn-primary btn-big">Botón primario</button>
<button type="button" class="btn btn-green-dark btn-big btn-uppercase">Más información</button>
<button type="button" class="btn btn-black btn-ghost btn-big btn-bold">Ver detalle</button>
</div>
<div class="btn-container">
<button type="button" class="btn btn-primary btn-very-big">Botón primario</button>
<button type="button" class="btn btn-yellow btn-very-big btn-uppercase">Más información</button>
<button type="button" class="btn btn-black btn-ghost btn-very-big btn-bold">Ver detalle</button>
</div>
<div class="btn-container">
<button type="button" class="btn btn-primary btn-small">Botón primario</button>
<button type="button" class="btn btn-blue-light btn-small btn-uppercase">Más información</button>
<button type="button" class="btn btn-black btn-ghost btn-small btn-bold">Ver detalle</button>
</div>
<p>También se puede hacer lo mismo con <code><a></code>: </p>
<div class="btn-container">
<a class="btn btn-primary" href="#">Botón primario</a>
<a class="btn btn-blue-dark btn-uppercase" href="#">Más información</a>
<a class="btn btn-black btn-ghost btn-bold" href="#">Ver detalle</a>
<a class="btn btn-grey btn-ghost" href="#">Ver promoción</a>
</div>
<p>Podemos incluir íconos, utilizar <strong>FontAwesome</strong> o en su defecto archivos <code>SVG</code>. Los íconos pueden estar a la izquierda (default) o a la derecha (agregando la clase <code>btn-with-right-icon</code>)</p>
<div class="btn-container">
<button type="button" class="btn btn-grey btn-ghost btn-small btn-bold"><i class="fas fa-question"></i>Ayuda</button>
<button type="button" class="btn btn-primary btn-with-icon"><i class="fas fa-shopping-cart"></i>Agregar al carrito</button>
<button type="button" class="btn btn-black btn-with-icon btn-with-right-icon">Continuar<i class="fas fa-arrow-right"></i></button>
<button type="button" class="btn btn-blue-light btn-big btn-with-icon"><i class="fas fa-basketball-ball"></i>Encestar un triple</button>
<button type="button" class="btn btn-green-dark btn-very-big btn-uppercase"><i class="fas fa-credit-card"></i>Pagar ahora</button>
<button type="button" class="btn btn-yellow btn-very-big btn-with-right-icon">Seguir esperando<i class="far fa-clock"></i></button>
</div>
<p>También se puede agregar sombra, ideal para destacar call-to-action, utilizando la clase <code>btn-shadow</code></p>
<div class="btn-container">
<button type="button" class="btn btn-primary btn-shadow">Botón primario</button>
<button type="button" class="btn btn-blue-dark btn-uppercase btn-shadow">Más información</button>
<button type="button" class="btn btn-blue-light btn-shadow">Aceptar</button>
<button type="button" class="btn btn-black btn-bold btn-shadow">Ver detalle</button>
<button type="button" class="btn btn-grey btn-shadow">Ver promoción</button>
<button type="button" class="btn btn-white btn-shadow">Otro botón</button>
<button type="button" class="btn btn-green-dark btn-shadow">Enviar</button>
<button type="button" class="btn btn-green-light btn-shadow">Confirmar</button>
<button type="button" class="btn btn-yellow btn-shadow">Generar alerta</button>
</div>
<div class="btn-container">
<button type="button" class="btn btn-primary btn-ghost btn-shadow">Botón primario</button>
<button type="button" class="btn btn-blue-dark btn-ghost btn-uppercase btn-shadow">Más información</button>
<button type="button" class="btn btn-black btn-ghost btn-bold btn-shadow">Ver detalle</button>
<button type="button" class="btn btn-grey btn-ghost btn-shadow">Ver promoción</button>
</div>
<div class="btn-container">
<button type="button" class="btn btn-primary btn-big btn-shadow btn-with-icon"><i class="fas fa-skiing"></i>Botón primario</button>
<button type="button" class="btn btn-yellow btn-very-big btn-uppercase btn-shadow">Más información</button>
<button type="button" class="btn btn-blue-light btn-small btn-uppercase btn-shadow">Más información</button>
</div>Formularios
Utilizamos el atributo autocomplete, siempre que se pueda y tenga sentido. Documentación
<form action="#" role="form">
<h4>Este es un formulario con dos columnas. </h4>
<div class="form-content">
<div class="form-column-container">
<div class="form-column">
<div class="control-group">
<label for="nombre_01" class="control-label">Nombre: </label>
<div class="controls">
<input type="text" name="nombre" id="nombre_01" class="input-medium" autocomplete="given-name" />
<span class="form-help">Esta es una aclaración</span>
</div>
</div>
<div class="control-group">
<label for="apellido_01" class="control-label">Apellido: </label>
<div class="controls">
<input type="text" name="nombre" id="apellido_01" class="input-medium" autocomplete="family-name" />
</div>
</div>
</div><!--
--><div class="form-column">
<div class="control-group">
<label for="email_01" class="control-label">E-mail: </label>
<div class="controls">
<input type="email" name="email" id="email_01" class="input-medium" autocomplete="email" />
</div>
</div>
<div class="control-group">
<label for="password_01" class="control-label">Password: </label>
<div class="controls">
<input type="password" name="password" id="password_01" class="input-medium" />
</div>
</div>
<div class="control-group">
<label for="pais_01" class="control-label">País: </label>
<div class="controls">
<select name="pais" id="pais_01" class="input-medium">
<option value="" selected>Seleccionar</option>
<option value="AR">Argentina</option>
<option value="UY">Uruguay</option>
<option value="CL">Chile</option>
<option value="PE">Perú</option>
</select>
</div>
</div>
<div class="control-group">
<label for="region_01" class="control-label">Región: </label>
<div class="controls">
<select name="region" id="region_01" class="input-medium">
<option value="" selected>Seleccionar</option>
<optgroup label="Centro">
<option value="BA">Buenos Aires</option>
<option value="CB">Córdoba</option>
</optgroup>
<optgroup label="Norte">
<option value="SA">Salta</option>
<option value="JY">Jujuy</option>
</optgroup>
<optgroup label="Sur">
<option value="SC">Santa Cruz</option>
<option value="CH">Chubut</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>
<div class="form-error-msg" style="display: block" role="alert">
<div class="alert alert-error alert-with-icon">
<span class="alert-icon"><i class="fa fa-ban"></i></span>
<span class="alert-content">Este es un mensaje de error. Por default, el <code>div.form-error-msg</code> está seteado con <code>display: none</code>. </span>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Aceptar</button>
</div>
</div>
<div class="form-success-msg" style="display: block" role="alert">
<div class="alert alert-success alert-with-icon">
<span class="alert-icon"><i class="fa fa-check"></i></span>
<span class="alert-content">¡Felicitaciones! Este es un mensaje de éxito. Por default, el <code>div.form-success-msg</code> está seteado con <code>display: none</code>. Cuando se muestre este mensaje, el <code>div.form-content</code> debe ocultarse. </span>
</div>
</div>
</form>
<form action="#" class="form-horizontal" role="form">
<h4>Este es un formulario horizontal. </h4>
<p>Si se agrega la clase <code>form-horizontal-with-left-label</code>, el <code>.control-label</code> se alinea a la izquierda. Se recomienda ajustar ad-hoc el ancho del <code>.control-label</code>. </p>
<div class="form-content">
<div class="control-group">
<label for="nombre_02" class="control-label">Nombre: </label><!--
--><div class="controls">
<input type="text" name="nombre" id="nombre_02" class="input-large" placeholder="Este campo tiene clase input-large" autocomplete="given-name" />
<span class="form-help">Esta es una aclaración</span>
</div>
</div>
<div class="control-group">
<label for="apellido_02" class="control-label">Apellido: </label><!--
--><div class="controls">
<input type="text" name="nombre" id="apellido_02" class="input-large" placeholder="Este campo tiene clase input-large" autocomplete="family-name" />
</div>
</div>
<div class="control-group">
<label for="email_02" class="control-label">E-mail: </label><!--
--><div class="controls">
<input type="email" name="email" id="email_02" class="input-medium" placeholder="Este campo tiene clase input-medium" autocomplete="email" />
</div>
</div>
<div class="control-group">
<label for="password_02" class="control-label">Password: </label><!--
--><div class="controls">
<input type="password" name="password" id="password_02" class="input-small" placeholder="Este campo tiene clase input-small" />
</div>
</div>
<div class="control-group">
<label for="consulta_02" class="control-label">Consulta: </label><!--
--><div class="controls">
<textarea name="password" id="consulta_02" class="input-medium">Este es un textarea de ejemplo. </textarea>
</div>
</div>
<div class="form-error-msg" role="alert"></div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Aceptar</button>
</div>
</div>
<div class="form-success-msg" role="alert"></div>
</form>
<form action="#" role="form">
<h4>Radios y checkboxes. </h4>
<div class="form-content">
<div class="control-group">
<label class="control-label">Sexo: </label>
<div class="controls">
<label for="m_04" class="label-radio"><input type="radio" name="sexo" id="m_04" value="m" /><span class="input-radio"></span> Hombre</label>
<label for="f_04" class="label-radio"><input type="radio" name="sexo" id="f_04" value="f" /><span class="input-radio"></span> Mujer</label>
</div>
</div>
<div class="control-group">
<label class="control-label">Deporte favorito: </label>
<div class="controls">
<label for="soccer_04" class="label-checkbox"><input type="checkbox" name="deporte" id="soccer_04" value="soccer" /><span class="input-checkbox"></span> Fútbol</label>
<label for="basketball_04" class="label-checkbox"><input type="checkbox" name="deporte" id="basketball_04" value="basketball" /><span class="input-checkbox"></span> Básquet</label>
<label for="hockey_04" class="label-checkbox"><input type="checkbox" name="deporte" id="hockey_04" value="hockey" /><span class="input-checkbox"></span> Hockey</label>
<label for="voleyball_04" class="label-checkbox"><input type="checkbox" name="deporte" id="voleyball_04" value="voleyball" /><span class="input-checkbox"></span> Voley</label>
<label for="handball_04" class="label-checkbox"><input type="checkbox" name="deporte" id="handball_04" value="handball" /><span class="input-checkbox"></span> Handball</label>
</div>
</div>
<div class="control-group">
<label class="control-label">Puesto: </label>
<div class="controls line">
<label for="base_04" class="label-checkbox"><input type="checkbox" name="deporte" id="base_04" value="base" /><span class="input-checkbox"></span> Base</label>
<label for="escolta_04" class="label-checkbox"><input type="checkbox" name="deporte" id="escolta_04" value="escolta" /><span class="input-checkbox"></span> Escolta</label>
<label for="alero_04" class="label-checkbox"><input type="checkbox" name="deporte" id="alero_04" value="alero" /><span class="input-checkbox"></span> Alero</label>
<label for="ala-pivot_04" class="label-checkbox"><input type="checkbox" name="deporte" id="ala-pivot_04" value="ala-pivot" /><span class="input-checkbox"></span> Ala-Pivot</label>
<label for="pivot_04" class="label-checkbox"><input type="checkbox" name="deporte" id="pivot_04" value="pivot" /><span class="input-checkbox"></span> Pivot</label>
</div>
</div>
<div class="form-error-msg" role="alert"></div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Aceptar</button>
</div>
</div>
<div class="form-success-msg" role="alert"></div>
</form>
<form action="#" class="form-ghost" role="form">
<h4>Acá utilizamos otro estilo (<code>.form-ghost</code>). </h4>
<div class="form-content">
<div class="control-group">
<label for="nombre_05" class="control-label">Nombre: </label>
<div class="controls">
<input type="text" name="nombre" id="nombre_05" class="input-medium" autocomplete="given-name" />
<span class="form-help">Esta es una aclaración</span>
</div>
</div>
<div class="control-group">
<label for="apellido_05" class="control-label">Apellido: </label>
<div class="controls">
<input type="text" name="nombre" id="apellido_05" class="input-medium" autocomplete="family-name" />
</div>
</div>
<div class="control-group">
<label class="control-label">Sexo: </label>
<div class="controls">
<label for="m_05" class="label-radio"><input type="radio" name="sexo" id="m_05" value="m" /><span class="input-radio"></span> Hombre</label>
<label for="f_05" class="label-radio"><input type="radio" name="sexo" id="f_05" value="f" /><span class="input-radio"></span> Mujer</label>
</div>
</div>
<div class="control-group">
<label class="control-label">Puesto: </label>
<div class="controls line">
<label for="base_05" class="label-checkbox"><input type="checkbox" name="deporte" id="base_05" value="base" /><span class="input-checkbox"></span> Base</label>
<label for="escolta_05" class="label-checkbox"><input type="checkbox" name="deporte" id="escolta_05" value="escolta" /><span class="input-checkbox"></span> Escolta</label>
<label for="alero_05" class="label-checkbox"><input type="checkbox" name="deporte" id="alero_05" value="alero" /><span class="input-checkbox"></span> Alero</label>
<label for="ala-pivot_05" class="label-checkbox"><input type="checkbox" name="deporte" id="ala-pivot_05" value="ala-pivot" /><span class="input-checkbox"></span> Ala-Pivot</label>
<label for="pivot_05" class="label-checkbox"><input type="checkbox" name="deporte" id="pivot_05" value="pivot" /><span class="input-checkbox"></span> Pivot</label>
</div>
</div>
<div class="control-group">
<label for="consulta_03" class="control-label">Consulta: </label>
<div class="controls">
<textarea name="consulta" id="consulta_03" class="input-large">Este es un textarea de ejemplo. </textarea>
</div>
</div>
<div class="form-error-msg" role="alert"></div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Aceptar</button>
</div>
</div>
<div class="form-success-msg" role="alert"></div>
</form>
<form action="#" role="form">
<h4>Un formulario con los grupos destacados con distintos colores y mensajes... </h4>
<div class="form-content">
<div class="control-group error">
<label for="nombre_03" class="control-label">Nombre: </label>
<div class="controls">
<input type="text" name="nombre" id="nombre_03" class="input-medium" autocomplete="given-name" />
<span class="form-help">Esta es una aclaración</span>
<span class="form-inline-message">Este es el mensaje de error</span>
</div>
</div>
<div class="control-group success">
<label for="apellido_03" class="control-label">Apellido: </label>
<div class="controls">
<input type="text" name="nombre" id="apellido_03" class="input-medium" autocomplete="family-name" />
<span class="form-inline-message">Este es el mensaje de error</span>
</div>
</div>
<div class="control-group warning">
<label for="email_03" class="control-label">E-mail: </label>
<div class="controls">
<input type="email" name="email" id="email_03" class="input-medium" autocomplete="email" />
<span class="form-inline-message">Este es el mensaje de error</span>
</div>
</div>
<div class="control-group error">
<label class="control-label">Sexo: </label>
<div class="controls">
<label for="m_06" class="label-radio"><input type="radio" name="sexo" id="m_06" value="m" /><span class="input-radio"></span> Hombre</label>
<label for="f_06" class="label-radio"><input type="radio" name="sexo" id="f_06" value="f" /><span class="input-radio"></span> Mujer</label>
<span class="form-inline-message">Este es el mensaje de error</span>
</div>
</div>
<div class="control-group error">
<label class="control-label">Puesto: </label>
<div class="controls line">
<label for="base_06" class="label-checkbox"><input type="checkbox" name="deporte" id="base_06" value="base" /><span class="input-checkbox"></span> Base</label>
<label for="escolta_06" class="label-checkbox"><input type="checkbox" name="deporte" id="escolta_06" value="escolta" /><span class="input-checkbox"></span> Escolta</label>
<label for="alero_06" class="label-checkbox"><input type="checkbox" name="deporte" id="alero_06" value="alero" /><span class="input-checkbox"></span> Alero</label>
<label for="ala-pivot_06" class="label-checkbox"><input type="checkbox" name="deporte" id="ala-pivot_06" value="ala-pivot" /><span class="input-checkbox"></span> Ala-Pivot</label>
<label for="pivot_06" class="label-checkbox"><input type="checkbox" name="deporte" id="pivot_06" value="pivot" /><span class="input-checkbox"></span> Pivot</label>
<span class="form-inline-message">Este es el mensaje de error</span>
</div>
</div>
<div class="control-group error">
<label class="control-label">Puesto: </label>
<div class="controls">
<label for="base_07" class="label-checkbox"><input type="checkbox" name="deporte" id="base_07" value="base" /><span class="input-checkbox"></span> Base</label>
<label for="escolta_07" class="label-checkbox"><input type="checkbox" name="deporte" id="escolta_07" value="escolta" /><span class="input-checkbox"></span> Escolta</label>
<label for="alero_07" class="label-checkbox"><input type="checkbox" name="deporte" id="alero_07" value="alero" /><span class="input-checkbox"></span> Alero</label>
<label for="ala-pivot_07" class="label-checkbox"><input type="checkbox" name="deporte" id="ala-pivot_07" value="ala-pivot" /><span class="input-checkbox"></span> Ala-Pivot</label>
<label for="pivot_07" class="label-checkbox"><input type="checkbox" name="deporte" id="pivot_07" value="pivot" /><span class="input-checkbox"></span> Pivot</label>
<span class="form-inline-message">Este es el mensaje de error</span>
</div>
</div>
<div class="form-error-msg" role="alert"></div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Aceptar</button>
</div>
</div>
<div class="form-success-msg" role="alert"></div>
</form>
<form action="#" class="form-big" role="form">
<h4>Este formulario tiene clase <code>.form-big</code></h4>
<div class="form-content">
<div class="control-group">
<label for="nombre_04" class="control-label">Nombre: </label>
<div class="controls">
<input type="text" name="nombre" id="nombre_04" class="input-medium input-big" autocomplete="given-name" />
<span class="form-help">Esta es una aclaración</span>
</div>
</div>
<div class="control-group error">
<label for="pais_02" class="control-label">País: </label>
<div class="controls">
<select name="pais" id="pais_02" class="input-medium">
<option value="" selected>Seleccionar</option>
<option value="AR">Argentina</option>
<option value="UY">Uruguay</option>
<option value="CL">Chile</option>
<option value="PE">Perú</option>
</select>
<span class="form-inline-message">Este es un mensaje de error</span>
</div>
</div>
<div class="control-group">
<label class="control-label">Sexo: </label>
<div class="controls">
<label for="m_08" class="label-radio"><input type="radio" name="sexo" id="m_08" value="m" /><span class="input-radio"></span> Hombre</label>
<label for="f_08" class="label-radio"><input type="radio" name="sexo" id="f_08" value="f" /><span class="input-radio"></span> Mujer</label>
</div>
</div>
<div class="control-group">
<label class="control-label">Puesto: </label>
<div class="controls line">
<label for="base_09" class="label-checkbox"><input type="checkbox" name="deporte" id="base_09" value="base" /><span class="input-checkbox"></span> Base</label>
<label for="escolta_09" class="label-checkbox"><input type="checkbox" name="deporte" id="escolta_09" value="escolta" /><span class="input-checkbox"></span> Escolta</label>
<label for="alero_09" class="label-checkbox"><input type="checkbox" name="deporte" id="alero_09" value="alero" /><span class="input-checkbox"></span> Alero</label>
<label for="ala-pivot_09" class="label-checkbox"><input type="checkbox" name="deporte" id="ala-pivot_09" value="ala-pivot" /><span class="input-checkbox"></span> Ala-Pivot</label>
<label for="pivot_09" class="label-checkbox"><input type="checkbox" name="deporte" id="pivot_09" value="pivot" /><span class="input-checkbox"></span> Pivot</label>
</div>
</div>
<div class="control-group">
<label class="control-label">Puesto: </label>
<div class="controls">
<label for="base_10" class="label-checkbox"><input type="checkbox" name="deporte" id="base_10" value="base" /><span class="input-checkbox"></span> Base</label>
<label for="escolta_10" class="label-checkbox"><input type="checkbox" name="deporte" id="escolta_10" value="escolta" /><span class="input-checkbox"></span> Escolta</label>
<label for="alero_10" class="label-checkbox"><input type="checkbox" name="deporte" id="alero_10" value="alero" /><span class="input-checkbox"></span> Alero</label>
<label for="ala-pivot_10" class="label-checkbox"><input type="checkbox" name="deporte" id="ala-pivot_10" value="ala-pivot" /><span class="input-checkbox"></span> Ala-Pivot</label>
<label for="pivot_10" class="label-checkbox"><input type="checkbox" name="deporte" id="pivot_10" value="pivot" /><span class="input-checkbox"></span> Pivot</label>
</div>
</div>
<div class="form-error-msg" role="alert"></div>
<div class="form-actions">
<button type="submit" class="btn btn-primary btn-big">Aceptar</button>
</div>
</div>
<div class="form-success-msg" role="alert"></div>
</form>
<form action="#" class="form-very-big" role="form">
<h4>Este formulario tiene clase <code>.form-very-big</code></h4>
<div class="form-content">
<div class="control-group">
<label for="nombre_06" class="control-label">Nombre: </label>
<div class="controls">
<input type="text" name="nombre" id="nombre_06" class="input-medium input-big" autocomplete="given-name" />
<span class="form-help">Esta es una aclaración</span>
</div>
</div>
<div class="control-group error">
<label for="pais_04" class="control-label">País: </label>
<div class="controls">
<select name="pais" id="pais_04" class="input-medium">
<option value="" selected>Seleccionar</option>
<option value="AR">Argentina</option>
<option value="UY">Uruguay</option>
<option value="CL">Chile</option>
<option value="PE">Perú</option>
</select>
<span class="form-inline-message">Este es un mensaje de error</span>
</div>
</div>
<div class="control-group">
<label class="control-label">Sexo: </label>
<div class="controls">
<label for="m_09" class="label-radio"><input type="radio" name="sexo" id="m_09" value="m" /><span class="input-radio"></span> Hombre</label>
<label for="f_09" class="label-radio"><input type="radio" name="sexo" id="f_09" value="f" /><span class="input-radio"></span> Mujer</label>
</div>
</div>
<div class="control-group">
<label class="control-label">Puesto: </label>
<div class="controls line">
<label for="base_11" class="label-checkbox"><input type="checkbox" name="deporte" id="base_11" value="base" /><span class="input-checkbox"></span> Base</label>
<label for="escolta_11" class="label-checkbox"><input type="checkbox" name="deporte" id="escolta_11" value="escolta" /><span class="input-checkbox"></span> Escolta</label>
<label for="alero_11" class="label-checkbox"><input type="checkbox" name="deporte" id="alero_11" value="alero" /><span class="input-checkbox"></span> Alero</label>
<label for="ala-pivot_11" class="label-checkbox"><input type="checkbox" name="deporte" id="ala-pivot_11" value="ala-pivot" /><span class="input-checkbox"></span> Ala-Pivot</label>
<label for="pivot_11" class="label-checkbox"><input type="checkbox" name="deporte" id="pivot_11" value="pivot" /><span class="input-checkbox"></span> Pivot</label>
</div>
</div>
<div class="control-group">
<label class="control-label">Puesto: </label>
<div class="controls">
<label for="base_12" class="label-checkbox"><input type="checkbox" name="deporte" id="base_12" value="base" /><span class="input-checkbox"></span> Base</label>
<label for="escolta_12" class="label-checkbox"><input type="checkbox" name="deporte" id="escolta_12" value="escolta" /><span class="input-checkbox"></span> Escolta</label>
<label for="alero_12" class="label-checkbox"><input type="checkbox" name="deporte" id="alero_12" value="alero" /><span class="input-checkbox"></span> Alero</label>
<label for="ala-pivot_12" class="label-checkbox"><input type="checkbox" name="deporte" id="ala-pivot_12" value="ala-pivot" /><span class="input-checkbox"></span> Ala-Pivot</label>
<label for="pivot_12" class="label-checkbox"><input type="checkbox" name="deporte" id="pivot_12" value="pivot" /><span class="input-checkbox"></span> Pivot</label>
</div>
</div>
<div class="form-error-msg" role="alert"></div>
<div class="form-actions">
<button type="submit" class="btn btn-primary btn-big">Aceptar</button>
</div>
</div>
<div class="form-success-msg" role="alert"></div>
</form>Imágenes y fotos
- Utilizamos
img srcsetpara definir distintos archivos para las imágenes, dependiendo principalmente de la densidad del dispositivo. Se puede visualizar un ejemplo práctico en el listado de productos. - Al 2021-07-29, la compatibilidad de srcset es de 98%. Como src de la imagen, seleccionamos siempre la versión de menor tamaño, ya que podemos suponer que los dispositivos con mayor densidad de píxeles utilizan navegadores modernos.
- Explicación útil sobre cómo usar srcset en css-tricks.com
- Todas las imágenes deben trabajarse con el perfil (incrustado) sRGB IEC61966-2.1
- Utilizar el formato más acorde al tipo de imagen:
- Siempre que sea posible, especialmente para fotos o imágenes, utilizar WEBP. Al 2021-07-29, la compatibilidad es superior al 98%. Por el momento no lo estamos utilizando para foto de producto.
- Para fotos o imágenes con muchos colores y/o degradés, siempre JPG Progresivo, intentando comprimir el archivo lo más posible sin comprometer calidad.
- Para imágenes con colores plenos o pocos colores, utilizar PNG o GIF. El PNG, si es posible, comprimirlo a 8 bits. Tanto para GIF como para PNG de 8 bits, seleccionar la cantidad de colores mínima sin comprometer calidad.
- Para imágenes con transparencias, siempre PNG 24 bits.
Íconos
- Utilizar siempre archivos SVG para íconos. No pierden calidad y se puede modificar su color directamente con CSS.
- El estilo general es flat, sin relleno. En todos los casos debe coincidir el ancho del trazo.
- Utilizamos, en la mayoría de los casos, íconos de Flat Icon. Nota: en muchos casos, es obligatorio mencionar al autor.
- Para pequeños íconos, utilizar Font Awesome. La nueva implementación se realiza con Javascript. FontAwesome . Versión actual: 5.3.1
Estrellas (reviews / rating)
<div class="stars stars-small">
<div class="stars-container stars-background"></div>
<div class="stars-container stars-foreground" style="width: 85%"></div>
</div>
<div class="stars">
<div class="stars-container stars-background"></div>
<div class="stars-container stars-foreground" style="width: 70%"></div>
</div>
<div class="stars stars-big">
<div class="stars-container stars-background"></div>
<div class="stars-container stars-foreground" style="width: 50%"></div>
</div>
<div class="stars stars-very-big">
<div class="stars-container stars-background"></div>
<div class="stars-container stars-foreground" style="width: 30%"></div>
</div>Moléculas
Búsqueda
<div id="header-search">
<form action="#" method="get" role="search">
<input type="text" name="search-query" id="header-search-input" role="searchbox" />
</form>
</div>Tablas
Una tabla común.
| Nombre | Fecha de cumpleaños | Música favorita | Pedido especial |
|---|---|---|---|
| Marcelo | 1984-09-19 | New age | - |
| Santiago | 1991-04-07 | Rock | Vegetariano |
| Omar | 1982-04-14 | Rock Nacional | - |
| Bautista | 1990-06-05 | Grunge | Alérgico al polen |
Compacta .table-compact
| Nombre | Fecha de cumpleaños | Música favorita | Pedido especial |
|---|---|---|---|
| Marcelo | 1984-09-19 | New age | - |
| Santiago | 1991-04-07 | Rock | Vegetariano |
| Omar | 1982-04-14 | Rock Nacional | - |
| Bautista | 1990-06-05 | Grunge | Alérgico al polen |
Relajada .table-relax
| Nombre | Fecha de cumpleaños | Música favorita | Pedido especial |
|---|---|---|---|
| Marcelo | 1984-09-19 | New age | - |
| Santiago | 1991-04-07 | Rock | Vegetariano |
| Omar | 1982-04-14 | Rock Nacional | - |
| Bautista | 1990-06-05 | Grunge | Alérgico al polen |
Sin bordes .table-no-border
| Nombre | Fecha de cumpleaños | Música favorita | Pedido especial |
|---|---|---|---|
| Marcelo | 1984-09-19 | New age | - |
| Santiago | 1991-04-07 | Rock | Vegetariano |
| Omar | 1982-04-14 | Rock Nacional | - |
| Bautista | 1990-06-05 | Grunge | Alérgico al polen |
Con todos los bordes .table-border
| Nombre | Fecha de cumpleaños | Música favorita | Pedido especial |
|---|---|---|---|
| Marcelo | 1984-09-19 | New age | - |
| Santiago | 1991-04-07 | Rock | Vegetariano |
| Omar | 1982-04-14 | Rock Nacional | - |
| Bautista | 1990-06-05 | Grunge | Alérgico al polen |
Con filas alternadas .table-striped
| Nombre | Fecha de cumpleaños | Música favorita | Pedido especial |
|---|---|---|---|
| Marcelo | 1984-09-19 | New age | - |
| Santiago | 1991-04-07 | Rock | Vegetariano |
| Omar | 1982-04-14 | Rock Nacional | - |
| Bautista | 1990-06-05 | Grunge | Alérgico al polen |
Responsive
Hay dos opciones para tablas responsive. Manejamos el comportamiento con los siguientes atributos data: data-table-responsive-breakpoint (ancho máximo de la tabla, por debajo de ese valor se convierte en responsive) y data-table-responsive-type, cuyos valores permitidos son repeat o flip. Elegiremos una u otra opción de acuerdo a la cantidad de información que tiene la tabla (flip es más acorde para datos numéricos y celdas con poco contenido, repeat cuando hay más contenido por celda).
data-table-responsive-type="flip"
| Nombre | Fecha de cumpleaños | Música favorita | Pedido especial |
|---|---|---|---|
| Marcelo | 1984-09-19 | New age | - |
| Santiago | 1991-04-07 | Rock | Vegetariano |
| Omar | 1982-04-14 | Rock Nacional | - |
| Bautista | 1990-06-05 | Grunge | Alérgico al polen |
data-table-responsive-type="repeat"
| Nombre | Fecha de cumpleaños | Música favorita | Pedido especial |
|---|---|---|---|
| Marcelo | 1984-09-19 | New age | - |
| Santiago | 1991-04-07 | Rock | Vegetariano |
| Omar | 1982-04-14 | Rock Nacional | - |
| Bautista | 1990-06-05 | Grunge | Alérgico al polen |
<div class="container">
<p><strong>Una tabla común. </strong></p>
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Fecha de cumpleaños</th>
<th>Música favorita</th>
<th>Pedido especial</th>
</tr>
</thead>
<tbody>
<tr>
<td>Marcelo</td>
<td>1984-09-19</td>
<td>New age</td>
<td>-</td>
</tr>
<tr>
<td>Santiago</td>
<td>1991-04-07</td>
<td>Rock</td>
<td>Vegetariano</td>
</tr>
<tr>
<td>Omar</td>
<td>1982-04-14</td>
<td>Rock Nacional</td>
<td>-</td>
</tr>
<tr>
<td>Bautista</td>
<td>1990-06-05</td>
<td>Grunge</td>
<td>Alérgico al polen</td>
</tr>
</tbody>
</table>
<p><strong>Compacta <code>.table-compact</code></strong></p>
<table class="table-compact">
<thead>
<tr>
<th>Nombre</th>
<th>Fecha de cumpleaños</th>
<th>Música favorita</th>
<th>Pedido especial</th>
</tr>
</thead>
<tbody>
<tr>
<td>Marcelo</td>
<td>1984-09-19</td>
<td>New age</td>
<td>-</td>
</tr>
<tr>
<td>Santiago</td>
<td>1991-04-07</td>
<td>Rock</td>
<td>Vegetariano</td>
</tr>
<tr>
<td>Omar</td>
<td>1982-04-14</td>
<td>Rock Nacional</td>
<td>-</td>
</tr>
<tr>
<td>Bautista</td>
<td>1990-06-05</td>
<td>Grunge</td>
<td>Alérgico al polen</td>
</tr>
</tbody>
</table>
<p><strong>Relajada <code>.table-relax</code></strong></p>
<table class="table-relax">
<thead>
<tr>
<th>Nombre</th>
<th>Fecha de cumpleaños</th>
<th>Música favorita</th>
<th>Pedido especial</th>
</tr>
</thead>
<tbody>
<tr>
<td>Marcelo</td>
<td>1984-09-19</td>
<td>New age</td>
<td>-</td>
</tr>
<tr>
<td>Santiago</td>
<td>1991-04-07</td>
<td>Rock</td>
<td>Vegetariano</td>
</tr>
<tr>
<td>Omar</td>
<td>1982-04-14</td>
<td>Rock Nacional</td>
<td>-</td>
</tr>
<tr>
<td>Bautista</td>
<td>1990-06-05</td>
<td>Grunge</td>
<td>Alérgico al polen</td>
</tr>
</tbody>
</table>
<p><strong>Sin bordes <code>.table-no-border</code></strong></p>
<table class="table-no-border">
<thead>
<tr>
<th>Nombre</th>
<th>Fecha de cumpleaños</th>
<th>Música favorita</th>
<th>Pedido especial</th>
</tr>
</thead>
<tbody>
<tr>
<td>Marcelo</td>
<td>1984-09-19</td>
<td>New age</td>
<td>-</td>
</tr>
<tr>
<td>Santiago</td>
<td>1991-04-07</td>
<td>Rock</td>
<td>Vegetariano</td>
</tr>
<tr>
<td>Omar</td>
<td>1982-04-14</td>
<td>Rock Nacional</td>
<td>-</td>
</tr>
<tr>
<td>Bautista</td>
<td>1990-06-05</td>
<td>Grunge</td>
<td>Alérgico al polen</td>
</tr>
</tbody>
</table>
<p><strong>Con todos los bordes <code>.table-border</code></strong></p>
<table class="table-border">
<thead>
<tr>
<th>Nombre</th>
<th>Fecha de cumpleaños</th>
<th>Música favorita</th>
<th>Pedido especial</th>
</tr>
</thead>
<tbody>
<tr>
<td>Marcelo</td>
<td>1984-09-19</td>
<td>New age</td>
<td>-</td>
</tr>
<tr>
<td>Santiago</td>
<td>1991-04-07</td>
<td>Rock</td>
<td>Vegetariano</td>
</tr>
<tr>
<td>Omar</td>
<td>1982-04-14</td>
<td>Rock Nacional</td>
<td>-</td>
</tr>
<tr>
<td>Bautista</td>
<td>1990-06-05</td>
<td>Grunge</td>
<td>Alérgico al polen</td>
</tr>
</tbody>
</table>
<p><strong>Con filas alternadas <code>.table-striped</code></strong></p>
<table class="table-striped">
<thead>
<tr>
<th>Nombre</th>
<th>Fecha de cumpleaños</th>
<th>Música favorita</th>
<th>Pedido especial</th>
</tr>
</thead>
<tbody>
<tr>
<td>Marcelo</td>
<td>1984-09-19</td>
<td>New age</td>
<td>-</td>
</tr>
<tr>
<td>Santiago</td>
<td>1991-04-07</td>
<td>Rock</td>
<td>Vegetariano</td>
</tr>
<tr>
<td>Omar</td>
<td>1982-04-14</td>
<td>Rock Nacional</td>
<td>-</td>
</tr>
<tr>
<td>Bautista</td>
<td>1990-06-05</td>
<td>Grunge</td>
<td>Alérgico al polen</td>
</tr>
</tbody>
</table>
<h4>Responsive</h4>
<p>Hay dos opciones para tablas responsive. Manejamos el comportamiento con los siguientes atributos data: <code>data-table-responsive-breakpoint</code> (ancho máximo de la tabla, por debajo de ese valor se convierte en responsive) y <code>data-table-responsive-type</code>, cuyos valores permitidos son <code>repeat</code> o <code>flip</code>. Elegiremos una u otra opción de acuerdo a la cantidad de información que tiene la tabla (flip es más acorde para datos numéricos y celdas con poco contenido, repeat cuando hay más contenido por celda). </p>
<p><strong><code>data-table-responsive-type="flip"</code></strong></p>
<table class="table-striped" data-table-responsive-breakpoint="700" data-table-responsive-type="flip">
<thead>
<tr>
<th>Nombre</th>
<th>Fecha de cumpleaños</th>
<th>Música favorita</th>
<th>Pedido especial</th>
</tr>
</thead>
<tbody>
<tr>
<td>Marcelo</td>
<td>1984-09-19</td>
<td>New age</td>
<td>-</td>
</tr>
<tr>
<td>Santiago</td>
<td>1991-04-07</td>
<td>Rock</td>
<td>Vegetariano</td>
</tr>
<tr>
<td>Omar</td>
<td>1982-04-14</td>
<td>Rock Nacional</td>
<td>-</td>
</tr>
<tr>
<td>Bautista</td>
<td>1990-06-05</td>
<td>Grunge</td>
<td>Alérgico al polen</td>
</tr>
</tbody>
</table>
<p><strong><code>data-table-responsive-type="repeat"</code></strong></p>
<table class="table-striped" data-table-responsive-breakpoint="700" data-table-responsive-type="repeat">
<thead>
<tr>
<th>Nombre</th>
<th>Fecha de cumpleaños</th>
<th>Música favorita</th>
<th>Pedido especial</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Nombre">Marcelo</td>
<td>1984-09-19</td>
<td>New age</td>
<td>-</td>
</tr>
<tr>
<td>Santiago</td>
<td>1991-04-07</td>
<td>Rock</td>
<td>Vegetariano</td>
</tr>
<tr>
<td>Omar</td>
<td>1982-04-14</td>
<td>Rock Nacional</td>
<td>-</td>
</tr>
<tr>
<td>Bautista</td>
<td>1990-06-05</td>
<td>Grunge</td>
<td>Alérgico al polen</td>
</tr>
</tbody>
</table>
</div>Títulos decorados
Campera de mujer Arya
La escala de sensibilidad fotográfica define físicamente la sensibilidad como la inversa de la entrada necesaria para obtener una respuesta predeterminada en un sistema. La escala fue creada para las emulsiones fotográficas pero ha sido adaptada también para la fotografía electrónica digital. Tanto en un caso como en el otro la alta sensibilidad tiene la contrapartida de pérdida de calidad de la fotografía.
Mochila Energy 18 lts.
En fotografía, la entrada es la exposición y la salida es la densidad obtenida. La sensibilidad fotográfica por tanto puede definirse como la inversa de la exposición necesaria para obtener una densidad predeterminada. En el negativo blanco y negro este nivel de densidad está fijado en 0,1 unidades de densidad sobre la densidad mínima.
Tecnología
Esta referencia es la base del sistema DIN, el antiguo ASA (hoy ANSI) el BS y el ISO. No obstante, pueden definirse sensibilidades con otros parámetros como criterio. El valor concreto de sensibilidad depende de cómo se interprete la exposición. Normalmente hay dos interpretaciones: emplear la exposición tal cual (iluminancia multiplicada por tiempo de obturación), que es lo que hace la norma ANSI (antigua ASA) norteamericana, o emplear el logaritmo de la exposición, valor más práctico dado que es el que aparece en las curvas HD características de una emulsión fotográfica. Este procedimiento es el empleado en la norma DIN alemana.
Aquaclever
Las distintas escalas de sensibilidad fotográfica están clasificadas en función del tipo de emulsión fotográfica presente en la película. La sensibilidad de una película fotográfica es la velocidad con la que su emulsión fotosensible reacciona a la luz. Algunas marcas fotográficas hablan de E.I., esto es, Exposure Index o Índice de Exposición.
Descripción
El índice de exposición o sensibilidad de una película se indica mediante las escalas ASA, DIN, ISO o GOST (escala soviética actualmente en desuso).
Camperas de hombre
La escala ASA (American Standard Asociation) es igual a la escala ISO (International Standard Office), que es la que se está imponiendo internacionalmente. En la escala ASA, cuando el número dobla su valor la sensibilidad de la película se duplica, o lo que es lo mismo, aumenta en un paso de diafragma. Así, una película de 400 ASA, tiene el doble de sensibilidad que una de 200 ASA. Surgen durante la Segunda Guerra Mundial para estandarizar y codificar los componentes y dispositivos eléctricos.
Rompeviento de hombre
Por el contrario, el sistema DIN (Deutsche Industrie Normen) puede parecer algo menos inmediato, pues el valor de la sensibilidad se duplica cuando el valor DIN aumenta en tres unidades. Así, una película de 22 DIN tiene el doble de sensibilidad que una de 19 DIN. Sin embargo, este sistema permite fraccionar la sensibilidad en tercios de diafragma de una forma mucho más precisa que con el sistema ASA, con lo que el control de la exposición es más preciso (si partimos de un film de sensibilidad 19 DIN, uno de 20 DIN tendrá una sensibilidad 1/3 de diafragma mayor, uno de 21 DIN 2/3 de diafragma mayor, y, por fin, uno de 22 DIN tiene un diafragma más de sensibilidad).
<h1 class="decorated section-title">Campera de mujer Arya</h1>
<p>La escala de sensibilidad fotográfica define físicamente la sensibilidad como la inversa de la entrada necesaria para obtener una respuesta predeterminada en un sistema. La escala fue creada para las emulsiones fotográficas pero ha sido adaptada también para la fotografía electrónica digital. Tanto en un caso como en el otro la alta sensibilidad tiene la contrapartida de pérdida de calidad de la fotografía. </p>
<h1 class="title-bold large decorated">Mochila Energy 18 lts.</h1>
<p>En fotografía, la entrada es la exposición y la salida es la densidad obtenida. La sensibilidad fotográfica por tanto puede definirse como la inversa de la exposición necesaria para obtener una densidad predeterminada. En el negativo blanco y negro este nivel de densidad está fijado en 0,1 unidades de densidad sobre la densidad mínima. </p>
<h2 class="decorated">Tecnología</h2>
<p>Esta referencia es la base del sistema DIN, el antiguo ASA (hoy ANSI) el BS y el ISO. No obstante, pueden definirse sensibilidades con otros parámetros como criterio. El valor concreto de sensibilidad depende de cómo se interprete la exposición. Normalmente hay dos interpretaciones: emplear la exposición tal cual (iluminancia multiplicada por tiempo de obturación), que es lo que hace la norma ANSI (antigua ASA) norteamericana, o emplear el logaritmo de la exposición, valor más práctico dado que es el que aparece en las curvas HD características de una emulsión fotográfica. Este procedimiento es el empleado en la norma DIN alemana. </p>
<h3 class="decorated">Aquaclever</h3>
<p>Las distintas escalas de sensibilidad fotográfica están clasificadas en función del tipo de emulsión fotográfica presente en la película. La sensibilidad de una película fotográfica es la velocidad con la que su emulsión fotosensible reacciona a la luz. Algunas marcas fotográficas hablan de E.I., esto es, Exposure Index o Índice de Exposición. </p>
<h4 class="decorated">Descripción</h4>
<p>El índice de exposición o sensibilidad de una película se indica mediante las escalas ASA, DIN, ISO o GOST (escala soviética actualmente en desuso). </p>
<h1 class="align-center decorated section-title">Camperas de hombre</h1>
<p class="align-center">La escala ASA (American Standard Asociation) es igual a la escala ISO (International Standard Office), que es la que se está imponiendo internacionalmente. En la escala ASA, cuando el número dobla su valor la sensibilidad de la película se duplica, o lo que es lo mismo, aumenta en un paso de diafragma. Así, una película de 400 ASA, tiene el doble de sensibilidad que una de 200 ASA. Surgen durante la Segunda Guerra Mundial para estandarizar y codificar los componentes y dispositivos eléctricos. </p>
<h1 class="align-center large decorated">Rompeviento de hombre</h1>
<p class="align-center">Por el contrario, el sistema DIN (Deutsche Industrie Normen) puede parecer algo menos inmediato, pues el valor de la sensibilidad se duplica cuando el valor DIN aumenta en tres unidades. Así, una película de 22 DIN tiene el doble de sensibilidad que una de 19 DIN. Sin embargo, este sistema permite fraccionar la sensibilidad en tercios de diafragma de una forma mucho más precisa que con el sistema ASA, con lo que el control de la exposición es más preciso (si partimos de un film de sensibilidad 19 DIN, uno de 20 DIN tendrá una sensibilidad 1/3 de diafragma mayor, uno de 21 DIN 2/3 de diafragma mayor, y, por fin, uno de 22 DIN tiene un diafragma más de sensibilidad). </p>Selección de variantes
Nota: el JS de esta molécula no incluye la lógica para asignar el id-product-attribute en el formulario de la página de producto.
<fieldset class="product-attribute-selector">
<div class="product-attribute-selector-title">Color</div>
<ul class="product-attribute-selector-group product-attribute-selector-group-color">
<li itemprop="color" content="Rosa pink"><a href="#" rel="nofollow" style="background: #ed6a5a" title="Rosa pink" data-color-name="Rosa pink" data-group-id="1" data-attribute-id="503" data-is-color="1"></a></li>
<li itemprop="color" content="Celeste new"><a href="#" rel="nofollow" class="selected" style="background: cadetblue" title="Celeste New" data-color-name="Celeste New" data-group-id="1" data-attribute-id="1243" data-is-color="1"></a></li>
<li itemprop="color" content="Verde agua"><a href="#" rel="nofollow" style="background: #6cb576" title="Verde agua" data-color-name="Verde agua" data-group-id="1" data-attribute-id="404" data-is-color="1"></a></li>
<li itemprop="color" content="Violeta / Negro"><a href="#" rel="nofollow" style="background-image: url('/img/co/4345.jpg')" title="Violeta / Negro" data-color-name="Violeta / Negro" data-group-id="1" data-attribute-id="1009" data-is-color="1"></a></li>
<li itemprop="color" content="Print stroke night"><a href="#" rel="nofollow" style="background-image: url('/img/co/4487.jpg')" title="Print stroke night" data-color-name="Print stroke night" data-group-id="1" data-attribute-id="2188" data-is-color="1"></a></li>
<li itemprop="color" content="Naranja / Azul Hollywood"><a href="#" rel="nofollow" style="background-image: url('/img/co/4474.jpg')" title="Naranja / Azul Hollywood" data-color-name="Naranja / Azul Hollywood" data-group-id="1" data-attribute-id="746" data-is-color="1"></a></li>
</ul>
<div class="product-attribute-selector-group-color-name">
<span class="product-attribute-selector-group-color-name-title"></span>
<span class="label label-warning" style="display: none;">La foto no corresponde al color seleccionado</span>
</div>
</fieldset>
<fieldset class="product-attribute-selector">
<div class="product-attribute-selector-title">Talle</div>
<ul class="product-attribute-selector-group product-attribute-selector-group-other">
<li><a href="#" rel="nofollow" data-attribute-id="1201" data-group-id="2" data-is-color="0">XS</a></li>
<li><a href="#" rel="nofollow" data-attribute-id="1202" data-group-id="2" data-is-color="0">S</a></li>
<li class="no-stock"><a href="#" rel="nofollow" class="no-stock" data-attribute-id="1203" data-group-id="2" data-is-color="0">M</a></li>
<li class="selected"><a href="#" rel="nofollow" class="selected" data-attribute-id="1204" data-group-id="2" data-is-color="0">L</a></li>
<li><a href="#" rel="nofollow" data-attribute-id="1205" data-group-id="2" data-is-color="0">XL</a></li>
<li><a href="#" rel="nofollow" data-attribute-id="1206" data-group-id="2" data-is-color="0">2XL</a></li>
<li><a href="#" rel="nofollow" data-attribute-id="1207" data-group-id="2" data-is-color="0">3XL</a></li>
<li class="no-stock"><a href="#" rel="nofollow" class="no-stock" data-attribute-id="1208" data-group-id="2" data-is-color="0">4XL</a></li>
</ul>
</fieldset>
<p>Nota: el JS de esta molécula no incluye la lógica para asignar el <code>id-product-attribute</code> en el formulario de la página de producto. </p>Tabs
Estas son las características técnicas del producto.
Suspendisse sagittis euismod dui, id molestie nisl. Donec efficitur ornare viverra. Morbi accumsan lacus urna, ut dignissim arcu ullamcorper tempor. Quisque viverra lobortis mauris, eu vestibulum sem. Aenean eu scelerisque mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Etiam suscipit turpis ex, sit amet imperdiet nulla egestas quis. Vestibulum sit amet lacus a erat elementum eleifend. Nulla tincidunt sem at risus porttitor ullamcorper. Aliquam a dignissim nisi. Mauris ut nisl eu tellus scelerisque accumsan sit amet quis lectus. Sed a lorem feugiat, eleifend sem non, bibendum ipsum. Vivamus cursus varius ipsum, vitae accumsan sapien dapibus sit amet.
<div class="nav nav-tabs align-center" role="tablist">
<a class="nav-tabs-item active" id="tab-technical-features" data-toggle="tab" href="#technical-features" role="tab" aria-controls="tab-technical-features" aria-selected="true">Características Técnicas</a>
<a class="nav-tabs-item" id="nav-related-tab" data-toggle="tab" href="#nav-related" role="tab" aria-controls="nav-related" aria-selected="false">Productos Relacionados</a>
<a class="nav-tabs-item" id="nav-reviews-tab" data-toggle="tab" href="#nav-reviews" role="tab" aria-controls="nav-reviews" aria-selected="false">Calificaciones</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="technical-features" role="tabpanel" aria-labelledby="tab-technical-features">
<p>Estas son las características técnicas del producto. </p>
<p>Suspendisse sagittis euismod dui, id molestie nisl. Donec efficitur ornare viverra. Morbi accumsan lacus urna, ut dignissim arcu ullamcorper tempor. Quisque viverra lobortis mauris, eu vestibulum sem. Aenean eu scelerisque mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p>
<p>Etiam suscipit turpis ex, sit amet imperdiet nulla egestas quis. Vestibulum sit amet lacus a erat elementum eleifend. Nulla tincidunt sem at risus porttitor ullamcorper. Aliquam a dignissim nisi. Mauris ut nisl eu tellus scelerisque accumsan sit amet quis lectus. Sed a lorem feugiat, eleifend sem non, bibendum ipsum. Vivamus cursus varius ipsum, vitae accumsan sapien dapibus sit amet. </p>
</div>
<div class="tab-pane" id="nav-related" role="tabpanel" aria-labelledby="nav-related-tab">
<p>Aquí mostraremos los productos relacionados. </p>
<p>Suspendisse sagittis euismod dui, id molestie nisl. Donec efficitur ornare viverra. Morbi accumsan lacus urna, ut dignissim arcu ullamcorper tempor. Quisque viverra lobortis mauris, eu vestibulum sem. Aenean eu scelerisque mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p>
<p>Etiam suscipit turpis ex, sit amet imperdiet nulla egestas quis. Vestibulum sit amet lacus a erat elementum eleifend. Nulla tincidunt sem at risus porttitor ullamcorper. Aliquam a dignissim nisi. Mauris ut nisl eu tellus scelerisque accumsan sit amet quis lectus. Sed a lorem feugiat, eleifend sem non, bibendum ipsum. Vivamus cursus varius ipsum, vitae accumsan sapien dapibus sit amet. </p>
</div>
<div class="tab-pane" id="nav-reviews" role="tabpanel" aria-labelledby="nav-reviews-tab">
<p>Suspendisse sagittis euismod dui, id molestie nisl. Donec efficitur ornare viverra. Morbi accumsan lacus urna, ut dignissim arcu ullamcorper tempor. Quisque viverra lobortis mauris, eu vestibulum sem. Aenean eu scelerisque mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p>
<p>Etiam suscipit turpis ex, sit amet imperdiet nulla egestas quis. Vestibulum sit amet lacus a erat elementum eleifend. Nulla tincidunt sem at risus porttitor ullamcorper. Aliquam a dignissim nisi. Mauris ut nisl eu tellus scelerisque accumsan sit amet quis lectus. Sed a lorem feugiat, eleifend sem non, bibendum ipsum. Vivamus cursus varius ipsum, vitae accumsan sapien dapibus sit amet. </p>
</div>
</div>Pasos
Envío
Pago
Confirmación
Envío
Pago
Confirmación
Envío
Pago
Confirmación
Carrito
Tus datos
Envío
Confirmá y pagá
Carrito
Tus datos
Envío
Confirmá y pagá
Carrito
Tus datos
Envío
Confirmá y pagá
Envío
Datos personales
Confirmación
Pago
Envío
Datos personales
Confirmación
Pago
Envío
Datos personales
Confirmación
Pago
<div class="steps steps-line">
<div class="steps-content">
<div class="step step-completed"><div class="step-circle"><i class="fa fas fa-check"></i></div><div class="step-label">Envío</div></div>
<div class="step step-current"><div class="step-circle"></div><div class="step-label">Pago</div></div>
<div class="step step-pending"><div class="step-circle"></div><div class="step-label">Confirmación</div></div>
</div>
</div>
<div class="steps steps-line steps-blue-light">
<div class="steps-content">
<div class="step step-completed"><div class="step-circle"><i class="fa fas fa-check"></i></div><div class="step-label">Envío</div></div>
<div class="step step-current"><div class="step-circle"></div><div class="step-label">Pago</div></div>
<div class="step step-pending"><div class="step-circle"></div><div class="step-label">Confirmación</div></div>
</div>
</div>
<div class="steps steps-line steps-green-dark">
<div class="steps-content">
<div class="step step-completed"><div class="step-circle"><i class="fa fas fa-check"></i></div><div class="step-label">Envío</div></div>
<div class="step step-current"><div class="step-circle"></div><div class="step-label">Pago</div></div>
<div class="step step-pending"><div class="step-circle"></div><div class="step-label">Confirmación</div></div>
</div>
</div>
<div class="steps steps-line steps-check">
<div class="steps-content">
<div class="step step-completed"><div class="step-circle counter"><i class="fa fas fa-check"></i></div><div class="step-label">Carrito</div></div>
<div class="step step-completed"><div class="step-circle counter"><i class="fa fas fa-check"></i></div><div class="step-label">Tus datos</div></div>
<div class="step step-current"><div class="step-circle counter"></div><div class="step-label">Envío</div></div>
<div class="step step-pending"><div class="step-circle counter"></div><div class="step-label">Confirmá y pagá</div></div>
</div>
</div>
<div class="steps steps-line steps-check steps-blue">
<div class="steps-content">
<div class="step step-completed"><div class="step-circle counter"><i class="fa fas fa-check"></i></div><div class="step-label">Carrito</div></div>
<div class="step step-completed"><div class="step-circle counter"><i class="fa fas fa-check"></i></div><div class="step-label">Tus datos</div></div>
<div class="step step-current"><div class="step-circle counter"></div><div class="step-label">Envío</div></div>
<div class="step step-pending"><div class="step-circle counter"></div><div class="step-label">Confirmá y pagá</div></div>
</div>
</div>
<div class="steps steps-line steps-check steps-green">
<div class="steps-content">
<div class="step step-completed"><div class="step-circle counter"><i class="fa fas fa-check"></i></div><div class="step-label">Carrito</div></div>
<div class="step step-completed"><div class="step-circle counter"><i class="fa fas fa-check"></i></div><div class="step-label">Tus datos</div></div>
<div class="step step-current"><div class="step-circle counter"></div><div class="step-label">Envío</div></div>
<div class="step step-pending"><div class="step-circle counter"></div><div class="step-label">Confirmá y pagá</div></div>
</div>
</div>
<div class="steps steps-block">
<div class="steps-content">
<div class="step step-completed"><div class="step-circle counter"><i class="fa fas fa-check"></i></div><div class="step-label">Envío</div></div>
<div class="step step-current"><div class="step-circle counter"></div><div class="step-label">Datos personales</div></div>
<div class="step step-pending"><div class="step-circle counter"></div><div class="step-label">Confirmación</div></div>
<div class="step step-pending"><div class="step-circle counter"></div><div class="step-label">Pago</div></div>
</div>
</div>
<div class="steps steps-block steps-blue-light">
<div class="steps-content">
<div class="step step-completed"><div class="step-circle counter"><i class="fa fas fa-check"></i></div><div class="step-label">Envío</div></div>
<div class="step step-current"><div class="step-circle counter"></div><div class="step-label">Datos personales</div></div>
<div class="step step-pending"><div class="step-circle counter"></div><div class="step-label">Confirmación</div></div>
<div class="step step-pending"><div class="step-circle counter"></div><div class="step-label">Pago</div></div>
</div>
</div>
<div class="steps steps-block steps-green-light">
<div class="steps-content">
<div class="step step-completed"><div class="step-circle counter"><i class="fa fas fa-check"></i></div><div class="step-label">Envío</div></div>
<div class="step step-current"><div class="step-circle counter"></div><div class="step-label">Datos personales</div></div>
<div class="step step-pending"><div class="step-circle counter"></div><div class="step-label">Confirmación</div></div>
<div class="step step-pending"><div class="step-circle counter"></div><div class="step-label">Pago</div></div>
</div>
</div>Tarjetas
Todas las tarjetas tienen un sombreado y un efecto :hover. Hay que setear el ancho para cada caso.
Soft Down
100% pluma natural de alta calidad. Alta termicidad, ultraliviana, gran capacidad de compresión / recuperación (cuin 600).
Con la clase card-with-zoom se puede agregar un efecto de zoom en :hover:
Aquaclever
Es una membrana de poliuretano altamente respirable e impermeable. Mantiene la temperatura corporal, permitiendo que el vapor de transpiración pase hacia el exterior de la tela.
Como elemento decorativo, se puede utilizar la clase card-with-border:
Reflec Tech
Combina las propiedades del material reflectivo con el tejido de las prendas. Toda la prenda se ilumina y puede ser vista desde cualquier ángulo.
También podemos no utilizar sombras, con la clase card-with-no-shadow:
Body Heat
Recubrimiento aluminizado sectorizado, que por sus propiedades refractarias, devuelve al usuario parte del calor emitido por su cuerpo, potenciando las características térmicas de las prendas.
Las tarjetas son útiles para mostrar productos por fuera de los listados convencionales (por ejemplo, productos relacionados). Usamos la clase card-product:
También hay una variante de tarjeta de producto más chica, agregando la clase card-product-small:
<p>Todas las tarjetas tienen un sombreado y un efecto <code>:hover</code>. Hay que setear el ancho para cada caso. </p>
<div class="cards-container">
<div class="card">
<h4>Soft Down</h4>
<p>100% pluma natural de alta calidad. Alta termicidad, ultraliviana, gran capacidad de compresión / recuperación (cuin 600). </p>
</div>
</div>
<p>Con la clase <code>card-with-zoom</code> se puede agregar un efecto de zoom en <code>:hover</code>: </p>
<div class="cards-container">
<div class="card card-with-zoom">
<h4>Aquaclever</h4>
<p>Es una membrana de poliuretano altamente respirable e impermeable. Mantiene la temperatura corporal, permitiendo que el vapor de transpiración pase hacia el exterior de la tela. </p>
</div>
</div>
<p>Como elemento decorativo, se puede utilizar la clase <code>card-with-border</code>: </p>
<div class="cards-container">
<div class="card card-with-border">
<h4>Reflec Tech</h4>
<p>Combina las propiedades del material reflectivo con el tejido de las prendas. Toda la prenda se ilumina y puede ser vista desde cualquier ángulo. </p>
</div>
</div>
<p>También podemos no utilizar sombras, con la clase <code>card-with-no-shadow</code>: </p>
<div class="cards-container">
<div class="card card-with-no-shadow">
<h4>Body Heat</h4>
<p>Recubrimiento aluminizado sectorizado, que por sus propiedades refractarias, devuelve al usuario parte del calor emitido por su cuerpo, potenciando las características térmicas de las prendas. </p>
</div>
</div>
<p>Las tarjetas son útiles para mostrar productos por fuera de los listados convencionales (por ejemplo, productos relacionados). Usamos la clase <code>card-product</code>: </p>
<div class="cards-container">
<div class="card card-product">
<a href="">
<div class="card-product-image"><img src="/img/p/campera-1_320.jpg" alt="" /></div>
<div class="card-product-info">
<div class="card-product-title">Campera de hombre Krypton</div>
<div class="card-product-subtitle">Azul acero - L</div>
</div>
</a>
</div>
<div class="card card-product">
<a href="">
<div class="card-product-image"><img src="/img/p/rompeviento-1_320.jpg" alt="" /></div>
<div class="card-product-info">
<div class="card-product-title">Metric M</div>
<div class="card-product-subtitle">Rompeviento de mujer</div>
<div class="card-product-action">
<button class="btn btn-primary">Ver detalle</button>
</div>
</div>
</a>
</div>
</div>
<p>También hay una variante de tarjeta de producto más chica, agregando la clase <code>card-product-small</code>: </p>
<div class="cards-container">
<div class="card card-product card-product-small">
<a href="">
<div class="card-product-image"><img src="/img/p/campera-1_320.jpg" alt="" /></div>
<div class="card-product-info">
<div class="card-product-title">Campera de hombre Kryton</div>
<div class="card-product-subtitle">Azul acero - L</div>
</div>
</a>
</div>
<div class="card card-product card-product-small">
<a href="">
<div class="card-product-image"><img src="/img/p/rompeviento-1_320.jpg" alt="" /></div>
<div class="card-product-info">
<div class="card-product-title">Metric M</div>
<div class="card-product-subtitle">Rompeviento de mujer</div>
<div class="card-product-action">
<button class="btn btn-primary btn-small">Ver detalle</button>
</div>
</div>
</a>
</div>
</div>Paginación
<div class="pagination">
<ul>
<li id="pagination_previous_bottom" class="disabled pagination_previous"><span class="btn btn-grey">← Previous</span></li>
</ul>
<ul>
<li class="page_number disabled current"><span class="btn btn-primary">1</span></li>
<li class="page_number"><a href="link-hacia?p=2" class="btn btn-black btn-ghost">2</a></li>
<li class="page_number"><a href="link-hacia?p=3" class="btn btn-black btn-ghost">3</a></li>
<li class="page_number"><a href="link-hacia?p=4" class="btn btn-black btn-ghost">4</a></li>
</ul>
<ul>
<li id="pagination_next_bottom" class="pagination_next"><a href="link-hacia?p=2" class="btn btn-black">Next →</a></li>
</ul>
</div>Componentes
Listado Producto
- Utilizamos
flexboxpara armar la grilla de productos. Si biengridsería más adecuado, aún no tiene soporte masivo (actualmente < 90%). - Con JS asignamos un valor data
row-productscon la cantidad de productos a mostrar por fila, dependiendo del ancho del contenedor. - La relación de aspecto de estas imágenes es
9:8. - Utilizamos un ancho de imagen de
320pxy520px, consrcset. Se ve bien tanto en desktop (retina) como en celulares. - Este pattern se aprecia mejor en una ventana aparte.
<div class="container product-list-container">
<div class="product-list">
<div class="product-list-image-container">
<a href="" class="product-list-image-link">
<img src="/img/p/campera-1_320.jpg" srcset="/img/p/campera-1_320.jpg 1x, /img/p/campera-1_520.jpg 2x" alt="Campera de hombre Krypton" class="product-list-image" />
</a>
<div class="discount-badge">30%</div>
<div class="product-fav-container">
<a href="javascript:void(0);" class="product-fav-btn product-fav-btn-added" data-idproduct="">
<i class="fas fa-heart"></i>
</a>
</div>
<div class="product-list-colors">
<!-- Máximo 5 colores, si tiene más mostrar opción "más" -->
<a href="" title="Light Militar" style="background-color: #5C5C40" data-img="/img/p/campera-1_320.jpg"></a><!--
--><a href="" title="Gris Perla" style="background-color: #D9DADC" data-img="/img/p/campera-2_320.jpg"></a><!--
--><a href="" title="Azul acero" style="background-color: #868C98" data-img="/img/p/campera-3_320.jpg"></a><!--
--><a href="" title="Bordó wine" style="background-color: #6A3837" data-img="/img/p/campera-4_320.jpg"></a><!--
--><a href="" title="Rust / Furius" style="background-image: url('/img/co/4866.jpg')" data-img="/img/p/campera-5_320.jpg"></a><!--
--><a href="" title="Ver más colores" class="product-list-colors-more"><i class="fas fa-plus-circle"></i></a>
</div>
</div>
<div class="product-list-info-container">
<div class="product-list-labels">
<span class="label product-list-label product-label-nuevo">Nuevo</span>
</div>
<a href="">
<div class="product-list-info-title">
<h3>Krypton</h3>
<div>Campera de hombre packable</div>
</div>
<!--<div class="product-stars product-list-stars">
<div class="stars-container stars-background"></div>
<div class="stars-container stars-foreground" style="width: 90%"></div>
</div>-->
<div class="product-list-info-price">
<span class="price-regular price-old">$ 20.721</span>
<span class="price-offer">$ 14.504,70</span>
<span class="price-name">HOTSALE</span>
</div>
<div class="product-list-info-shipping"><i class="fas fa-box-open"></i>Envío gratis</div>
</a>
</div>
</div>
<div class="product-list with-no-labels">
<div class="product-list-image-container">
<a href="" class="product-list-image-link">
<img src="/img/p/rompeviento-1_320.jpg" srcset="/img/p/rompeviento-1_320.jpg 1x, /img/p/rompeviento-1_520.jpg 2x" alt="Rompeviento de hombre Safron" class="product-list-image" />
</a>
<div class="product-fav-container">
<a href="javascript:void(0);" class="product-fav-btn" data-idproduct="">
<i class="far fa-heart"></i>
</a>
</div>
<div class="product-list-colors">
<!-- Máximo 5 colores, si tiene más mostrar opción "más" -->
<a href="" title="Water" style="background-color: #B2DBDF" data-img="/img/p/rompeviento-1_320.jpg"></a><!--
--><a href="" title="Coral" style="background-color: #E7696A" data-img="/img/p/rompeviento-2_320.jpg"></a><!--
--><a href="" title="Blanco" style="background-color: #FFF" data-img="/img/p/rompeviento-3_320.jpg"></a>
</div>
</div>
<div class="product-list-info-container">
<div class="product-list-labels"></div>
<a href="">
<div class="product-list-info-title">
<h3>Metric M</h3>
<div>Rompeviento de mujer</div>
</div>
<!--<div class="product-stars product-list-stars">
<div class="stars-container stars-background"></div>
<div class="stars-container stars-foreground" style="width: 100%"></div>
</div>-->
<div class="product-list-info-price">
<span class="price-regular">$ 7.700</span>
</div>
</a>
</div>
</div>
<div class="product-list">
<div class="product-list-image-container">
<a href="" class="product-list-image-link">
<img src="/img/p/bota-1_320.jpg" srcset="/img/p/bota-1_320.jpg 1x, /img/p/bota-1_520.jpg 2x" alt="Zapatilla de mujer Running" class="product-list-image" />
</a>
<div class="product-fav-container">
<a href="javascript:void(0);" class="product-fav-btn" data-idproduct="">
<i class="far fa-heart"></i>
</a>
</div>
<div class="product-list-colors">
<!-- Máximo 5 colores, si tiene más mostrar opción "más" -->
<a href="" title="Gris / Amarillo Neón" style="background-image: url('/img/co/5081.jpg')" data-img="/img/p/bota-1_320.jpg"></a><!--
--><a href="" title="Negro / Rojo" style="background-image: url('/img/co/4259.jpg')" data-img="/img/p/bota-2_320.jpg"></a>
</div>
</div>
<div class="product-list-info-container">
<div class="product-list-labels">
<span class="label product-list-label product-label-nuevo">Nuevo</span>
</div>
<a href="">
<div class="product-list-info-title">
<h3>Phillgrim</h3>
<div>Botas de treking de hombre</div>
</div>
<!--<div class="product-stars product-list-stars">
<div class="stars-container stars-background"></div>
<div class="stars-container stars-foreground" style="width: 100%"></div>
</div>-->
<div class="product-list-info-price">
<span class="price-regular">$ 17.999</span>
</div>
<div class="product-list-info-shipping"><i class="fas fa-box-open"></i>Envío gratis</div>
</a>
</div>
</div>
<div class="product-list with-no-colors with-no-labels">
<div class="product-list-image-container">
<a href="" class="product-list-image-link">
<img src="/img/p/calza-1_320.jpg" srcset="/img/p/calza-1_320.jpg 1x, /img/p/calza-1_520.jpg 2x" alt="Zapatilla de mujer Running" class="product-list-image" />
</a>
<div class="product-fav-container">
<a href="javascript:void(0);" class="product-fav-btn product-fav-btn-added" data-idproduct="">
<i class="fas fa-heart"></i>
</a>
</div>
<div class="product-list-colors">
<!-- Máximo 5 colores, si tiene más mostrar opción "más" -->
</div>
</div>
<div class="product-list-info-container">
<div class="product-list-labels"></div>
<a href="">
<div class="product-list-info-title">
<h3>Joyce</h3>
<div>Calza de mujer</div>
</div>
<!--<div class="product-stars product-list-stars">
<div class="stars-container stars-background"></div>
<div class="stars-container stars-foreground" style="width: 100%"></div>
</div>-->
<div class="product-list-info-price">
<span class="price-regular">$ 4.974</span>
</div>
</a>
</div>
</div>
<div class="product-list">
<div class="product-list-image-container">
<a href="" class="product-list-image-link">
<img src="/img/p/mochila-1_320.jpg" srcset="/img/p/mochila-1_320.jpg 1x, /img/p/mochila-1_520.jpg 2x" alt="Carpa iglú Irazú New 4 personas" class="product-list-image" />
</a>
<div class="discount-badge">20%</div>
<div class="product-fav-container">
<a href="javascript:void(0);" class="product-fav-btn" data-idproduct="">
<i class="far fa-heart"></i>
</a>
</div>
<div class="product-list-colors">
<!-- Máximo 5 colores, si tiene más mostrar opción "más" -->
<a href="" title="Negro / Rojo" style="background-image: url('/img/co/4259.jpg')" data-img="/img/p/mochila-1_320.jpg"></a><!--
--><a href="" title="Gris Oscuro" style="background-color: #666" data-img="/img/p/mochila-2_320.jpg"></a>
</div>
</div>
<div class="product-list-info-container">
<div class="product-list-labels">
<span class="label product-list-label product-label-outlet">Outlet</span>
</div>
<a href="">
<div class="product-list-info-title">
<h3>Luxon 50 Lts</h3>
<div>Mochila de camping</div>
</div>
<!--<div class="product-stars product-list-stars">
<div class="stars-container stars-background"></div>
<div class="stars-container stars-foreground" style="width: 60%"></div>
</div>-->
<div class="product-list-info-price">
<span class="price-regular price-old">$ 24.756</span>
<span class="price-offer">$ 19.804,80</span>
<span class="price-name">Websale</span>
</div>
</a>
<div class="product-list-info-shipping"><i class="fas fa-box-open"></i>Envío gratis</div>
</div>
</div>
<div class="product-list with-no-colors">
<div class="product-list-image-container">
<a href="" class="product-list-image-link">
<img src="/img/p/carpa-1_320.jpg" srcset="/img/p/carpa-1_320.jpg 1x, /img/p/carpa-1_520.jpg 2x" alt="Carpa autoarmable Praia" class="product-list-image" />
</a>
<div class="product-list-colors">
<!-- Máximo 5 colores, si tiene más mostrar opción "más" -->
</div>
</div>
<div class="product-list-info-container">
<div class="product-list-labels">
<span class="label product-list-label product-label-proximamente">Próximo</span>
</div>
<a href="">
<div class="product-list-info-title">
<h3>Praia autoarmable</h3>
<div>Carpa de playa auto-armable</div>
</div>
<!--<div class="product-stars product-list-stars">
<div class="stars-container stars-background"></div>
<div class="stars-container stars-foreground" style="width: 100%"></div>
</div>-->
<div class="product-list-info-price">
<span class="price-regular">$ 12.658</span>
</div>
</a>
<div class="product-list-info-shipping"><i class="fas fa-box-open"></i>Envío gratis</div>
</div>
</div>
</div>
<script>
if( typeof baseDir === 'undefined' ) {
baseDir = '/';
}
</script>Footer
Hay dos versiones del footer. Una con la imágen del bosque de fondo, que se funde con $color-footer (#c9d0d6). La otra versión es con fondo negro.
La foto de fondo es de Filip Zrnzević on Unsplash.
Este elemento se visualiza mejor en una ventana aparte.
<footer class="footer-black">
<div class="container">
<ul id="footer-nav">
<li><a href="/">Productos</a></li>
<li><a href="/locales-outlets">Locales</a></li>
<li><a href="/contactanos">Contacto</a></li>
<li><a href="/ventas-a-empresas">Venta a empresas</a></li>
<li><a href="/franquicias">Franquicias</a></li>
</ul>
<ul id="footer-nav-secondary">
<li><a href="tel:08108886668">Llamanos: 0810-888-6668</a></li>
</ul>
<div id="footer-newsletter" class="form-ghost">
<form action="#" id="footer-newsletter-form" role="form">
<input type="email" class="input-large" placeholder="Suscribite a nuestro newsletter" />
<input type="hidden" id="footer-newsletter-token" name="footer-newsletter-token" />
<button class="btn btn-primary">Suscribirme</button>
</form>
<div class="alert alert-success" id="footer-newsletter-response-success" role="alert"><span class="alert-content">Muchas gracias por suscribirte</span></div>
<div class="alert alert-error" id="footer-newsletter-response-error" role="alert"><span class="alert-content"></span></div>
</div>
<ul id="footer-redes" class="fa-2x">
<li><a href="https://www.facebook.com/MontagneOutdoors/" target="_blank"><i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" data-fa-transform="shrink-7"></i></a></li>
<li><a href="https://twitter.com/MontagneOutdoor" target="_blank"><i class="fab fa-twitter" data-fa-mask="fas fa-circle" data-fa-transform="shrink-7"></i></a></li>
<li><a href="https://www.instagram.com/montagne/" target="_blank"><i class="fab fa-instagram" data-fa-mask="fas fa-circle" data-fa-transform="shrink-7"></i></a></li>
<li><a href="https://www.youtube.com/user/MontagneOutdoors" target="_blank"><i class="fas fa-play" data-fa-mask="fas fa-circle" data-fa-transform="shrink-8 right-1"></i></a></li>
<li><a href="https://www.google.com.ar/maps/search/montagne/" target="_blank"><i class="fas fa-map-marker" data-fa-mask="fas fa-circle" data-fa-transform="shrink-7"></i></a></li>
<li><a href="https://www.linkedin.com/company/montagne-outdoors-s-a-/" target="_blank"><i class="fab fa-linkedin" data-fa-mask="fas fa-circle" data-fa-transform="shrink-7"></i></a></li>
</ul>
<div id="footer-copyright"><a href="/es/contenido/3-terminos-y-condiciones">Términos y condiciones</a> - <a href="/es/contenido/3-terminos-y-condiciones">Créditos</a> - © 2024 Montagne Outdoors. Todos los derechos reservados. </div>
<div id="footer-links">
<a title="Carpas" href="/carpas-camping_42.php">Carpas</a>, <a title="Carpas playeras" href="/carpas-de-playa-playeras_120.php">Carpas playeras</a>, <a title="Carpas iglu" href="/carpas-iglu_119.php">Carpas iglu</a>, <a title="Carpas canadienses" href="/carpas-canadienses_144.php">Carpas canadienses</a> <a title="Camping" href="/camping_11.php">Camping</a>, <a title="Carpas" href="/mochilas-bolsos_10.php">Mochilas</a>, <a title="Mochilas de camping" href="/mochilas-de-camping_36.php">Mochilas de camping</a>, <a title="Mochila porta notebook" href="/mochilas-escolares-urbanas_34.php">Mochila porta notebook</a>, <a title="Bolsas de dormir" href="/bolsas-de-dormir_43.php">Bolsas de dormir</a>, <a title="Artículos de camping" href="/articulos-de-camping-accesorios_44.php">Artículos de camping</a>, <a title="Camperas" href="/search.php?search_query=camperas&p=2">Camperas</a>, <a title="Camperas de hombre" href="/camperas-chalecos-de-hombre_57.php">Camperas de hombre</a>, <a title="Camperas de mujer" href="/camperas-chalecos-de-mujer_70.php">Camperas de mujer</a>, <a title="Pantalones" href="/search.php?search_query=pantalones">Pantalones</a>, <a title="Pantalones de hombre" href="/pantalones-de-hombre-ski-trekking_56.php">Pantalones de hombre</a>, <a title="Pantalones de mujer" href="/pantalones-de-mujer-ski-trekking_77.php">Pantalones de mujer</a>, <a title="Chalecos" href="/search.php?search_query=chalecos">Chalecos</a>, <a title="Camisas" href="/search.php?search_query=camisas">Camisas</a>, <a title="Remeras" href="/search.php?search_query=remeras">Remeras</a>, <a title="Buzos" href="/search.php?search_query=buzos">Buzos</a>, <a title="Zapatillas" href="/search.php?search_query=zapatillas">Trekking y Running</a>
</div>
<ul id="footer-legal">
<li><a href="http://qr.afip.gob.ar/?qr=5YSTbTyKsm_PBANe1vUgdA,," target="_F960AFIPInfo" rel="nofollow"><img src="https://d2wxkzn4zrc8hy.cloudfront.net/ui/footer/data-fiscal.jpg" alt="Data Fiscal" /></a></li>
<li><a href="#"><img src="https://d2wxkzn4zrc8hy.cloudfront.net/ui/footer/pdp-logo.png" alt="Protección de Datos Personales - Empresa Registrada" id="pdp-logo" /></a></li>
<li><a target="_blank" href="http://www.buenosaires.gob.ar/defensaconsumidor" rel="nofollow"><img title="Dirección General de Defensa y Protección al Consumidor - Consultas y/o denuncias" src="https://d2wxkzn4zrc8hy.cloudfront.net/ui/footer/defensa-consumidor.gif" id="gcba_defcons" /></a></li>
</ul>
</div>
</footer>
<footer class="footer-background">
<div class="container">
<ul id="footer-nav">
<li><a href="/">Productos</a></li>
<li><a href="/locales-outlets">Locales</a></li>
<li><a href="/contactanos">Contacto</a></li>
<li><a href="/ventas-a-empresas">Venta a empresas</a></li>
<li><a href="/franquicias">Franquicias</a></li>
</ul>
<ul id="footer-nav-secondary">
<li><a href="tel:08108886668">Llamanos: 0810-888-6668</a></li>
</ul>
<div id="footer-newsletter" class="form-ghost">
<form action="#" id="footer-newsletter-form" role="form">
<input type="email" class="input-large" placeholder="Suscribite a nuestro newsletter" />
<button class="btn btn-primary">Suscribirme</button>
</form>
<div class="alert alert-success" id="footer-newsletter-response-success" role="alert"><span class="alert-content">Muchas gracias por suscribirte</span></div>
<div class="alert alert-error" id="footer-newsletter-response-error" role="alert"><span class="alert-content"></span></div>
</div>
<ul id="footer-redes" class="fa-2x">
<li><a href="https://www.facebook.com/MontagneOutdoors/" target="_blank"><i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" data-fa-transform="shrink-7"></i></a></li>
<li><a href="https://twitter.com/MontagneOutdoor" target="_blank"><i class="fab fa-twitter" data-fa-mask="fas fa-circle" data-fa-transform="shrink-7"></i></a></li>
<li><a href="https://www.instagram.com/montagne/" target="_blank"><i class="fab fa-instagram" data-fa-mask="fas fa-circle" data-fa-transform="shrink-7"></i></a></li>
<li><a href="https://www.youtube.com/user/MontagneOutdoors" target="_blank"><i class="fas fa-play" data-fa-mask="fas fa-circle" data-fa-transform="shrink-8 right-1"></i></a></li>
<li><a href="https://www.google.com.ar/maps/search/montagne/" target="_blank"><i class="fas fa-map-marker" data-fa-mask="fas fa-circle" data-fa-transform="shrink-7"></i></a></li>
<li><a href="https://www.linkedin.com/company/montagne-outdoors-s-a-/" target="_blank"><i class="fab fa-linkedin" data-fa-mask="fas fa-circle" data-fa-transform="shrink-7"></i></a></li>
</ul>
<div id="footer-copyright"><a href="/es/contenido/3-terminos-y-condiciones">Términos y condiciones</a> - <a href="/es/contenido/3-terminos-y-condiciones">Créditos</a> - © 2024 Montagne Outdoors. Todos los derechos reservados. </div>
<div id="footer-links">
<a title="Carpas" href="/carpas-camping_42.php">Carpas</a>, <a title="Carpas playeras" href="/carpas-de-playa-playeras_120.php">Carpas playeras</a>, <a title="Carpas iglu" href="/carpas-iglu_119.php">Carpas iglu</a>, <a title="Carpas canadienses" href="/carpas-canadienses_144.php">Carpas canadienses</a> <a title="Camping" href="/camping_11.php">Camping</a>, <a title="Carpas" href="/mochilas-bolsos_10.php">Mochilas</a>, <a title="Mochilas de camping" href="/mochilas-de-camping_36.php">Mochilas de camping</a>, <a title="Mochila porta notebook" href="/mochilas-escolares-urbanas_34.php">Mochila porta notebook</a>, <a title="Bolsas de dormir" href="/bolsas-de-dormir_43.php">Bolsas de dormir</a>, <a title="Artículos de camping" href="/articulos-de-camping-accesorios_44.php">Artículos de camping</a>, <a title="Camperas" href="/search.php?search_query=camperas&p=2">Camperas</a>, <a title="Camperas de hombre" href="/camperas-chalecos-de-hombre_57.php">Camperas de hombre</a>, <a title="Camperas de mujer" href="/camperas-chalecos-de-mujer_70.php">Camperas de mujer</a>, <a title="Pantalones" href="/search.php?search_query=pantalones">Pantalones</a>, <a title="Pantalones de hombre" href="/pantalones-de-hombre-ski-trekking_56.php">Pantalones de hombre</a>, <a title="Pantalones de mujer" href="/pantalones-de-mujer-ski-trekking_77.php">Pantalones de mujer</a>, <a title="Chalecos" href="/search.php?search_query=chalecos">Chalecos</a>, <a title="Camisas" href="/search.php?search_query=camisas">Camisas</a>, <a title="Remeras" href="/search.php?search_query=remeras">Remeras</a>, <a title="Buzos" href="/search.php?search_query=buzos">Buzos</a>, <a title="Zapatillas" href="/search.php?search_query=zapatillas">Trekking y Running</a>
</div>
<ul id="footer-legal">
<li><a href="http://qr.afip.gob.ar/?qr=5YSTbTyKsm_PBANe1vUgdA,," target="_F960AFIPInfo" rel="nofollow"><img src="https://d2wxkzn4zrc8hy.cloudfront.net/ui/footer/data-fiscal.jpg" alt="Data Fiscal" /></a></li>
<li><a href="#"><img src="https://d2wxkzn4zrc8hy.cloudfront.net/ui/footer/pdp-logo.png" alt="Protección de Datos Personales - Empresa Registrada" id="pdp-logo" /></a></li>
<li><a target="_blank" href="http://www.buenosaires.gob.ar/defensaconsumidor" rel="nofollow"><img title="Dirección General de Defensa y Protección al Consumidor - Consultas y/o denuncias" src="https://d2wxkzn4zrc8hy.cloudfront.net/ui/footer/defensa-consumidor.gif" id="gcba_defcons" /></a></li>
</ul>
</div>
</footer>
Utilidades
Lazy Load
Incentivamos el lazy-loading de imágenes, especialmente si están below-the-fold.
Simplemente agregamos la clase lazy-load a la imagen, y el source se setea en data-src.
Esto también funciona con srcset, utilizando data-srcset.
Por el momento no funciona con <picture>.
Input Mask
Permite crear máscaras de entrada para los campos input. Utilizamos la librería jquery.maskedinput .
<input type="tel" id="fenacimiento" class="input-small" placeholder="dd/mm/YYYY" />
<script>
document.addEventListener("DOMContentLoaded", function(){
$("#fenacimiento").mask("99/99/9999");
});
</script>
La máscara de entrada sólo valida que los caracteres ingresados coincidan con el patrón definido, pero no chequea la validez de la info ingresada (por ejemplo, no valida que una fecha sea válida).
Touch Events
Podemos detectar determinadas acciones propias de un puntero touch: tap, hold, swipe, etc. Utilizamos la librería jQuery-Touch-Events .
Mantener apretado (hold)
Realizar slide hacia la derecha (swiperight)
<div id="touch-events-container">
<div class="touch-events-sample" style="background-color: #4a9fd5" id="touch-events-hold">Mantener apretado (hold)</div>
<div class="touch-events-sample" style="background-color: #226f54" id="touch-events-swipe">Realizar slide hacia la derecha (swiperight)</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(){
$("#touch-events-hold").on("taphold", function(){
alert("Se detectó taphold");
});
$("#touch-events-swipe").on("swiperight", function(){
alert("Se detectó swiperight");
});
});
</script>
Modal
Los diálogos modal se pueden activan automáticamente desde cualquier trigger (botón, link, etc) con los atributos data-toggle="modal" data-target="#exampleModal", donde el target sea el id del modal que se quiere mostrar.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Mostrar modal (vía data-toggle)
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2">
Mostrar otro modal (vía data-toggle)
</button>
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<span id="exampleModalLabel">Don't Panic</span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>El problema más importante, o uno de los problemas más importantes, porque hay varios... </p>
</div>
<div class="modal-footer">
<button type="button" class="btn ghost" data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-primary">Aceptar</button>
</div>
</div>
</div>
</div>
<div class="modal" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<span id="exampleModalLabel2">La vida, el universo y todo lo demás</span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Desde luego, existen muchos problemas... </p>
</div>
<div class="modal-footer">
<button type="button" class="btn ghost" data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-primary">Aceptar</button>
</div>
</div>
</div>
</div>También se pueden invocar con Javascript:
<script>
$("#flanders1").modal("show");
$("#flanders2").modal("show", {closeKeyboard: false, onClose: function(){console.info("Perfectópolis");}}); // Ver en la consola
</script>
<div class="modal" id="flanders1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel3" aria-hidden="true">
<div class="modal-dialog modal-small" role="document">
<div class="modal-content">
<div class="modal-header">
<span id="exampleModalLabel3">Fabulofantástico 1</span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Perfectirilijillo 1</p>
</div>
<div class="modal-footer">
<button type="button" class="btn ghost" data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-primary">Aceptar</button>
</div>
</div>
</div>
</div>
<div class="modal" id="flanders2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel4" aria-hidden="true">
<div class="modal-dialog modal-small" role="document">
<div class="modal-content">
<div class="modal-header">
<span id="exampleModalLabel4">Fabulofantástico 2</span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Perfectirilijillo 2</p>
</div>
<div class="modal-footer">
<button type="button" class="btn ghost" data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-primary">Aceptar</button>
</div>
</div>
</div>
</div>
Al crear un modal, el plugin retorna una referencia a esa instancia, con lo cual es posible manipularlo:
<script>
$("#modalPruebaTrigger").click(function(){
var modal = $("#modalPrueba").modal("show");
$("#modalAceptarBtn").click(function(){
console.info("Apreté el botón ACEPTAR y cierro el modal");
modal.modal("close");
});
});
</script>
<div class="modal" id="modalPrueba" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel5" aria-hidden="true">
<div class="modal-dialog modal-small" role="document">
<div class="modal-content">
<div class="modal-header">
<span id="exampleModalLabel5">Prueba</span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>En esta prueba vamos a capturar el modal en una variable, para luego poder cerrarlo llamando al método <code>.modal("close")</code></p>
</div>
<div class="modal-footer">
<button type="button" class="btn ghost" data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-primary" id="modalAceptarBtn">Aceptar</button>
</div>
</div>
</div>
</div>
El plugin modal tiene los siguientes valores configurables:
{
onShow: function(){} // (función callback cuando se muestra el diálogo),
onClose: function(){} // (función callback cuando se oculta el diálogo),
closeKeyboard: 27 // (si se oculta al presionar alguna tecla, por default 27 para ESC, se puede setear otro código o false para desactivar)
}
También se puede ocultar el modal con:
$('#mi_ventana_modal').modal('close');En resoluciones menores a 700px, el modal se muestra sobre el borde superior. Sino, a 10% del borde superior del documento.
Adicionalmente, en resoluciones mayores a 700px, es posible controlar el ancho del modal con las clases .modal-small y .modal-large aplicadas al elemento div.modal-dialog.
Tooltip & Popover
Para los popovers y tooltips, utilizamos la librería tippy.js . Esta librería a su vez utiliza popper.js para el posicionamiento de los elementos, adaptándose automáticamente a distintos escenarios responsive.
Se debe tener en cuenta que los triggers que por default activan un tooltip/popover (mouseenter focus) pueden no utilizarse en dispositivos táctiles. En determinados casos será necesario agregar click. Por ejemplo, aquí:
Por default, se aplica el plugin a todos los elementos con el atributo data-tippy. El contenido del tooltip/popover es el title del elemento.
<button class="btn btn-ghost" data-tippy data-tippy-arrow="true" data-tippy-placement="right" title="Esto es un <u>tooltip</u>">Esto debe activar un tooltip</button>También se pueden inicializar con Javascript, teniendo a disposición muchas más opciones ...
<p><button class="btn btn-ghost" id="tippy-example-1" title="Este es un tooltip iniciado con javascript"></button></p>
<script>
tippy("#tippy-example-1", {
size: "large",
followCursor: true,
animation: "scale"
});
</script>Para mostrar popovers (tooltips con HTML), es necesario maquetar el popover y hacer referencia en el JS. También es necesario definir un theme, se creó un theme genérico popover.
<p><button class="btn btn-ghost" id="tippy-example-2">Esto debe mostrar un popover</button></p>
<div id="tippy-example-2-html" style="display: none" role="tooltip" aria-expanded="false">
<div class="tippy-title">Michael Jackson - Thriller</div>
<div class="tippy-body">
Darkness falls across the land<br />
The midnight hour is close at hand<br />
Creatures crawl in search of blood<br />
To terrorize y'all's neighborhood<br />
And whomsoever shall be found<br />
Without the soul for getting down<br />
Must stand and face the hounds of hell<br />
And rot inside a corpse's shell. <br /><br />
The foulest stench is in the air<br />
The funk of forty thousand years<br />
And grisly ghouls from every tomb<br />
Are closing in to seal your doom<br />
And though you fight to stay alive<br />
Your body starts to shiver<br />
For no mere mortal can resist<br />
The evil of the thriller
</div>
</div>
<script>
tippy("#tippy-example-2", {
html: "#tippy-example-2-html",
theme: "popover",
arrow: true
});
</script>Slider / Carrusel
Para carrouseles y sliders utilizamos la librería slick .
La librería permite configurar sliders horizontales o verticales, automáticos, centrados, con lazy-loading, responsivos, etc.
Siempre hay que inicializarlo:
Por default se incluye un theme básico, definido en el archivo _slick-theme.scss. Para modificar el estilo del slide se puede editar o reemplazar ese archivo. De todas maneras, gran parte del layout no está definido y es necesario
$(document).ready(function(){
$('#slider').slick();
});Siempre es necesario que el elemento contenedor tenga un ancho (o alto si el slider es vertical) definido.
Ejemplo - Sin argumentos
<div id="slider1">
<div><img src="./img/p/campera-1_320.jpg" alt="" /></div>
<div><img src="./img/p/campera-2_320.jpg" alt="" /></div>
<div><img src="./img/p/campera-3_320.jpg" alt="" /></div>
<div><img src="./img/p/campera-4_320.jpg" alt="" /></div>
</div>
<script>
$(document).ready(function(){
$("#slider1").slick();
});
</script>Ejemplo - Con flechas y mostrando de a 3 productos (centrado)
<div id="slider2-container">
<a href="#" id="slider2-arrow-left" class="slider2-arrow"><i class="fas fa-angle-left"></i></a>
<div id="slider2">
<div><img src="./img/p/rompeviento-1_320.jpg" alt="" /></div>
<div><img src="./img/p/rompeviento-3_320.jpg" alt="" /></div>
<div><img src="./img/p/mochila-1_320.jpg" alt="" /></div>
<div><img src="./img/p/calza-1_320.jpg" alt="" /></div>
<div><img src="./img/p/campera-2_320.jpg" alt="" /></div>
<div><img src="./img/p/bota-2_320.jpg" alt="" /></div>
</div>
<a href="#" id="slider2-arrow-right" class="slider2-arrow"><i class="fas fa-angle-right"></i></a>
</div>
<script>
$(document).ready(function(){
$("#slider2").slick({
arrows: true,
infinite: true,
slidesToShow: 3,
centerMode: true
});
});
</script>