retrosci-fi_library

v0.1.1

Published

a year ago

Libreria css creada en sass basada en el estilo retro ciencia ficcion japones

0High
0Medium
0Low

RETRO SCI-FI LIBRARY

Retro Sci-fi es una librería de componentes inspirada en la ciencia ficción retro de Japón. Basada en Bootstrap, está desarrollada completamente desde cero con SASS, usando clases reutilizables, estructura modular y un sistema de diseño personalizable.

🚀 Inicio Rápido

Hay varias opciones rápidas para comenzar a usar la librería:

Descargar la última versión Descargar ZIP

Clonar el repositorio

git clone https://github.com/Mixgyt/RetroSci-Fi_library.git

Instalar la librería con el comando npm
```
npm i retrosci-fi_library
```

Consulta la documentación completa

Para más detalles sobre cómo usar la librería y ejemplos prácticos, visita nuestra documentación oficial.

🎨 Paleta de colores

🛠️ Ejemplos de implementación

Botones

Navbar

Formularios

Card

Clase de colores neon

creacion de gradientes neon a los colores primarios:

Para usarlo debes Aplicar las siguientes clases para obtener el fondo de color deseado.

Clases base:

.bg-primary-neon
.bg-secondary-neon
.bg-success-neon
.bg-danger-neon
.bg-warning-neon
.bg-info-neon
.bg-light-neon
.bg-alert-neon

Imagen de los colores neon

Clases para aplicar hover a `bg-{color}-neon`

Para aplicar un estilo hover debes agregar la clase .hover-neon, si se necesita eplicar estilo neon sin necesida de hover usar la clase .hover-neon-active resultado que se obtiene:

.hover-neon /* Aplcica un estilo de hover al pasar el cursor */
.hover-neon-active /* Activa el estilo hover sin necesidad de pasar el cursor*/

Imagen de los colores neon

💻 Implementación de los estilos en tu página web

Opción 1: Descarga con npm

Instalar la librería
Ejecuta el siguiente comando en tu terminal para instalar la librería:
```
npm i retrosci-fi_library
```

Incluir el archivo en tu HTML
Agrega el archivo CSS en el <head> de tu archivo HTML:

<link rel="stylesheet" href="node_modules/retrosci-fi_library/dist/css/sci-fi.css">

Usar las clases en tu HTML
Ahora puedes usar las clases de la librería en tu HTML. Por ejemplo:
```
<button class="btn btn-primary">Haz clic aquí</button>
```

Opción 2: Clonar el repositorio con git clone o descarga del ZIP

Clonar el repositorio
Ejecuta el siguiente comando en tu terminal para clonar el repositorio:
```
git clone https://github.com/Mixgyt/RetroSci-Fi_library.git
```
Compilar los estilos (opcional)
Si deseas personalizar los estilos, puedes compilar los archivos SCSS. Usa el siguiente comando para compilar:
```
npm run css-compile
```
Incluir el archivo CSS en tu proyecto
Copia el archivo CSS generado en la carpeta dist/css/sci-fi.css a tu proyecto o enlázalo directamente desde la carpeta clonada:
```
<link rel="stylesheet" href="retrosci-fi_library/dist/css/sci-fi.css">
```
Usar las clases en tu HTML
Al igual que con la instalación por npm, puedes usar las clases de la librería en tu HTML:
```
<button class="btn btn-primary">Haz clic aquí</button>
```

Consulta la documentación completa

Para más detalles sobre cómo usar la librería y ejemplos prácticos, visita nuestra documentación oficial.

👨🏻‍💻 Integrantes

✅ - Cesar Enoc Aparicio Reyes (AA23026) ✅ - Cesar Alexander Garay Ortez (GO22007) ✅ - Gerson Mauricio Alegria Caballero (AC23014) ✅ - Juan Antonio Sandoval Paiz (SP23002)

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme