3 ms·

Show HN: New 6kb design system called M- is like HTML6

12 points by jfbrennan 6y ago

kkaske 6y ago
Constructive criticism: Trying to read the code examples on a phone in portrait mode is hard because the marketing phrases at the top sometimes cause the text to jump up or down a line.
- jfbrennan 6y ago
  Fixed it! Thanks
mmmateo 6y ago
Love the copy on the landing page & the framework agnosticism. Definitely trying this soon.
- jfbrennan 6y ago
  haha, thanks. When you get a chance to try it, please feel free to share issues/feedback: https://github.com/jfbrennan/m- https://github.com/jfbrennan/m-
XCSme 6y ago
I am a bit confused about what this is. Looking at the examples I see that it tries to be an UI lbrary, but the demo elements have confusing UI/UX and no accesability features (buttons don't even seem to have hover or active states, let alone focus and tab index).
- jfbrennan 6y ago
  Thanks for the feedback. M- is a tiny design system compatible with virtually any web project. This differs from say Bootstrap or Material because those are not based on standards and come with dependencies that create compatibility issues, especially for larger organizations. and yeah, the visual design is more basic (I'm not a visual designer), but most people will theme it to match their brand's design language anyway. Developer experience, project compatibility, and performance are the main focus. Visual perfection will come
  - XCSme 6y ago
    Why would I use this over plain HTML/CSS? I don't understand exactly what it adds on top, if you have to write your own styles. Does it use web components?
    - jfbrennan 6y ago
      Not full-blown wc, but custom HTML tags where possible (which is totally valid, very few devs realize this) and Custom Elements when js is required. M- adds a bunch of elements on top of HTML (20 last time I counted). The design philosophy is that the API should match or feel like native HTML, e.g. <m-loader loading>, <m-alert type="warn" autodismiss>, <m-row> with <m-col span="6"> nested And you def don't have to write your own styles. this example is a recreation of a Bootstrap demo page using M-: http://m-docs.org/examples/pricing http://m-docs.org/examples/pricing. Looks good for 6kb and like 1 line of custom CSS imo

12 points by jfbrennan 6y ago

Constructive criticism: Trying to read the code examples on a phone in portrait mode is hard because the marketing phrases at the top sometimes cause the text to jump up or down a line.

jfbrennan 6y ago
Fixed it! Thanks

mmmateo 6y ago

Love the copy on the landing page & the framework agnosticism. Definitely trying this soon.

jfbrennan 6y ago
haha, thanks. When you get a chance to try it, please feel free to share issues/feedback: https://github.com/jfbrennan/m- https://github.com/jfbrennan/m-

XCSme 6y ago

I am a bit confused about what this is. Looking at the examples I see that it tries to be an UI lbrary, but the demo elements have confusing UI/UX and no accesability features (buttons don't even seem to have hover or active states, let alone focus and tab index).

jfbrennan 6y ago
Thanks for the feedback. M- is a tiny design system compatible with virtually any web project. This differs from say Bootstrap or Material because those are not based on standards and come with dependencies that create compatibility issues, especially for larger organizations. and yeah, the visual design is more basic (I'm not a visual designer), but most people will theme it to match their brand's design language anyway. Developer experience, project compatibility, and performance are the main focus. Visual perfection will come
- XCSme 6y ago
  Why would I use this over plain HTML/CSS? I don't understand exactly what it adds on top, if you have to write your own styles. Does it use web components?
  - jfbrennan 6y ago
    Not full-blown wc, but custom HTML tags where possible (which is totally valid, very few devs realize this) and Custom Elements when js is required. M- adds a bunch of elements on top of HTML (20 last time I counted). The design philosophy is that the API should match or feel like native HTML, e.g. <m-loader loading>, <m-alert type="warn" autodismiss>, <m-row> with <m-col span="6"> nested And you def don't have to write your own styles. this example is a recreation of a Bootstrap demo page using M-: http://m-docs.org/examples/pricing http://m-docs.org/examples/pricing. Looks good for 6kb and like 1 line of custom CSS imo