Documentation

Para ver la documentación completa visita didor docs.

Principios

• Todo debe ser 100% responsive
• Todo debe ser legible en cualquier dispositivo
• Todo debe ser tan rápido como sea possible
• Debe ser fácil diseñar en el navegador
• Debe ser fácil modificar una interfaz o parte de ella sin romper ninguna otra
• Debe ser reutilizable al máximo para reducir la cantidad de código
• Documentar promueve la reutilización y explica como se ha desarrollado
• Debe generar la mínima cantidad de código
• Debe utilizar BEM para nombrar las clases.
• Debe seguir la arquitectura ITCSS para controlar la visualización final.

Características

• Permite compartir interfaces entre proyectos
• Librería de componentes en continuo crecimiento y optimización
• Funciona bien con cualquier framework: vue, react, angular, rails, ...
• Utiliza PostCss y Autoprefixer para generar el CSS.

Diferencia con otras librerías SCSS

Esta es un micro librería SCSS que te ayudará a construir aplicaciones:

    ✓ Solo 32.9 kB (8.2 kB gzipped)     ✓ Modular     ✓ Personaliza colores, bordes, tamaños & fuentes     ✓ Responsive

Instalación

Puedes instalar Didor en tu proyecto mediante npm o yarn:

npm install @didor/styles --save-dev

yarn add @didor/styles

Añadir Didor a nuestro proyecto

La mejor forma de añadir Didor a tu proyecto es importarlo directamente en tu archivo Sass/Scss principal. De esta manera tendrás más control del orden de los estilos y podrás utilizar las herramientas que incorporan.

@import '@didor/lib/index';

O directamente en el html

<link rel="stylesheet" href="dist/didor.min.css">

Personalización

Para facilitar la personalización en frameworks formados por componentes con su propio scope, tipo vue, react o angular, todas las variables configurables se han creado con variables nativas css, de esta forma las podrás editar y utlizar desde qualquier sitio.

Si quieres personalizar los estilos de la librería Didor, te recomiendo que modifiques las variables después de haber importado los archivos de didor:

@import '@didor/scss/src/didor';

:root {
  --border-radius: 10px;
  --border-color: ##2ecc71;
}

Ejemplos

En los siguientes ejemplos, se muestra un ejemplo personalizando los valores mínimos recomendados, y en el otro, aparecen todas las variables disponibles:

Ejemplo con la personalización mínima recomendada

Ejemplo con todas las opciones de personalización disponibles

Actualizaciones

Mantente informado de las actualizaciones siguiendo mi cuenta de Twitter @fvena.

Versionado

Para que haya transparencia en nuestro flujo de actualizaciones y para mantener la compatibilidad con versiones anteriores, didorscss sigue un Versionado semántico.

Puedes ir a la sección release de nuestro proyecto en GitHub o mirar el archivo CHANGELOG.md para comprobar todos los cambios realizados en cada versión.

Contribuciones

Este proyecto es y será siempre de código abierto. Eres bienvenido si quieres contribuir a su desarrollo y mejorarlo cada vez más. Para ello, tienes varias posibilidades:

• Remitiendo errores
• Añadiendo nueva funcionalidad
• Compartiendo en redes sociales
• Conviértiendote en un colaborador oficial
• Haciendo una pequeña donación

Licencia

El código está disponible bajo la licencia MIT. Esto significa que puedes usarlo, modificarlo o hacer lo que quieras con él. Esto también significa que se lo ofrecemos de forma gratuita, así que no lo critique, si encuentra algún error, etc., siéntase libre de contribuir o cominicarlo.

Desarrollado por Francisco Vena (@fvena).