Componentes Front-End Sistema Único¶

En esta página documentaremos los estilos generales y los diferentes componentes que es posible usar en sistema único.

Estilos de texto¶

Headers¶

Estos son los estilos que se aplican por defecto a los elementos h1, h2 y h3:

Alineación¶

Para alinear un texto hacia la derecha de manera forzada hay que aplicar la clase .text-right.

<p class="text-right">Este texto está alineado a la derecha.</p>

Para alinear un texto hacia la izquierda de manera forzada hay que aplicar la clase .text-left.

<p class="text-left">Este texto está alineado a la izquierda.</p>

Para alinear un texto al centro de manera forzada hay que aplicar la clase .text-center.

<p class="text-center">Este texto está alineado al centro.</p>

Estas clases pueden ser aplicadas directamente sobre párrafos o sobre divs que contienen texto.

Información en detalles¶

Cuando se requiera presentar información detallando datos específicos de un usuario o mostrar los datos ingresados en un formulario, se puede usar un div con la clase .details, que lleva un small.detail-label con la etiqueta del dato a mostrar y un p.detail-content con los datos.

<div class="details">
    <small class="detail-label">Pueblo Originario</small>
    <p class="detail-content">Mapuche</p>
</div><!-- /.details -->

El resultado de esto sería lo siguiente:

Enlaces¶

Por defecto los enlaces se presentarán de color primario, sin decoraciones. Al hacer hover sobre el enlace, se mostrara subrayado.

<a href="https://indap.cl">Esto es un enlace</a>

Mediante los enlaces tambien podemos desplegar un listado de links para ello debemos agregar una etiqueta a junto con su clase correspondiente.

<a data-dropdown="drop1" class="dropdown"><i class="fa fa-folder-open-o"></i> Documentos <i class="fa fa-caret-down"></i></a></p>

Una vez que tengamos nuestra etiqueta a debemos agregar un div con todos los links que queramos listar.

<div id="drop1" data-dropdown-content class="content f-dropdown" aria-hidden="true">
   <h3 class="f-dropdown__title">Título</h3>
   <a class="f-dropdown__link" href="#"><i class="fa fa-cloud-download"></i> Nombre archivo</a>
   <a class="f-dropdown__link" href="#"><i class="fa fa-cloud-download"></i> Nombre archivo largo</a>
   <a class="f-dropdown__link" href="#"><i class="fa fa-cloud-download"></i> Nombre archivo</a>
   <a class="f-dropdown__link" href="#"><i class="fa fa-cloud-download"></i> Nombre archivo</a>  
   <h3 class="f-dropdown__title">Título</h3>      
   <a class="f-dropdown__link" href="#"><i class="fa fa-cloud-download"></i> Nombre archivo</a>
   <a class="f-dropdown__link" href="#"><i class="fa fa-cloud-download"></i> Nombre archivo</a>
</div>

El resultado de esto sería lo siguiente:

Mensajes de alerta¶

Los mensajes de alerta nos permiten dar información relevante y oportuna a los usuarios sobre las interacciones que está realizando en la interfaz.

Para crear un mensaje de alerta debemos crear un div con la clase .alert-box y .msg que debe contener un p con la información especial y, opcionalmente, puede llevar un título h3:

<div data-alert class="alert-box msg">
  <h3>Título del mensaje</h3>
  <p>
    Lorem ipsum dolor sit amet, consetetur <a href="#">sadipscing elitr</a>, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero 
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </p>
</div>

Además de esto podemos cambiar los colores de las alertas mediante las clases, si queremos que sea de color verde debemos agregarle la clase .success o de lo contrario si queremos que este se vea de color rojo debemos agregarle la clase .alert.

<div data-alert class="alert-box msg success">
  <h3>Título del mensaje</h3>
  <p>
    Lorem ipsum dolor sit amet, consetetur <a href="#">sadipscing elitr</a>, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero 
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </p>
</div>

<div data-alert class="alert-box msg alert">
  <h3>Título del mensaje</h3>
  <p>
    Lorem ipsum dolor sit amet, consetetur <a href="#">sadipscing elitr</a>, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero 
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </p>
</div>

El resultado de esto sería el siguiente:

Cajas Blancas¶

Para crear un elemento con estilo de caja blanca se debe utilizar la clase .box. Por defecto la caja no tiene un espacio interior definido para que pueda ser aplicado a elementos ya existentes en una interfaz y mantenga los rellenos de ese elemento.

Para asignarle relleno interior se deben utilizar las clases .box-padding que asigna un padding de 2rem o se puede usar la clase .box-padding-large que agrega un padding de 6rem arriba y abajo y 4rem a los costados:

Acá un ejemplo de caja blanca normal:

<div class="box">
   <h3>Soy una caja</h3>
   <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
      ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
      occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </p>
</div>

Acá otro ejemplo con la caja blanca pero esta vez con padding:

<div class="box box-padding">
   <h3>Soy una caja</h3>
   <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
      ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
      occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </p>
</div>

Pestañas (tabs)¶

Los tabs son un componente que sirve para dividir los contenidos de una pantallay así poder organizarlos de una manera sencilla para el usuario. Se pueden insertar tags en cada una de las pestañas para asi poder entregar una información adicional.

Si el contexto lo requiere y el espacio lo permite, se puede utilizar el lado derecho de los tabs para asi poder incluir una accion a la interfaz. Es ideal para descargar un excel que reúne el contenido presentado en la pantalla.

<div class="tabs__container">
   <div class="tabs__links">
      <a href="#tab1" class="tab__link active">Tab 1 <span class="tag">4 de 20</span></a>
      <a href="#tab2" class="tab__link">Tab 2 <span class="tag">10 de 20</span></a>
      <a href="#tab3" class="tab__link">Tab 3 <span class="tag">6 de 20</span></a>
      <div class="tabs__action">
            <a class="btn">
              <span class="btn__icon"><i class="fa fa-file-excel-o"></i></span> Descargar
            </a>
      </div><!-- /.tabs-action -->
    </div><!-- /.tabs-->
    <div class="tabs__content">
        <div id="tab1" class="tab__pane active">
            <h3>Tab 1</h3>
        <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div><!-- /.tab__pane -->
        <div id="tab2" class="tab__pane">
            <h3>Tab 2</h3>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
         </div><!-- /.tab__pane -->
         <div id="tab3" class="tab__pane">
             <h3>Tab 3</h3>
             <p>
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
                 exercitation ullamco laboris nisi ut aliquip.
             </p>
         </div><!-- /.tab__pane -->
      </div>
</div>

Acá el ejemplo correspondiente de como se verían los tabs:

Modal(PopUp)¶

Para poder crear un modal debemos utilizar un elemento a con la propiedad data-reveal-id ademas de llevar su correspondiente nombre en clave que ocupará que para este ejemplo se ocupara el modal-1.

A su vez para poder mostrar este modal debemos crear un div con la clase .reveal-modal modal y sus diferentes propiedades. Dentro de este div debemos crear otro que funcionará como contenedor del modal.

<div id="modal-1" class="reveal-modal modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
   <div class="modal__box-container">
      <div class="modal__box">
         <div class="modal__box-content">
            <h2 id="modalTitle">Título del modal</h2>
            <p>
               Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos 
               et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
            <a class="btn primary">
               <span class="btn__icon"><i class="fa fa-external-link" aria-hidden="true"></i></span> Guardar y cerrar
            </a>
         </div><!-- /.modal__box-content -->
         <a class="close-reveal-modal close-modal" aria-label="Close"><i class="fa fa-times"></i></a>
      </div><!-- /.modal-box -->
   </div><!-- /.reveal-modal__box-container -->
</div><!-- /.reveal-modal -->

Acá una imagen de como se verá este modal:

Botones¶

Para crear un elemento con estilo de botón se debe utilizar la clase .btn en un elemento button. El estilo por defecto de los botones es gris, pero si junto a la clase .btn agregamos clases adicionales, los estilos igual cambian. La clase .primary hace que el botón sea azul, la clase .success hace que el botón sea verde y la clase .alert hace que el botón sea rojo.

Los botones azules se deben utilizar para aquellas acciones que son esenciales par avanzar en el proceso del usuario (Ej: Guardar, continuar). Los botones grises se deben utilizar para las acciones secundarias de una pantalla. Los botones de color verde se deben utilizar solo una vez por pantalla, para aquellas acciones que finaliza un proceso y o una recompensa al usuario (Ej: Enviar postulación, crear perfil). Los botones de color rojo deben ser utilizados solo para acciones destructivas (Ej: Borrar cuenta, marcar como rechazado).

Los siguientes botones estan construidos usando el elemento button:

<div class="buttons">
    <button type="button" class="btn primary">
        <span class="btn__icon"><i class="fa fa-save"></i></span> Guardar
    </button>
    <button type="button" class="btn">
        <span class="btn__icon"><i class="fa fa-save"></i></span> Guardar
    </button>
    <button type="button" class="btn success">
        <span class="btn__icon"><i class="fa fa-save"></i></span> Guardar
    </button>
    <button type="button" class="btn error">
        <span class="btn__icon"><i class="fa fa-save"></i></span> Guardar
    </button>
    </div>

A su vez tambien podemos crear los botones mediante la etiqueta a de la siguiente manera:

<div class="buttons">
    <a class="btn primary">
        <span class="btn__icon"><i class="fa fa-save"></i></span> Guardar
    </a>

    <a class="btn">
        <span class="btn__icon"><i class="fa fa-save"></i></span> Guardar
    </a>

    <a class="btn success">
        <span class="btn__icon"><i class="fa fa-save"></i></span> Guardar
    </a>

    <a class="btn error">
        <span class="btn__icon"><i class="fa fa-save"></i></span> Guardar
    </a>
</div>

Acá un ejemplo de como se verían los botones:

Tablas¶

Para contruir una tabla en este caso como la que aparecera a continuación se le debe asignar la clase .table-cebra y además debe estar dentro de un div con la clase .table-container.

Las columnas se adaptarán su ancho de manera automática de acuerdo al contenido que tengan, sin embargo, sepuedo aplicar clases .column-small, .column-medium y .column-large para así forzar un tamaño mínimo de 50px, 150px y 300px respectivamente

<div class="table-container">
    <table>
       <thead>
           <tr>
               <th class="column-small">Sm</th>
               <th class="column-medium">Medium</th>
               <th class="column-large">Large</th>
               <th>Header</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td>1</td>
               <td>Content 1</td>
               <td>Content 1</td>
               <td>Content 1</td>
           </tr>
           <tr>
               <td>2</td>
               <td>Content 2</td>
               <td>Content 2</td>
               <td>Content 2</td>
           </tr>
       </tbody>
    </table> 
</div>

Y acá un ejemplo de como se verá esta tabla: