Manual De Referencia Css Para Frontend Developers

* -
*
* CLASES GENERALES
* ----------------------------------------------
* .ns-video: Contenedor de EMBED de video ( Youtube/Vimeo )
*
*
* HEADER
* ----------------------------------------------
* .ns-logo-store: Logo de la tienda ubicaca en cabecera del sitio
* .ns-mobile-logo-store: Logo de la tienda para versión mobile ( Si no puede aplicar .is-mobile .ns-logo-store {} )
*
*
* BANNERS
* ----------------------------------------------
*
* Lo banners pueden ser imagenes, códigos HTML o Videos YouTube. Tienen 2 orientaciones.
* BANNERS VERTICALES: Por lo general aquellos banners en sidebas del sitio, vistas de producto y/o blog.
* BANNERS HORIZONTALES: Presentan 3 posiciones ( SUPERIOR, MEDIO O INFERIOR ).
*
* .ns-banners-h-container: Contenedor de banners horizontales.
* .ns-banners-v-container: Contenedor de banners verticales.
* .ns-banner: Contenedor de banner.
*
* SLIDES
* ----------------------------------------------
* .ns-slide-container: Contenedor de slide (DEPRECATED)
* .ns-slide: Contenedor de slide.
* .ns-slide-item: Contenedor de un item (dispositiva) dentro de un .ns-slide
* .ns-slide-item-{%pos%}: Contenedor del item de la posicion %pos% dentro de un .ns-slide.
*
* IDs
* ----------------------------------------------
* #ns-bar: Barra superior del sitio, opcional que se incorpora sobre el header.
* #ns-contact-btn: Botonera de contacto contenedora de contacto, redes sociales y whastapp
* #ns-cart: Carrito de compras ubicado en header
*
*
* WIDGETS
* ----------------------------------------------
*
* Los widgets por lo general estan situados en el margen izquierdo y sirven de opciones de filtro.
*
* #ns-widget-categories-filter: Filtro de categorías de productos.
* #ns-widget-properties-filter: Filtro de propiedades o filtros.
* #ns-widget-brand-filter: Filtro de marcas.
* #ns-widget-price-filter: Filtro de rango de precios.
* #ns-widget-h-ads: Espacio de banners horizontales.
* #ns-widget-v-ads: Espacio de banners verticales.
*
*
* BLOG
* ----------------------------------------------
*
* .ns-blog-category: Contenedor de categorias de posts
* .ns-blog-category-title: Título de categoría de notas
* .ns-blog-category-description: Breve descripcion de la categoria.
*
* .ns-post-list: Contenedor de listado de posts.
* .ns-post-list-item: Contenedor de post dentro del listado de posts.
* .ns-post-list-item-title: Título del post en listado de posts.
* .ns-post-list-item-img: Imagen del post dentro del listado de posts.
* .ns-post-list-item-meta: Contenedor de fecha, autor, categoria de post, dentro de listado de posts.
* .ns-post-list-item-description: Adelanto del post dentro del listado de posts.
* .ns-post-list-item-btn: Boton para continuar leyendo ( Leer mas, continuar leyendo, etc ).
*
* .ns-post: Contenedor de post de blog
* .ns-post-title: Título del post.
* .ns-post-meta: Contenedor de fecha, autor, categoria de post, etc
* .ns-post-body: Contenedor de post
* .ns-post-footer: Contenedor de pie de posteo ( notas relacionadas, productos relacionados, tags, etc )
*
* .ns-featured-posts: Contenedor de posts destacados en home
* .ns-featured-post: Contenedor de un post destacados en home
*
* SECCION
* ----------------------------------------------
* .ns-section: Contenedor de contenido de seccion ( Texto, imagenes, videos, etc )
* .ns-section-wid%#%: Clase que identifica una sección específica ( WID: Web ID, ej.: .ns-section-wid3 )
* .ns-section-title: Titulo h1 de secciones.
* .ns-section-body: Cuerpo de texto de la sección.
*
*
* MARCA
* ----------------------------------------------
* .ns-brand-title: Titulo h1 de seccion de marcas.
* .ns-brand-marquee: Contenedor de marquesina de marcas
*
*
* CATEGORIA
* ----------------------------------------------
* .ns-category-title: Titulo h1 de seccion de categorias.
*
*
* PRODUCTO
* ----------------------------------------------
*
* Generales
*
* .ns-price: Precio en listado, ficha y checkout. Se recomienda solo establecer color y otros aspectos de formato de texto.
* .ns-off-price: Precio con descuento
* .ns-off-price-sm: Precio con descuento
*
* Listado de categorias
* .ns-graphic-category-list: Contenedor de portadas de categorías.
*
* Listado de productos
* DEPRECATED - .ns-item-list-container: Contenedor de listado de artículos ( categorías, search, marcas, relacionados ).
* .ns-item-list: Contenedor de listado de artículos ( categorías, search, marcas, relacionados ).
* .ns-item-list-grid: Contenedor de un item dentro de listado de items ( .ns-item-list ).
* .ns-item-list-brand-name: Nombre de la marca de producto en listado de item.
* .ns-item-list-add-to-cart-btn: Boton de agregado al carrito dentro de listado de productos.
* DEPRECATED - .ns-item-grid: Contenedor de un item dentro de listado de items ( .ns-item-list-container )
* DEPRECATED - .ns-brand-name-item-list: Nombre de la marca de producto en listado de item
*
* Ficha de productos
* .ns-item: Contenedor de ficha de producto.
* .ns-item-title: Título de la ficha de producto.
* .ns-item-link: Link dentro de la ficha de producto.
* .ns-item-description: Contenedor de descripción de producto
* .ns-item-meta-description: Bajada del artículo. Adelanto de texto que por lo general aparece debajo de titulo.
* .ns-item-wid%#%: Clase que identifica un ítem específico ( WID: Web ID, ej.: .ns-item-wid987 )
* #ns-add-to-cart-btn: Boton de agregado al carrito

