1.0.174 • Published 10 months ago

suma-desing-stylesheets v1.0.174

Weekly downloads
-
License
MIT
Repository
-
Last release
10 months ago

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:

alt text

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:

alt text

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

1.0.149

11 months ago

1.0.148

11 months ago

1.0.165

10 months ago

1.0.164

10 months ago

1.0.167

10 months ago

1.0.166

10 months ago

1.0.161

10 months ago

1.0.160

10 months ago

1.0.163

10 months ago

1.0.162

10 months ago

1.0.169

10 months ago

1.0.168

10 months ago

1.0.154

10 months ago

1.0.153

10 months ago

1.0.156

10 months ago

1.0.155

10 months ago

1.0.150

11 months ago

1.0.152

10 months ago

1.0.151

11 months ago

1.0.158

10 months ago

1.0.157

10 months ago

1.0.159

10 months ago

1.0.172

10 months ago

1.0.171

10 months ago

1.0.174

10 months ago

1.0.173

10 months ago

1.0.170

10 months ago

1.0.143

11 months ago

1.0.142

12 months ago

1.0.145

11 months ago

1.0.144

11 months ago

1.0.141

12 months ago

1.0.140

12 months ago

1.0.147

11 months ago

1.0.146

11 months ago

1.0.132

12 months ago

1.0.131

12 months ago

1.0.134

12 months ago

1.0.133

12 months ago

1.0.130

12 months ago

1.0.139

12 months ago

1.0.136

12 months ago

1.0.135

12 months ago

1.0.138

12 months ago

1.0.137

12 months ago

1.0.77

1 year ago

1.0.76

1 year ago

1.0.75

1 year ago

1.0.79

1 year ago

1.0.78

1 year ago

1.0.101

1 year ago

1.0.100

1 year ago

1.0.107

1 year ago

1.0.106

1 year ago

1.0.109

1 year ago

1.0.108

1 year ago

1.0.103

1 year ago

1.0.102

1 year ago

1.0.105

1 year ago

1.0.104

1 year ago

1.0.121

1 year ago

1.0.120

1 year ago

1.0.123

1 year ago

1.0.122

1 year ago

1.0.129

12 months ago

1.0.128

12 months ago

1.0.125

12 months ago

1.0.124

1 year ago

1.0.127

12 months ago

1.0.126

12 months ago

1.0.80

1 year ago

1.0.84

1 year ago

1.0.83

1 year ago

1.0.82

1 year ago

1.0.81

1 year ago

1.0.88

1 year ago

1.0.87

1 year ago

1.0.86

1 year ago

1.0.85

1 year ago

1.0.89

1 year ago

1.0.110

1 year ago

1.0.112

1 year ago

1.0.111

1 year ago

1.0.118

1 year ago

1.0.117

1 year ago

1.0.119

1 year ago

1.0.114

1 year ago

1.0.113

1 year ago

1.0.116

1 year ago

1.0.115

1 year ago

1.0.91

1 year ago

1.0.90

1 year ago

1.0.95

1 year ago

1.0.94

1 year ago

1.0.93

1 year ago

1.0.92

1 year ago

1.0.99

1 year ago

1.0.98

1 year ago

1.0.97

1 year ago

1.0.96

1 year ago

1.0.73

1 year ago

1.0.74

1 year ago

1.0.62

1 year ago

1.0.66

1 year ago

1.0.65

1 year ago

1.0.64

1 year ago

1.0.63

1 year ago

1.0.69

1 year ago

1.0.68

1 year ago

1.0.67

1 year ago

1.0.72

1 year ago

1.0.71

1 year ago

1.0.70

1 year ago

1.0.61

1 year ago

1.0.60

1 year ago

1.0.59

1 year ago

1.0.55

1 year ago

1.0.58

1 year ago

1.0.57

1 year ago

1.0.56

1 year ago

1.0.33

1 year ago

1.0.32

1 year ago

1.0.31

1 year ago

1.0.30

1 year ago

1.0.37

1 year ago

1.0.36

1 year ago

1.0.35

1 year ago

1.0.34

1 year ago

1.0.39

1 year ago

1.0.38

1 year ago

1.0.40

1 year ago

1.0.44

1 year ago

1.0.43

1 year ago

1.0.42

1 year ago

1.0.41

1 year ago

1.0.48

1 year ago

1.0.47

1 year ago

1.0.46

1 year ago

1.0.45

1 year ago

1.0.49

1 year ago

1.0.50

1 year ago

1.0.54

1 year ago

1.0.52

1 year ago

1.0.29

1 year ago

1.0.26

1 year ago

1.0.25

1 year ago

1.0.24

1 year ago

1.0.28

1 year ago

1.0.27

1 year ago

1.0.23

1 year ago

1.0.22

1 year ago

1.0.21

1 year ago

1.0.20

1 year ago

1.0.18

1 year ago

1.0.17

1 year ago

1.0.16

1 year ago

1.0.15

1 year ago

1.0.14

1 year ago

1.0.13

1 year ago

1.0.12

1 year ago

1.0.11

1 year ago

1.0.10

1 year ago

1.0.9

1 year ago

1.0.8

1 year ago

1.0.7

1 year ago

1.0.6

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago