Clever Geek Handbook

Numl: lenguaje de marcado y estilo alternativo para la web

¡Hola! Mi nombre es Andrey, he desarrollado profesionalmente interfaces web durante más de 11 años y durante el último año he estado desarrollando el proyecto Numl, que puede denominarse lenguaje de marcado y diseño para la web. En este artículo, le mostraré cómo, en un intento de superar una serie de características CSS y simplificar el diseño de proyectos web, terminamos con un lenguaje completo que no solo satisfizo todas nuestras necesidades de estilo, sino que también nos permitió reducir la cantidad de código JS y mejorar la accesibilidad.





Para empezar, brevemente sobre Numl y cómo podría ser de interés para los desarrolladores.



Numl es un lenguaje de marcado que combina las funciones de un marco CSS , un marco JS sin composición y un Sistema de diseño , y proporciona un conjunto de elementos preconstruidos, cada uno de los cuales tiene un amplio conjunto de propiedades para la personalización. El lenguaje se basa en la API nativa del navegador Custom Elements de la especificación de Web Components y es compatible con los marcos JS populares como Vue , Svelte , Angular y React . Una característica distintiva (e incluso diría "única") de Numl es que genera todos los estilos para la interfaz en tiempo de ejecuciónpara aprovechar al máximo su CSS y lograr una gran flexibilidad en el diseño y la personalización de elementos. Este artículo es la respuesta a la pregunta de cómo sucedió y por qué este enfoque merece el derecho a la vida.



La semana pasada, el 4 de julio, el proyecto cumplió exactamente un año y ha pasado la etapa de prueba de concepto . Un gran proyecto Sellerscale y una extensión de navegador de Sellerscale están escritos en él . Además, usando Numl, se han creado varios sitios más, incluyendo su propia página de destino y Storybook. Un conjunto completo de enlaces estará al final.





Tablero de instrumentos Sellerscale. Pila: VueJS, Numl





Extensión Sellerscale. Pila: Svelte, Numl



Numl ,   HTML/CSS , -, CSS ARIA. , CSS , , -. Utility-First CSS? .



, Numl, numl.design, Storybook , Numl REPL.





22 , , Turbo Pascal, , , . , - . - HTML/CSS, JS- . , . , , , , CSS-, .



, , Modifier Value ( ). , , . , .



, , , CSS , . . , -, , . - , , , , . " CSS", :



  • CSS . , Grid, . , ( ), position, top/right/bottom/left transform, JS, .
  • CSS , . , box-shadow (/ ), transform ( ) .. , JS-, .
  • , . !important .
  • , . .cls:hover .cls:focus . , , . CSS (.cls:hover:not(:focus) ..), , , . , - , .
  • , . , (.btn.fancy-btn) , " ". , , , "/ hover ". " ", ( touch-) CSS.
  • CSS Media Queries (@media not all and (hover: none)) , .
  • CSS+HTML, CCSOM+DOM . , , , .
  • JS, CSS- . . runtime - getComputedStyle(), .
  • CSS . , .


, . , - . , breakpoints CSS-.



, , — . CSS , - , , CSS .



, .





, CSS, . , CSS . , , .



. , , MyGrid MyFlex display , , item- (basis/width/height) - ( ) . basis, width, height , .



size text, . size font-size/line-heigh, ( css ), , ..



inline-. , , , , , .



, , DX (Developer Experience). / .



- , . .



. . , . , . :



<template>
    <div :class="classes" :style="styles">
        <slot></slot>
    </div>
</template>


, !



.. . . :



<my-btn>
    Button
    <my-popup>Popup content</my-popup>
</my-btn>


, . , . MyDropdown, . , , .



, , , , , , ( ). - - my-grid, . Custom Elements. , ! Custom Elements, Open Source NUDE Elements, Numl. nu-.



: NUDE – JS-, Numl .

. Numl . inline-. CSS . CSS . , : nu-grid columns 1fr 1fr. , columnsAttr('1fr 1fr'), :



export function columnsAttr(val) {
    return {
        'grid-template-columns': val,
    };
}


CSS:



nu-grid[columns="1fr 1fr"] {
    grid-template-columns: 1fr 1fr;
}


… <style>, <head>. , CSS, .



( ), , , CSS.



, , - CSS ( Atomic CSS), CSS-in-JS , CSS .





CSS, , .



, Numl . , <nu-block border> :



nu-block[border] {
    border: var(--nu-border-width) solid var(--nu-border-color);
}


, .



place. , .



<nu-card>
    <nu-el place="outside-top">Float element</nu-el>
</nu-card>


REPL



