outposthq / numl Goto Github PK

Currently we use :pressed state to identify state of the button (with role checkbox), tab or checkbox when it's actually checked.
We use :active state to identify state when mouse is down on the element.

These names are based on ARIA and CSS specification, but probably we can use more sane syntax:

:pressure - mouse is down on the element. (another possible names: pressed, press, push)
:checked - if element is in checked/selected/pressed state (according to ARIA spec).

Any thoughts?

Currently NuML initialize custom elements and generate CSS as soon as script is started (or init method is called). There is only one scenario where SSR works with NuML:

1. Client receive HTML
2. Client receive JS with App bundle.
3. Rehydration
4. NuML initialization

This scenario makes SSR kind of useless cause User will not get any styling.

Instead, we can split initialization of NuML into two parts and get the following scenario:

1. Client receive HTML and NuML synchronously
2. NuML generates all base CSS for elements and attributes presented in HTML
3. Client receive JS with App bundle
4. Rehydration
5. NuML initialize custom elements

Probably, this new approach will speed up current initialization without SSR and improve UX.

I forgot that grid-gap applies to flex layout in Firefox as gap property. So in Firefox any flex box have doubled gap. Simple fix.

Add form elements to provide data gathering, validation, and stuff.

Currently every new theme use parent ID to be generated. We can attach modifier attribute to the parent with specific params to reuse CSS if any theme with same config is declared elsewhere.

Example with pseudo theme id:

<nu-block nu-theme=" h-270-s-54-p-sd ">
  <nu-theme hue="270" saturation="54" pastel mod="soft dim"></nu-theme>
</nu-block>

nu-block[nu-theme*=" h-270-s-54-p-sdms "] {
  // theme styles
}

Theme system have to be changed and simplified. Current implementation doesn't meet contrast ratio WCAG requirements. It also requires to manually define basic themes and unable to adaptively change shadow intensity in complex cases.

New theme spec can solve all this problems.

In common scenarios the user only need to specify single brand color:

<nu-theme from="#1885d9"></nu-theme>

It would be enough in 95-99% cases because it will generate a set of themes for multiple purposes.

It would be awesome to add auto-typography feature to Numl powered by typograf.

Usage:

<nu-block nx-typograf>
  Some text with "quotes" and other tricky symbols like -
</nu-block>

It will read the current locale to apply changes.

It would be nice to have the ability to specify logical properties like:

<nu-block padding="1x inline"></nu-block>

or

<nu-block padding="1x start"></nu-block>

Behaviour can be configured via direction attribute:

<nu-block direction="ltr">...</nu-block>

1. Open the menu, try and type any letter, (say "N") to see the focus movement.
2. Add search navigation.

With nu-props use can customize built-in properties and declare your own:

• [indent] --nu-indent (default: .5rem) – Base indent (padding|gap).
• [border-width] --nu-border-width (default: 1px) – Base border width.
• [border-radius] --nu-border-radius (default: .5rem) – Base border radius.
• [animation-time] --nu-animation-time (default: 0.08s) – Base animation time.

Example of declaration:

<nu-props
  indent=".5"
  border-radius=".5"
  border-width="1px"
  animation-time="0.08s"
  your-custom-property="(100vw - 2rem)"></nu-props>

size attribute can work like this:

<nu-block size="h1"></nu-block>

nu-block[size="h1"] {
  font-size: var(--nu-h1-font-size);
  line-height: var(--nu-h1-line-height);
  font-weight: var(--nu-h1-font-weight);
}

Probably it would be more reasonably to rename size attribute to font in that case.

In future size attribute can be used in Logical Properties and Values spec for block and inline sizing.

By adding nu-attrs we introduced replacement for CSS classes in NUDE. With brand new Variable System we can simplify declarations with reusable variables.

<nu-block>
  <!-- declaration -->
  <nu-vars big-padding="3"></nu-vars>
  <!-- full usage syntax -->
  <nu-block padding="@big-padding"></nu-block>
  <!-- short usage syntax -->
  <nu-block padding="@big"></nu-block>
</nu-block>

Suffix -padding is optional 'cause NUDE can understand context (attribute name) and search for ${variableName}-${suffix} variable first. Usage of such variable in other attributes will require its full name.

This system can't use Custom Properties in implementation due to some limitations. So such variables can't be dynamic (responsive or depends on element state). But it still can be changed via attribute setting.

Purpose: To Run the Test, Close Old Issues, Update Patches, Merge PR, etc.
Solution: A GitHub bot for managing NUML repositories.

Looks like Simple Redis Cache isn't a runtime dependency of Numl. If so, it would be better to move under devDependencies

See https://github.com/tenphi/numl/blob/master/package.json#L17

Hm... my linter doesn't display an error in this place.

https://github.com/tenphi/numl/blob/9f5e0805fa82682242b693c20d1fb36ba8716355/src/index.js#L81

As ES module

Define default screens for adaptive responsive:

  'sm': '320px',
  (min-width: 320px)

  'md': '768px',
  (min-width: 768px)

  'lg': '1024px',
  (min-width: 1024px)

  'xl': '1337px',
  (min-width: 1337x)

  '2xl': '1440px',
  (min-width: 1440px)

  '3xl': '1570px',
  (min-width: 1570px)

For custom breakpoints Devs are free to have as few or as many screens as they want, naming them in whatever way they'd prefer for their project.

Purpose: To automate acknowledging contributors to our open source projects.
Solution: Add all-contributors-bot
App: https://github.com/apps/allcontributors
Repo: https://github.com/all-contributors
Doc: https://allcontributors.org/docs/en/bot/installation

Introduce Two New Default Colors for 'Error' and 'Success' in Theme.

