[Pitch] Responsividade - Esqueça Media Query

Olá.

Quero apresentar uma ferramenta para CSS que eu acabei de desenvolver para facilitar a responsividade.

Com essa ferramenta você controla a aplicação das suas classes CSS de acordo com o tamanho da tela, como o media query, mas usando prefixos, como se fosse um grid system.

Defina seus prefixos

const sizes1 = [
    { prefix: 's-', minSize: 0 },
    { prefix: 'm-', minSize: 500 },
    { prefix: 'l-', minSize: 1000 }
];

// Defina quantos prefixos quiser

const sizes2 = [
    { prefix: 'xs-', minSize: 0 },
    { prefix: 's-', minSize: 433 },
    { prefix: 'm-', minSize: 733 },
    { prefix: 'l-', minSize: 1000 },
    { prefix: 'xl-', minSize: 1333 }
];
// Esse é o conjunto de prefixos default

Exemplo CSS

.xs-panel {width: 100%}
.m-panel {width: 50%}
.l-panel {width: 33%}

/* Controle qualquer propriedade CSS */
.xs-span {
    text-align: left;
    color: black;
}
.m-span {
    text-align: center;
    color: blue;
}

Como usar

Copie o arquivo javascript do repositório, link-o no seu arquivo HTML e chame essa a função processFlexCSS() no final, passando seus prefixos como argumento.

processFlexCSS(sizes);

A função verifica quando ocorre alteração do tamanho da tela e só executa quando há uma mudança de prefixo.