grid/flex-, float-, fixed sticky. CSS .



. , transform :



<nu-card move="2rem 2rem" scale="2">
    Card
</nu-card>


REPL



, , :



<nu-block width="10x"></nu-block>


REPL



x — gap.



gap'. Flexbox, :



<nu-flex gap="2x 1x" flow="row wrap">
    <nu-block>Item 1</nu-block>
    <nu-block>Item 2</nu-block>
    <nu-block>Item 3</nu-block>
</nu-flex>


REPL



Storybook.



. API . - Numl , . , Numl .



?



, , . , — . CSS , . , 4 , , , , . : .



, . , , , . .



Numl. - <nu-attrs>, -. , . , :



<nu-pane>
    <nu-attrs for="btn" color="special"></nu-attrs>
    <nu-btn>Button 1</nu-btn>
    <nu-btn>Button 2</nu-btn>
</nu-pane>


REPL



, color="special". , ( !) <nu-attrs>, . <nu-attrs> , , . , .



- , , , . , ( ).



<nu-attrs> .





. , - , , . ( 0 359 HSL) Custom Properties , .



. (, ), , .





-. Sellerscale



, :



  • . ( WCAG Contrast Ratio).
  • , , .
  • .
  • API .
  • , .
  • , (, )


, . , . : tenphi.me ( ) Storybook. CodePen Numl.





numl.design









Storybook



, , hue(), , , Numl HSC (, , ). .





. Numl. tenphi.me



Numl -, .





, , Numl. ...



( )



. , . ( ) : breakpoint', , | ( ), - . breakpoint' , :



<nu-root responsive="60rem|40rem">
    ...
</nu-root>


(, ). - . , |:



<nu-root responsive="60rem|40rem">
    <nu-grid columns="repeat(4, 1fr)|1fr 1fr|1fr">
        ...
    </nu-grid>
</nu-root>


REPL



. , . .



, . , , .





Sellerscale





, , . , , ( ), .



:



<nu-card shadow="0 :hover[1]">
    Content
</nu-card>


REPL



, , , .



, :



<nu-card>
    <nu-block color="^ text :hover[special]">Content</nu-block>
</nu-card>


REPL



. , :



nu-card[color="^:hover[special]"]:hover {
    color: var(--nu-spcial-color);
}
nu-card[color="^:hover[special]"]:not(:hover) {
    color: var(--nu-text-color);
}


. ? Numl . , ( text). CSS , , ! , , , .



is-. :



<nu-btn is-loading>
    <nu-el show="^ y :loading[n]">Submit</nu-el>
    <nu-icon name="loader" show="^ n :loading[y]"></nu-icon>
</nu-btn>


REPL





, , CSS :



  • , , .
  • " ", .
  • .
  • . , , hover. , , , hover touch-. ( Numl, API).
  • Media Queries.
  • Numl . runtime , , , getComputedStyle(). .
  • . , . .


, , . :)



, , . : .



.



, ? , HTML, <button> .



Numl, . . Numl Behaviors. . , nx- .



<nu-el nx-action>Button</nu-el>


REPL — nu-el.



, nu-btn . Numl 35-. . , , , Markdown Numl!





Numl Storybook: Markdown->Numl





. , , , . ( !)



- , - .



Numl ARIA, .



. . , ID, . , ID button-23.



Numl . ID , . , . , ID, ID, Numl ID. , , .



<nu-region labelledby="label">
    <nu-block id="label"></nu-block>
</nu-region>


REPL



HTML, , .



Numl aria- . , , , ( aria-), .



:



<nu-btn label="Turn on lights">
    <nu-icon name="sun"></nu-icon>
</nu-btn>


. , .



, Numl ARIA , .





Numl - . , CSS JS "", . , , :



  • . Numl 40, , , . , , , , Numl - JS . .
  • . Numl , , , . , , UX .
  • SSR. Numl SSR , . . SEO , prerender.io.
  • . Numl , Custom Elements, Custom Properties CSS Grid. Numl Edge 15+ , ( ).
  • Numl - , JS-. , . .
  • Numl - , . .


, Numl , , :



  • . , "-", , .
  • DX, -. HTML, . (// / )
  • " " , .
  • . " CSS". .
  • CSS- ( TailwindCSS) , .
  • , .
  • - , .
  • ;)


Numl , . , , .







PRE-BETA (v0.11). , , experimental v1 (, ). 2020.



:



  • 1100+
  • 200+ npm
  • ~1300
  • 85 GitHub (, , !)


Numl, , , , . ( !) .



! . :





Numl:





,



REPL, Numl.



, , , JS CSS:





More articles:


All Articles