7 ms·

Luda: A lightweight and responsive UI framework for modern web development

23 points by oatw 7y ago

nanis 7y ago
I cannot unsee this. My eyes are going to hurt for a while from the moving background.
- oatw 7y ago
  Well~ Sorry for that. Maybe the background will be removed in the future. But personally, I like to keep it for a while.
  - sk0g 7y ago
    At least make it slower though. Nothing against moving background, but this is a bit extreme.
    - oatw 7y ago
      Thanks for your kindly suggestion! I've changed the background.
  - cdaringe 7y ago
    It's lovely, but distracting.
    - oatw 7y ago
      Yes, you're right. Thanks.
coffeefox 7y ago
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 7y ago
  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!
tqkxzugoaupvwqr 7y ago
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 7y ago
  Sounds great! Thanks for the suggestion! I'll solve this later.
lenkite 7y ago
Why is text so faint and small ?
- zichy 7y ago
  Raleway is such a poor typeface choice. They even forgot to import the italic styles from Google.
  - oatw 7y ago
    I think I made a mistake - taking personal feelings over user experiences. I'll consider using the Open Sans font for body texts.
    - zichy 7y ago
      Thanks! Besides, please consider to make headlines bold again. That would help a lot with content hierarchy.
      - oatw 7y ago
        Got it! I'll handle this later. I'm going to sleep now. Good night!
    - knubie 7y ago
      FWIW I think the font choice is perfectly fine.
      - oatw 7y ago
        Thanks! I'm glad you like the feeling of the font. But everybody has his own tastes. I need make the decision after some consideration.
- oatw 7y ago
  Luda uses native font stacks by default, and the default font size of body texts is 14px(can be changed easily by setting a sass variable). For the official site, I used the Raleway font. I know Raleway is a font designed mainly for leading texts, but I really like its feeling.
zichy 7y ago
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/#placeholder-text https://www.w3.org/WAI/tutorials/forms/instructions/#placeho...
- memco 7y ago
  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 7y ago
    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!
ndury 7y ago
Why did you feel the need to create another UI framework?
- oatw 7y ago
  Hello ndury! I'm writting an atricle on this topic, I'll paste the link here after finished.
- oatw 7y ago
  https://dev.to/oatw/why-and-how-i-built-my-own-ui-framework-inspite-of-so-many-great-ones-9g6 https://dev.to/oatw/why-and-how-i-built-my-own-ui-framework-...
aitchnyu 7y ago
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 7y ago
  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!
barbarbar 7y ago
It looks awesome and very complete. Looking forward to example projects.
- oatw 7y ago
  It's still a young project. Examples will be added, but I'm not sure about the time. Thanks very much!

23 points by oatw 7y ago

nanis 7y ago

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

oatw 7y ago
Well~ Sorry for that. Maybe the background will be removed in the future. But personally, I like to keep it for a while.
- sk0g 7y ago
  At least make it slower though. Nothing against moving background, but this is a bit extreme.
  - oatw 7y ago
    Thanks for your kindly suggestion! I've changed the background.
- cdaringe 7y ago
  It's lovely, but distracting.
  - oatw 7y ago
    Yes, you're right. Thanks.

coffeefox 7y ago

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 7y ago
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!

tqkxzugoaupvwqr 7y ago

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 7y ago
Sounds great! Thanks for the suggestion! I'll solve this later.

lenkite 7y ago

Why is text so faint and small ?

zichy 7y ago
Raleway is such a poor typeface choice. They even forgot to import the italic styles from Google.
- oatw 7y ago
  I think I made a mistake - taking personal feelings over user experiences. I'll consider using the Open Sans font for body texts.
  - zichy 7y ago
    Thanks! Besides, please consider to make headlines bold again. That would help a lot with content hierarchy.
    - oatw 7y ago
      Got it! I'll handle this later. I'm going to sleep now. Good night!
  - knubie 7y ago
    FWIW I think the font choice is perfectly fine.
    - oatw 7y ago
      Thanks! I'm glad you like the feeling of the font. But everybody has his own tastes. I need make the decision after some consideration.
oatw 7y ago
Luda uses native font stacks by default, and the default font size of body texts is 14px(can be changed easily by setting a sass variable). For the official site, I used the Raleway font. I know Raleway is a font designed mainly for leading texts, but I really like its feeling.

zichy 7y ago

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/#placeholder-text https://www.w3.org/WAI/tutorials/forms/instructions/#placeho...

memco 7y ago
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 7y ago
  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!

ndury 7y ago

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

oatw 7y ago
Hello ndury! I'm writting an atricle on this topic, I'll paste the link here after finished.
oatw 7y ago
https://dev.to/oatw/why-and-how-i-built-my-own-ui-framework-inspite-of-so-many-great-ones-9g6 https://dev.to/oatw/why-and-how-i-built-my-own-ui-framework-...

aitchnyu 7y ago

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 7y ago
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!

barbarbar 7y ago

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

oatw 7y ago
It's still a young project. Examples will be added, but I'm not sure about the time. Thanks very much!