Arquitectura de CSS

La hoja de estilos de Autómata está construida bajo el modelo BEM (bloque, elemento, modificador) ya que este modelo mantiene un estándar de nomenclatura de selectores para mejorar la legibilidad del código y facilitar su mantenimiento.

Bloque

Un bloque es un objeto o contexto que contiene elementos dentro. Por ejemplo, en el cuerpo humano, la cabeza podría ser un bloque, ya que contiene otros elementos como cabello, ojos, nariz, boca, etc.

Nota Los bloques pueden ser elementos reutilizables.

Elemento

Un elemento siempre está dentro de un bloque, en su sintaxis, un elemento se precede por el nombre del bloque padre y dos guiones bajos .bloque__elemento Siguiendo con el ejemplo del cuerpo humano, si la cabeza es el bloque, el cabello sería un elemento:

Modificador

Un modificador es para indicar cambios de estilo como el color, forma o tamaño. Siguiendo el ejemplo anterior, si el cabello es un elemento, el color sería un modificador:

Nota Los nombres de los modificadores podrían parecer repetitidos, pero de esa manera evitamos que los estilos puedan tener conflictos entre si.

Ejemplo práctico

En el siguiente ejemplo se muestra un bloque de menú construido bajo la metodología BEM junto con su código HTML y CSS.

Importante Un bloque no debería ser un elemento hijo de otro bloque, recuerda que uno de los objetivos de BEM es que los bloques puedan ser componentes reutilizables para diferentes partes de la aplicación:

Controladores de estilo

Un controlador de estilos es realmente un modificador pero controlado por JS, por eso tiene una sintaxis diferente. Automata utiliza dos tipos de controladores de estilo:

• .is-- indica estados de un elemento o bloque, por ejemplo .is—active ó .is--hidden
• .has-- puede usarse para elementos padre, por ejemplo saber si un bloque contiene submenus .has--submenu

Un controlador de estilos es realmente un modificador pero controlado por JS, por eso tiene una sintaxis diferente. Automata utiliza dos tipos de controladores de estilo:

Alertas

Muestran mensajes de éxito, advertencias, información importante o errores. Para usar este componente, agrega la clase .alert a un elemento <div> y después colocar tu contenido en un <p>

Cerrar

Para crear un botón de cerrar a un Alert, agrega dentro el icono de cerrar con el atributo data close: <icon class="icon--x" data-close="alert"></icon>

Modificadores

Hay varios modificadores de estilo disponibles, solo tienes que agregar una de las siguientes clases para darle una apariencia diferente.

Avatar

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem earum recusandae possimus vero libero odio in voluptatum nesciunt. Unde adipisci recusandae ea cum ipsum laborum vel vitae quod hic corrupti.

Tamaños

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem earum recusandae possimus vero libero odio in voluptatum nesciunt. Unde adipisci recusandae ea cum ipsum laborum vel vitae quod hic corrupti.

• Vista previa
• Código

Iniciales

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem earum recusandae possimus vero libero odio in voluptatum nesciunt. Unde adipisci recusandae ea cum ipsum laborum vel vitae quod hic corrupti.

Estilos

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem earum recusandae possimus vero libero odio in voluptatum nesciunt. Unde adipisci recusandae ea cum ipsum laborum vel vitae quod hic corrupti.

• Vista previa
• Código

Badges

Para crear un badge, solo declara una etiqueta <span> con la clase .badge y agrega el modificador que necesites, por ejemplo: .badge--primary

Solidos

Hay varios modificadores de color sólido disponibles, solo tienes que agregar una de las siguientes clases a un elemento .badge para darle una apariencia diferente.

Light

Hay varios modificadores de color sólido disponibles, solo tienes que agregar una de las siguientes clases a un elemento .badge para darle una apariencia diferente.

Breakpoints

Autómata usa 4 breakpoints para controlar el comportamiento responsivo de los elementos:

Existen 4 breakpoints adicionales que son de utilidad en la construcción de templates o nuevos módulos.

Botones

Para usar este componente, solo agrega la clase .button y un modificador como .button--primary a un elemento <a> o <button>.

Solidos

Hay varios modificadores de color sólido disponibles, solo tienes que agregar una de las siguientes clases a un elemento .button para darle una apariencia diferente.

Outline

Hay varios modificadores de tipo Outline disponibles, se reocmienda usarlos principalmente para botones secundarios de las acciones menos importantes. Solo tienes que agregar una de las siguientes clases para darle una apariencia diferente.

Light

Hay varios modificadores de tipo light disponibles, se reocmienda usarlos principalmente para botones secundarios de las acciones menos importantes. Solo tienes que agregar una de las siguientes clases para darle una apariencia diferente.

Link

Hay varios modificadores de color sólido disponibles, solo tienes que agregar una de las siguientes clases para darle una apariencia diferente.

Disabled

Es posible deshabilitar cualquier botón sin importar el modificador o estilo personalizado que tenga, solo tienes que agregar el atributo disabled o bien la clase .button--disabled a un elemento <button>

Nota Cuando un botón es deshabilitado no tendrá ningún efecto de puntero.

Tamaños

Existen dos variaciones de tamaño para los botones, grande y pequeño, para usarlas solo tienes que agregar al elemento <button> la clase .button—large ó .button--small

Fluid

Es posible hacer que un botón abarque todo el ancho de su contenedor usando el modificador .button--fluid

Botones agrupados

Es posible crear grupos de botones utilizando el componente .button-group.

Cards

El componente Card se utiliza para contener información en pequeños bloques y lograr un contenido más organizado. Además puedes definir su estilo usando el modificador .card--{color}

Header

Un Card pueden contener el elemento .card__header para resaltar el encabezado y tiene que acompañarse siempre del elemento .card__body

Collapse

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem earum recusandae possimus vero libero odio in voluptatum nesciunt. Unde adipisci recusandae ea cum ipsum laborum vel vitae quod hic corrupti.

• Collapsible default 1
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt dolores consequuntur minima dolore accusamus nam! Sequi accusantium numquam consequuntur nihil aliquid nulla, sit recusandae quia aut cum beatae, laborum culpa.
• Collapsible default 2
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt dolores consequuntur minima dolore accusamus nam! Sequi accusantium numquam consequuntur nihil aliquid nulla, sit recusandae quia aut cum beatae, laborum culpa.
• Collapsible default 2
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt dolores consequuntur minima dolore accusamus nam! Sequi accusantium numquam consequuntur nihil aliquid nulla, sit recusandae quia aut cum beatae, laborum culpa.

• Collapsible primary 1
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt dolores consequuntur minima dolore accusamus nam! Sequi accusantium numquam consequuntur nihil aliquid nulla, sit recusandae quia aut cum beatae, laborum culpa.

Forms

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem earum recusandae possimus vero libero odio in voluptatum nesciunt. Unde adipisci recusandae ea cum ipsum laborum vel vitae quod hic corrupti.

Validaciones

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta aut facere provident rem ipsam perferendis, excepturi reiciendis consequatur quas! Ea quidem fuga odit aspernatur reiciendis iste ex, sint animi! Soluta?

List

Para aplicar este componente, agrega la clase .list a un elemento <ul> y opcionalmente puedes agregar un modificador de estilo:

Colores

Es posible cambiar el color de las viñetas de una lista, solo tienes que usar el modificador .list--{color} en el elemento <ul>

Modales

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum est, commodi quidem, labore voluptates distinctio, voluptas magnam suscipit velit enim obcaecati similique in sapiente voluptatem sequi reprehenderit possimus! Quas, voluptates.

Abrir modal con botón en HTML

Abrir modal con JS

        
            atmOpenModal('modal-default');
        
    

Cerrar modal con JS

        
            atmCloseModal('modal-default');
        
    

Progress

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem earum recusandae possimus vero libero odio in voluptatum nesciunt. Unde adipisci recusandae ea cum ipsum laborum vel vitae quod hic corrupti.

Progress animada

Progress sin animar

La función startProcessing() agrega a la clase progress los span necesarios para empezar la animación.
La función endProcessing()endProcessing elimina los span para detener la animación.

        
            startProcessing();
        
    

        
            endProcessing();
        
    

Por framework ya se utilizan en automático entrando y saliendo del proceso al realizar peticiones con postData. Si es necesario parar antes de tiempo o agregar un procesando, se pueden ejecutar las funciones para mostrar el estado de procesando.

Spinner

El componente Spinner se utiliza para informar al usuario que la aplicación está procesando.

Es posible cargar el Spinner usando JS incrustando la variable app en un contenedor.

        
            $(" .container ").html(app.spinnerHTML);
        
    

Tablas

Toast

El componente Toast se utiliza para enviar al usuario alertas sobre las acciones del sistema que pasan en backend.

Botón de toast

Es posible invocar un Toast mediante un botón, solo tienes que agregarle los siguientes atributos:

Función JS

Tambíen es posible invocar un Toast mediante la función atmToast() la cual ofrece los siguientes parámetros:

        
            // Funcion
            atmToast(type, text, time);

            // Exjempolo
            atmToast('success', 'Acción exitosa de ejemplo.', 8000);
        
    

Tooltip

Para utilizar el componente Tooltip solo tienes que poner una o varias palabras dentro de una etiqueta span y agregar el atributo data-tooltip con el texto que quieres mostrar.