<100-days-ui/>

Monthly updates in One Side Project Challenge on Medium, more inspiring projects.

Turn @npaulflavius's 100 Days UI design into reusable web components (React)!

Developed by @shuding with React and Less, open sourced with the MIT license.

Tech details

Those components are all created with React, ES6 and Less. I strongly recommend to use webpack to bundle your project.

And the demo (including webpack config, babel config, package.json and jshint config) will be updated in the build-sap branch (🚧).

In the meantime, I will write about all I have learned from thinking about and deconstructing those UI designs, developing these code, any kinds of insights. Please feel free to contact me or disscuss on the issue page.

BTW, the gh-pages branch (preview page) is built with react-router.

Why 100-days-ui? What problem do you solve? How can you push it further?

Improving any skill simply takes time and practice, and you can lengthen the former by increasing the latter.

Jake Rocheleau

The <100-days-ui/> project will be the kind of experimental project for practicing. I'd like to try out some layout/animation design concepts with React in this project (+ react-motion, I love it!).

I've been thinking about dynamic layouts for some time. But neither layout system nor layout transition is well defined, we have grids, flexboxes and components, some are blocked and some are inlined. We have fullpage background images and float figures. Sometimes we need to make all those stuff responsive, and sometimes parallax scrolling.

It's not about implementing all these styles. It's about making things together. And practicing is the key.