1.0.174 • Published 11 months ago

suma-desing-stylesheets v1.0.174

Weekly downloads
-
License
MIT
Repository
-
Last release
11 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

1 year ago

1.0.148

1 year ago

1.0.165

12 months ago

1.0.164

12 months ago

1.0.167

12 months ago

1.0.166

12 months ago

1.0.161

12 months ago

1.0.160

12 months ago

1.0.163

12 months ago

1.0.162

12 months ago

1.0.169

12 months ago

1.0.168

12 months ago

1.0.154

1 year ago

1.0.153

1 year ago

1.0.156

1 year ago

1.0.155

1 year ago

1.0.150

1 year ago

1.0.152

1 year ago

1.0.151

1 year ago

1.0.158

12 months ago

1.0.157

12 months ago

1.0.159

12 months ago

1.0.172

11 months ago

1.0.171

11 months ago

1.0.174

11 months ago

1.0.173

11 months ago

1.0.170

12 months ago

1.0.143

1 year ago

1.0.142

1 year ago

1.0.145

1 year ago

1.0.144

1 year ago

1.0.141

1 year ago

1.0.140

1 year ago

1.0.147

1 year ago

1.0.146

1 year ago

1.0.132

1 year ago

1.0.131

1 year ago

1.0.134

1 year ago

1.0.133

1 year ago

1.0.130

1 year ago

1.0.139

1 year ago

1.0.136

1 year ago

1.0.135

1 year ago

1.0.138

1 year ago

1.0.137

1 year 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

1 year ago

1.0.128

1 year ago

1.0.125

1 year ago

1.0.124

1 year ago

1.0.127

1 year ago

1.0.126

1 year 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