Sistema de diseño Suma

suma-desing-stylesheets es una biblioteca de estilos CSS desarrollada por Suma Code. Esta biblioteca se basa en los principios del Diseño Atómico, lo que permite a los desarrolladores construir interfaces de usuario consistentes y reutilizables a través de múltiples proyectos.

La biblioteca proporciona un conjunto de componentes de diseño (átomos, moléculas, organismos) que se pueden combinar para crear interfaces de usuario complejas. Cada componente ha sido diseñado con la consistencia y la reutilización en mente, lo que facilita la creación de interfaces de usuario coherentes en todos los proyectos de Suma Code.

Además, suma-desing-stylesheets incluye una serie de utilidades CSS que facilitan la personalización de los estilos y la adaptación de los componentes a las necesidades específicas de cada proyecto.

Con suma-desing-stylesheets, los equipos de Suma Code pueden acelerar el proceso de desarrollo, reducir la duplicación de código y garantizar una experiencia de usuario coherente en todos los proyectos.

Instalación

Para instalar este proyecto y todas sus dependencias, ejecuta el siguiente comando:

npm install

Uso de la biblioteca de estilos suma-desing-stylesheets

Este proyecto utiliza la biblioteca de estilos suma-desing-stylesheets. Para instalarla, ejecuta el siguiente comando:

npm install suma-desing-stylesheets

Una vez instalada, la biblioteca se debe agregar la linea siguiente en el archivo styles.css del proyecto:

@import url("../node_modules/suma-desing-stylesheets/public/stylesheets/min/style_suma.min.css");

Ahora puedes usar los estilos de suma-desing-stylesheets en tu aplicación. Simplemente aplica las clases de suma-ds a tus elementos HTML como lo harías con cualquier otra biblioteca de CSS.

Ejemplos

Botones:

Vistaprevia:

Codigo html:

  <button class= 'suma-btn-blue'><p>Button Blue</p></button>
  <button class= "suma-btn-accent"><p>Button Accent</p></button>
  <button class= "suma-btn-purple"><p>Button Purple</p></button>
  <button class= "suma-btn-light-blue"><p>Button Light Blue</p></button>

Enlaces

Vistaprevia:

Codigo html:

    <!-- Link icon -->
    <div class="suma-links">
        <img src="/assets/icons/green_info.svg" alt="">
        <p class="suma-text-bold">Info</p>
    </div>
    <div class="suma-links">
        <img src="/assets/icons/orange_inventory.svg" alt="">
        <p class="suma-text-bold">Inventario</p>
    </div>

Mas ejemplos en Suma Code System Desing