Inicio>Recursos para la creación de sitios web>Datos del sitio web
Descargar

? Matcha.css

Matcha.css es una biblioteca CSS pura diseñada para diseñar elementos HTML de manera similar a una hoja de estilo de navegador predeterminada, eliminando la necesidad de que los usuarios parcen manualmente sus documentos.

Ideal para la prototipos rápidos, las páginas HTML estáticas, los documentos generados por Markdown y los desarrolladores que buscan optimizar su flujo de trabajo sin profundizar en las complejidades de CSS y desean utilizar la gama completa de elementos HTML disponibles.

  • ✅ Sin pasos de compilación
  • ✅ Sin dependencias
  • ✅ No JavaScript
  • ✅ No se necesita configuración
  • ✅ No se requiere refactorización
  • ✅ ~7kB gzipped (se puede reducir aún más)

? Ejemplos de captura de pantalla

? ¿Por qué elegir matcha.css ?

? Agnóstico

Funciona sin problemas con cualquier documento y cubre una gama más amplia de elementos HTML en comparación con bibliotecas similares. Sigue siendo discreto al aprovechar los pseudo-elementos CSS y ofrece un amplio soporte de navegador.

? Reversible

Simplemente incluya su <link rel="stylesheet"> para comenzar, y elimínelo cuando sea necesario sin la necesidad de refactorización de documentos o limpieza.

? Semántico

Adapta el estilo basado en la jerarquía de elementos, proporcionando comportamientos intuitivos como "submenus implícito" al anidar <menu> elementos, indicador de campo requerido ( * ) cuando una <label> se combina con <input required> , etc.

? Personalizable

Cree su propia compilación utilizando nuestro constructor personalizado para seleccionar características específicas y reducir el tamaño final de compilación de acuerdo con las necesidades de su proyecto.

? De código abierto

Lanzado bajo la licencia MIT, disponible gratuitamente en github.com/lowlightrewer/matcha.

Uso

Para utilizar Matcha.CSS , solo incluya la siguiente línea en la sección <head> de su documento. ¡Es así de simple! 

 < link rel =" stylesheet " href =" https://matcha.mizu.sh/matcha.css " >

Los activos están alojados en Vercel, pero Matcha.CSS también está disponible y los servicios CDN que distribuyen paquetes de NPM como JSDELIVR.

Todas las versiones publicadas están disponibles en el directorio /v/ . Por defecto, se sirve la rama main .

? A la carta

Cada subdirectorio enumerado en el directorio In /styles también se sirve directamente desde Matcha.mizu.sh. Por ejemplo, si solo desea incluir los estilos de @syntax-highlighting en lugar de usar la compilación predeterminada o una personalizada, podría usar: 

 < link rel =" stylesheet " href =" https://matcha.mizu.sh/styles/@syntax-highlighting/mod.css " >

Sin embargo, tenga en cuenta que, a menos que proporcione sus propias variables CSS, lo más probable es que deba incluir el paquete @root ya que contiene toda la definición de variables de matcha.css.

Todos los archivos mod.css también están alias a sus respectivos directorios de padres por conveniencia, lo que significa que también puede usar: 

 < link rel =" stylesheet " href =" https://matcha.mizu.sh/@syntax-highlighting.css " >

? Que contribuye

? Alcance del proyecto

  • Respetar las mejores prácticas de accesibilidad y usabilidad
  • Respeta las preferencias de los usuarios finales (por ejemplo, esquema de color)
  • Ser escritorio y amigable para dispositivos móviles
  • No cambiar drásticamente su estilo actual (a menos que cumpla con uno de los principios mencionados anteriormente)
  • Permanecer liviano, modular y personalizable
    • Las características adicionales consideradas como "Bloat" se excluirán de forma predeterminada y se optarán por
    • !important nunca se utilizarán para garantizar que los usuarios puedan anular fácilmente los estilos

Estructura de proyectos

Este proyecto se separa en tres directorios principales:

  • /api para funciones sin servidor se ejecutan en VERCEL
  • /app para puntos de entrada, activos estáticos y scripts de construcción
  • /styles para archivos de origen CSS

? Directorio de /styles

Cada subdirectorio dentro de esta carpeta está destinado a ser en su mayoría autónomo y alcance. Ayuda a mantener la base de código organizada, mientras que también permite a los usuarios seleccionar características específicas y crear compilaciones personalizadas.

Las características adicionales deben prefijarse utilizando el personaje @ y lo más probable es que se excluyan de forma predeterminada en el constructor para evitar hinchazón de la compilación predeterminada.

? ‍ Ciclo de vida del desarrollo

Al enviar una solicitud de extracción, la vista previa estará disponible en Vercel. Los mantenedores y otros contribuyentes pueden revisar los cambios y proporcionar comentarios antes de fusionarse.

El desarrollo local está destinado a hacerse utilizando el tiempo de ejecución de Deno. Si no desea instalarlo, también puede usar la configuración de DevContainer proporcionada para ejecutar el proyecto en un entorno contenedorizado o directamente en CodeSpaces GitHub.

Para iniciar el servidor de desarrollo, ejecute el siguiente comando: 

deno task serve

Antes de enviar sus cambios, asegúrese de que todo esté formateado correctamente ejecutando el siguiente comando: 

deno task fmt

Licencia 

 MIT License
Copyright (c) 2024-present Simon Lecoq (lowlighter)
Expandir
Información adicional
Aplicaciones relacionadas
Recomendado para ti
Información relacionada Todo