yun-ui-kit

Simple UI kit for React

Usage no npm install needed!

<script type="module">
  import yunUiKit from 'https://cdn.skypack.dev/yun-ui-kit';
</script>

README

Yun UI Kit

This library favors:

  • only supporting "all-green" browsers
    over messy code for backwards compatability

  • functional implementations using the ramdajs library
    over imparative code

  • minimal implementations for components supporting the most common use cases
    over an ocean of component properties

  • composition through render callbacks
    over properties to tell components how to render themselves

# NO
AmazingComponent {showBullets: true, height: 10, propertyToUse:'name'}

# YES
AmazingComponent
  renderItem: (item) ->
    div {style: {height:10}},
      span {}, \'*\'
      span {}, item.name


# NOTE: react-hot-loader does not support render callbacks yet.
# Because of this a workaround approach is used instead:
MyComponent = React.createClass
  render: ->
    {style, item} = @props
    div {style},
      span {}, \'*\'
      span {}, item.name

AmazingComponent
  itemComponent: MyComponent
  itemProps: {style: {height:10}}

Inline styles

Also, right now this library is trying out inline styles. So for example, instead of specifying what children should look like:

.popup > ul { ... }
.content-box ul { ... }
.panel .list { ... }

...which is hard to override later. Inline styles gives a less cascading, more modular way of working. If this is the best solution or if something like css-modules will win is left to see though :)

TODO

  • Components to try

  • Topbar like inbox

  • input fields in topbar (like inbox)

  • Card

  • switch port from 300 which might be coliding causing hot reloading to fail