Open link https://jsbin.com/neteqas/edit?html,output in Desktop Safari

not work tagged ( #btn:pressed[]) state

https://codepen.io/timeshift92/pen/BaaLQYY?editors=1010

Hi! Cool application. I would like to have support for older browsers, below IE11, where there is no support for Custom Properties and Custom Elements. What do you think about this?

Landing page are often required for small customers who need to work on all browsers. And making up the old fashioned way is a little boring)

<nu-el text="bolder"></nu-el>

• bolder - will increase font weight by 1 step.
• lighter - will decrease font weight by 1 step.

i'm use example

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

this code working for all body

Add support for sticky positioning.

Add a global context so that the contexts of all elements can be inherited from it.

Introduce One New Default Color for 'Warning' in Theme.

Currently to make responsive values inside state you should write something like:

<nu-block fill="bg :hover[special]|bg :hover[hover]"></nu-block>

It's more intuitive to write it like:

<nu-block fill="bg :hover[special|hover]"></nu-block>

It introduces a lot complications but I am sure they can be overpassed.

Discussion required:

Objective: To build a default rich reusable cross-platform ready component library for NUML to empower the users to spin and build the small, medium, or enterprise-level project in just a few hours.

It should be possible to add transitions by nude attribute names.

<nu-block
  transition="fill">
</nu-block>

Current parser differs from CommonMark spec. It would be nice to have our own NuMD spec to support the following features:

Images, Icons, Escaped characters, Headings.

It's still possible to use RegExp for better performance.

Context is a powerful feature of NUDE Elements. By migrating responsive and theme system to it it's possible to increase performance and simplify internal code base.

Example

<nu-checkbox id="ch1"  labelledby="prev-1" >
	 <nu-card hide="n #ch1:pressed[y]">IMAGE</nu-card>
</nu-checkbox>

Generates wrong selector [nu-id="ch"][nu-pressed] instead of [nu-id="ch1"][nu-pressed].

Expected Behavior

NUDE should respect IDs with numbers.

It could be handy to have a way to specify some variables to reuse them across the scope but current approach is inconvenient. We have much friendly variable mechanics in theme system where we can specify color and fill attributes with part name of custom properties. So we can use that experience to create a new system.

Possible declaration syntax:

<nu-var name="my-padding" value="2|1|.5"></nu-var>

Possible usage syntax:

<nu-block padding="@my-padding"></nu-block>

As far as I see @-syntax is the only compatible way to use variables.

The syntax of overflow style requires changes.

It accepts only a single value where real CSS overflow property can accept two. And it's really useful.

before:

<nu-block overflow="scroll-x"></nu-block>

after:

<nu-block overflow="auto no"></nu-block>

The new version will allow us to specify a value for each direction.

Overflow doesn't work for native scrollbars in the same container.

The proposed solution to fix it from @tenphi Create one more container. So, the first container will be overflow: hidden, and the second inside will have a scrollbar.

Introduce the Theme Builder with Default and Custom both.

1. Color (Mode: Light/Dark, Contrast: Auto, Low, High, )
2. Spacing
3. Typography (Fonts, Font Sizes, Font Weights, Letter Spacing/Tracking, Line Heights)
4. Breakpoints
5. Borders/Strokes (Border, Border Radius)
6. Base Gap
7. Transition
8. Icon (Size, Style, Stroke)

Looks like numl doesn't work on top of svelte. Is svelte a runtime dependency?
https://github.com/tenphi/numl/blob/master/package.json#L18

For example:

<nu-block
  transition="color .5s linear">
</nu-block>

Steps to reproduce:

1. Go to https://tenphi.me/
2. Tab trough the page
3. Try to reach all interactive elements

Is there a reason for messing with built-in links via ARIA?

<a href tabindex="-1" aria-hidden="true" role="none"></a>

Why tabindex=-1, why hidden or role=none, and why it’s empty or not labelled?

Also rewrite old <nu-radiogroup/> using Context System.

Proposed syntax:

<nu-block>
  <nu-animation name="rotation" duration="1s" easing="linear">
    <nu-stop transform="rotate(0deg)"></nu-stop>
    <nu-stop transform="rotate(360deg)"></nu-stop>
  </nu-animation>

  <nu-icon name="rotate" animation="rotation"></nu-icon>
</nu-block>

The main goal is to eliminate redundant percentage notation and replace it with more fluid duration alternative:

Main syntax:

<nu-stop duration=".5s" ...></nu-stop>

Part syntax:

<nu-stop duration="1p" ...></nu-stop>

Frame syntax:

<nu-stop duration="5fr" ...></nu-stop>

Exact stops will be calculated automatically.

Define default spacing:

--xxs: .25rem
--xs: .5rem
--sm: .75rem
--md: 1rem
--lg: 1.25rem
--xl: 1.5rem
--2xl: 2rem
--3xl: 3rem

For custom spacing, Devs are free to override the default spacing or define as many custom spacings as required on the fly.

Behavior: Scrolling Up, Down, Left, Right
Popup Placement Position should shift dynamically, Ex.:
place: 'outside-bottom left .5x 0'
place: 'outside-top left .5x 0'
place: 'outside-bottom right .5x 0'
place: 'outside-top right .5x 0'

System that allows to dynamically inject heavy logic into elements. It will significantly reduce base size of the library and will allow to add more and more awesome widgets and components.

We can detect syntax that requires calc usage. It will greatly simplify declarations. For example:

<nu-block width="100vw - 2br"></nu-block>

generated css:

nu-block[width="100vw - 2p"] {
  width: calc(100vw - (var(--nu-padding) * 2));
}

<nu-el size="bigger"></nu-el>

• bigger - bigger font size by 1 step.
• smaller - smaller font size by 1 step.