Spectre es un marco CSS ligero, receptivo y moderno que permite un desarrollo y una extensibilidad más rápidos. Proporciona los elementos esenciales y los estilos tipográficos, así como un sistema de diseño receptivo basado en la función flexbox. Supera numerosos problemas que teníamos anteriormente, como la compatibilidad entre navegadores. Las páginas web están actualmente optimizadas para todos los navegadores (Internet Explorer, Firefox y Chrome) y tamaños de pantalla (Escritorio, tabletas, phablets y teléfonos).
Spectre es un proyecto paralelo que nació de años de desarrollo de CSS en un gran servicio web. Spectre solo incluye estilos básicos modernos, sistemas de diseño adaptables, componentes CSS y utilidades, que se pueden personalizar para su proyecto mediante el compilador Sass/Scss. El uso de Spectre.css es absolutamente gratuito.
¿Instalación de Spectre CSS?
Hay un total de 5 formas de instalar Spectre, que se detallan a continuación:
- Instale manualmente
- Instalar desde CDN
- Instalar con NPM
- Instalar con hilo
- Instalar desde Bower
Vamos a entender todos estos tipos de instalación de forma secuencial.
Instalar manualmente: podemos descargar fácilmente el archivo CSS de Spectre compilado y minimizado desde el enlace dado. El tamaño del archivo será de aproximadamente 10Kb.
https://github.com/picturepan2/spectre/releases
Después de descargar los archivos, coloque el archivo en su carpeta de trabajo actual y navegue por los archivos útiles como spectre.min.css, spectre-exp.min.css y spectre-icons.min.css. Esto habilitará el espectro en su carpeta de trabajo. Luego, especifique esos enlaces de ruta de archivo a su código.
<enlace rel=”hoja de estilo” href=”spectre.min.css”> <enlace rel=”hoja de estilo” href=”spectre-exp.min.css”> <enlace rel=”hoja de estilo” href=”spectre-icons. min.css”>
Instalar desde CDN: simplemente podemos usar los enlaces mencionados a continuación en la sección principal de nuestro archivo HTML que habilitará Spectre.
<enlace rel=”hoja de estilo” href=”https://unpkg.com/spectre.css/dist/spectre.min.css”> <enlace rel=”hoja de estilo” href=”https://unpkg.com/spectre .css/dist/spectre-exp.min.css”> <enlace rel=”hoja de estilo” href=”https://unpkg.com/spectre.css/dist/spectre-icons.min.css”>
Instalar con NPM: para instalar Spectre, solo necesitamos ejecutar el comando a continuación, luego necesitamos navegar el archivo requerido en nuestro archivo HTML.
npm instalar spectre.css -guardar
Instalar con Yarn: para instalar Spectre, solo necesitamos ejecutar el comando a continuación, luego necesitamos navegar el archivo requerido en nuestro archivo HTML.
hilo agregar spectre.css
Instalar desde Bower: Podemos instalar Spectre desde la glorieta. Este método para instalar el Spectre no es el preferido y se evita.
glorieta instalar spectre.css -guardar
Ejemplo 1: Construiremos código Spectre Inline en este ejemplo.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> <title>Spectre CSS</title> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>SPECTRE CSS</strong> <br><br> <div> <code>A Computer Science portal for Geeks</code> </div> </center> </body> </html>
Producción:
Ejemplo 2: Haremos un fragmento de código de Spectre en este ejemplo.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> <title>Spectre CSS</title> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>SPECTRE CSS</strong> <br><br> <pre class="code" data-lang="HTML"> <h3>Learning Web Development</h3> <code>A Computer Science portal for Geeks</code> </pre> </center> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sahilintern y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA