
Luda: A lightweight and responsive UI framework for modern web development - oatw
https://oatw.github.io/luda
======
zichy
Whenever I stumble upon yet another UI/CSS framework, I always check the form
elements first. Here we go.[1]

* _Every_ input needs a <label>.

* Use the `for` attribute to connect labels and inputs.

* Placeholders are not a replacement for labels. You don’t need placeholders just for the sake of it.[2]

* Do not build custom form elements if it can be done without them. There is no need for the dropdown, just use <select>.

* Do use <fieldset> and <legend> to group multiple checkbox/radio inputs.

* Error texts should be connected to the particular input via `aria-describedby`.

* Do use the `required` attribute if form fields are mandatory.

[1]:
[https://oatw.github.io/luda/0.1.x/elements/form](https://oatw.github.io/luda/0.1.x/elements/form),
[https://oatw.github.io/luda/0.1.x/patterns/form-
group](https://oatw.github.io/luda/0.1.x/patterns/form-group)

[2]:
[https://www.w3.org/WAI/tutorials/forms/instructions/#placeho...](https://www.w3.org/WAI/tutorials/forms/instructions/#placeholder-
text)

~~~
memco
To add to this:

\- check the contrast accessibility: it seems very poor for read-only fields
due to the opacity. Even the default seems low for body text.

I think there’s great documentation of customization, but I had a few
questions related to design decision:

Why data-readonly and not use readobly and other browser native html5
attributes like validation?

Why flexbox and not grid? If you’re only targeting latest browsers: this could
provide some greater power.

Another thing I noticed is that FF is noted as not supporting CSS scrollbsrs,
but it is coming: will Luda be updated when it’s available?

~~~
oatw
Hello memco!

Thanks for the good questions!

1\. The `data-readonly` attribute behaves different from the native readonly
attribute, developers may use the native readonly attribute in their own
customized components. I don't want developers to get stuck in such
situations. That's why the native readonly attribute is not overridden in
Luda.

About native HTML validation: Native validation popovers can not be easily
customized in all browsers. Maybe some developers still want to validate forms
in JS instead of the native HTML validation. It's a choice to developers how
to validate forms, Luda does't limit the ways.

2\. CSS grid is an awosome feature, I'm sure it will be implemented in future
versions. But before version 1.0.0, making Luda stable is the main target.

3\. Luda aims to be a modern framework, so any new features will be considered
seriously, including CSS scrollbars in Firefox.

At last, the styles of the form components may be changed due to some
problems, not only the contrast accessibility.

I'm very happy you look into Luda for details, please keep an eye on future
versions if you're interested. Your suggestions are import to me. Thanks!

------
nanis
I cannot unsee this. My eyes are going to hurt for a while from the moving
background.

~~~
oatw
Well~ Sorry for that. Maybe the background will be removed in the future. But
personally, I like to keep it for a while.

~~~
sk0g
At least make it slower though. Nothing against moving background, but this is
a bit extreme.

~~~
oatw
Thanks for your kindly suggestion! I've changed the background.

------
lenkite
Why is text so faint and small ?

~~~
zichy
Raleway is such a poor typeface choice. They even forgot to import the italic
styles from Google.

~~~
oatw
I think I made a mistake - taking personal feelings over user experiences.

I'll consider using the Open Sans font for body texts.

~~~
zichy
Thanks! Besides, please consider to make headlines bold again. That would help
a lot with content hierarchy.

~~~
oatw
Got it! I'll handle this later.

I'm going to sleep now.

Good night!

------
aitchnyu
Its painful to read on my FHD Dell. Constrast is poor with white on red and
grey on dark gray. Most frameworks apart from Bootstrap and Material are
unreadable on older screens and people still use 768p screens that dont show
in outdoor light.

~~~
oatw
Yes, indeed. Maybe that's one of the reasons why Bootstrap is the most popular
UI framework in the world.

But not all the UI frameworks target nomatter new devices or old devices. It
depends on the authors' choices.

Enhancing the typo accesibility and contrast are already proposed in others'
comments, I think it's a problem to solve.

Thanks for your comment!

------
tqkxzugoaupvwqr
On mobile I have to scroll up and open the hamburger menu to advance to the
next page. Prev/Next links at the bottom of each doc page would be great.

~~~
oatw
Sounds great! Thanks for the suggestion! I'll solve this later.

------
coffeefox
Looks sharp and clean. Are there any projects already using Luda, that anyone
would like to share. So we can see it in action?

~~~
oatw
Hello coffeefox!

Luda has just been released for 2 days. Before this release, I used it in some
internal projects of the company I'm working for. I'm sorry for unable to
share these projects currently.

Personally, I'm using it to build my blog with Rails, the blog will come out
soon!

For Luda, there's still a long way to go.

Thanks for your comment! Have a good day!

------
barbarbar
It looks awesome and very complete. Looking forward to example projects.

~~~
oatw
It's still a young project.

Examples will be added, but I'm not sure about the time.

Thanks very much!

------
ndury
Why did you feel the need to create another UI framework?

~~~
oatw
[https://dev.to/oatw/why-and-how-i-built-my-own-ui-
framework-...](https://dev.to/oatw/why-and-how-i-built-my-own-ui-framework-
inspite-of-so-many-great-ones-9g6)

