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.
-
Coloca el link y script en el head de tu html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Mixgyt/RetroSci-Fi_library/dist/css/sci-fi.css"> <script src="https://cdn.jsdelivr.net/gh/Mixgyt/RetroSci-Fi_library/dist/js/retrosci-fi.js"></script>
-
Listo utiliza 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>
-
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>
-
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 carpetadist/css/sci-fi.cssa 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.
| Nombre variable | Color | Hexadecimal |
|---|---|---|
| Primary |  |
#DCC9A9 |
| Secondary |  |
#1A1A1A |
| Success |  |
#4E6851 |
| Info |  |
#4B848A |
| Warning |  |
#FBC359 |
| Danger |  |
#E70103 |
| Light |  |
#F9F2F2 |
| Alert |  |
#BB3A2D |
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
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*/
✅ - Cesar Enoc Aparicio Reyes (AA23026)
✅ - Cesar Alexander Garay Ortez (GO22007)
✅ - Gerson Mauricio Alegria Caballero (AC23014)
✅ - Juan Antonio Sandoval Paiz (SP23002)