Nostradamus Predicting Maelstroms

    @didor/framework

    0.1.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/framework --save-dev
    yarn add @didor/framework

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

    Install

    npm i @didor/framework

    DownloadsWeekly Downloads

    1

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    286 kB

    Total Files

    54

    Last publish

    Collaborators

    • fvena32