Clever Geek Handbook

Numl-Webの代替マークアップとスタイル言語

こんにちは！私の名前はAndreyです。私は11年以上プロのWebインターフェイスを開発しており、昨年はWebのマークアップおよびスタイル言語と呼ばれるNumlプロジェクトを開発しています。この記事では、多くのCSS機能を克服し、Webプロジェクトのレイアウトを簡略化するために、スタイルのニーズをすべて満たすだけでなく、JSコードの量を減らしてアクセシビリティを改善するための言語全体を作成する方法を示します。





まず、Numlについて簡単に説明し、それが開発者にとってどのように興味深いかを説明します。



Numlは、CSSフレームワーク、コンポジションなしのJSフレームワーク、およびデザインシステムの機能を組み合わせたマークアップ言語であり、それぞれがカスタマイズ用の広範なプロパティセットを持つ一連の事前構築された要素を提供します。言語をネイティブに基づいてカスタム要素のブラウザAPI Webコンポーネントの仕様から、とのような人気のJSフレームワークと互換性がありヴュー、スヴェルト、角度、およびリアクト。 Numlの際立った（そして私は "ユニーク"とも言える）機能は、実行時にインターフェイスのすべてのスタイルを生成することですCSSを最大限に活用し、要素のスタイリングとカスタマイズで優れた柔軟性を実現します。この記事は、それがどのようにして起こったのか、そしてなぜこのアプローチが生きる権利に値するのかという疑問に対する答えです。



先週の7月4日、プロジェクトはちょうど1年前に変わり、コンセプトの実証段階に長い間合格しました。大規模なプロジェクトのセラースケールとセラースケールのブラウザー拡張機能が記述されています。また、Numlを使用して、独自のランディングページやStorybookなど、さらにいくつかのサイトが作成されています。リンクの完全なセットは最後にあります。





Sellerscaleダッシュボード。スタック：VueJS、Numl





セラースケール拡張。スタック：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