/* * * Autor: Martin Federico Carrillo * Fecha: 03/02/2020 * Email: martin@nubix.com.ar * Web: www.nubixstore.ar * Version: 10.02 * Fecha última actualizacion: 22/02/2024 * */ /* * * MANUAL DE REFERENCIA CSS NUBIXSTORE * * CSS NUBIXSTORE: https://cdn.nubixstore.com.ar/css/nubixstore/basics.css: Hoja de estilos CSS general de NubixStore. * CSS CUSTOM: /css/%site_name%_%template%.css: Hoja de estilo que reemplaza y pisa todos los CSS configurados previamente en otras hojas de estilo de la plantilla y el basics.css * * -- INICIO CLASS EN -- * * IDENTIFICACION DE DISPOSITIVO * ---------------------------------------------- * .is-mobile: Indica que es un dispositivo movil. * .is-desktop: Indica que es un PC. * * IDENTIFICACION DE USUARIO * ---------------------------------------------- * .is-admin: Indica que esta logueado como ADMINISTRADOR. * .is-cliente: Indica que esta logueado como CLIENTE. * .is-seller: Indica que esta logueado como VENDEDOR. * * IDENTIFICACION DE SECTOR DEL SITIO * ---------------------------------------------- * .is-blog: Indica que esta visualizando el BLOG. * .is-home: Indica que esta visualizando HOME. * .is-section: Indica que esta visualizando una SECCION. * .is-contact: Indica que esta visualizando la sección CONTACTO. * .is-staff: Indica que esta visualizando la sección STAFF. * .is-sales-point: Indica que esta visualizando la sección PUNTOS DE VENTA. * .is-faq: Indica que esta visualizando la sección PREGUNTAS FRECUENTES. * .is-store: Indica que esta visualizando TIENDA ( Productos, Checkout, etc ). * .is-store-item: Indica que esta visualizando un ítem de la tienda. * .is-frontend: Indica que se esta visualizando la vista pública y de cliente. * .is-backend: Indica que se esta visualizando la vista privada de sistema. * .is-checkout: Indica que se esta visualizando el checkout de la tienda. * * Ej. // Cliente logueado en mobile, dentro de tienda * * -- FIN CLASES EN -- * * REGLAS GENERICAS * ---------------------------------------------- * - Las clases de NubixStore se identifican con .ns- // Ej.
* - * * 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 * */