* DEPRECATED - .ns-description: Contenedor de descripción de producto
* DEPRECATED - .ns-meta-description: Bajada del artículo. Adelanto de texto que por lo general aparece debajo de titulo.

*
* Checkout
* .ns-checkout: Página contenedora del checkout.
* #checkout-form: Formulario de checkout.
*
* Colores de stock
* .ns-stock-1: STOCK DISPONIBLE ( Default color: #468847 )
* .ns-stock-2: SIN STOCK ( Default color: #000000 )
* .ns-stock-3: CONSULTAR STOCK ( Default color: #b94a48 )
* .ns-stock-4: PROXIMAMENTE ( Default color: #9F6000 )
* .ns-stock-5: CUSTOM STOCK ( Default color: brown )
*
* Badges / Cucardas
* .ns-off: Cucarda de DESCUENTO.
* .ns-free-shipping: Cucarda de ENVIO GRATIS.
*
*
* SUCURSALES / PUNTOS DE VENTA
* ----------------------------------------------
* #ns-branch-section: Contenedor de contenido de seccion de sucursales o puntos de venta
* #ns-branch-list: Contenedor de lista de sucursales o puntos de venta
* .ns-branch-item: Item contenedor de sucursal o punto de venta
*
* BREADCRUMB / NAVEGADOR DEL SITIO
* ----------------------------------------------
* #ns-breadcrumb: Contenedor del indicador de navegación del sitio ( breadcrumb )
*
* FOOTER
* ----------------------------------------------
* #ns-footer-account: Sector de datos de cliente ( Login, registro, etc )
* #ns-footer-placeholder: DIV vacío en footer para agregar contenido vía CSS.
* .ns-qr-afip: QR Afip situado en pie de pagina. OBLIGATORIO.
*
* ICONS
* ----------------------------------------------
* .ns-price-icon: Icono que acompaña al precio efectivo/tarjeta
*
*/