@didor/styles

0.2.0 • Public • Published


Un framework responsive SCSS ligero y flexible para construir interfaces rapidamente.


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:

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).

Package Sidebar

Install

npm i @didor/styles

Weekly Downloads

43

Version

0.2.0

License

MIT

Unpacked Size

354 kB

Total Files

52

Last publish

Collaborators

  • fvena32