Spectre es un marco CSS ligero, receptivo y moderno, que proporciona extensible con un desarrollo más rápido. Facilita el sistema de diseño receptivo basado en la propiedad de caja flexible, además de proporcionar los elementos básicos y el estilo tipográfico.
Para usar Spectre, es mejor tener un conocimiento mínimo sobre la estructura de carpetas. No recomendamos que recuerde el destino de cada archivo, pero hay algunos archivos que desempeñarán un papel principal en Spectre. Si podemos manipular esos archivos, también podemos personalizar el Espectro. Al igual que Scss, Less files son los archivos principales aquí. Podemos poner nuestras imágenes de diseño propio como un icono en el archivo de iconos.
Los archivos CSS de Spectre compilados y minificados están disponibles para su descarga desde el sitio oficial .
Estructura de carpetas de Spectre CSS: esta estructura le dará una idea básica de dónde buscar cualquier archivo en particular.
spectre/ ├── dist/ // Build folder │ ├── spectre-exp.css │ ├── spectre-exp.min.css │ ├── spectre-icons.css │ ├── spectre-icons.min.css │ ├── spectre.css │ └── spectre.min.css │ ├── docs/ │ ├── dist/ // Pre-built CSS folder │ │ ├── spectre-exp.css │ │ ├── spectre-exp.min.css │ │ ├── spectre-icons.css │ │ ├── spectre-icons.min.css │ │ ├── spectre.css │ │ └── spectre.min.css | ├── css/ // Docs CSS files │ │ └── docs.css | ├── src/ │ │ ├── scss // Docs Sass files │ │ │ └── docs.scss │ │ ├── index.pug // Docs Pug files │ │ └── ... │ ├── examples/ // Example tempalte │ │ └── starter.html │ ├── ../ │ ├── index.html │ └── ... │ ├── src/ // Source Sass files │ ├── spectre.scss │ ├── spectre-icons.scss │ ├── spectre-exp.scss │ ├── _mixins.scss │ ├── _variables.scss │ └── ... │ ├── gulpfile.js ├── package.json └── ...
Estructura de carpetas:
Estructura de carpetas
Ejemplo: este ejemplo describe la estructura de carpetas de Spectre al importar el archivo CSS de Spectre compilado y minimizado desde una máquina local.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href="spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href="spectre.css/dist/spectre-icons.min.css"> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>SPECTRE Folder Strcuture Sample</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:
Estructura de carpetas de Spectre
Nota: este código no se ejecutará en ide, ya que el archivo fuente del espectro se importa desde una máquina local.
Referencia: https://picturepan2.github.io/spectre/getting-started/custom.html#folders
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA