KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #developer-tools #ai-agent #claude-code #codex #typescript #ai-agents #deepseek-harness #mcp #cli #rust

100-days-ui

★ 40 Open GitHub ↗

Turn @npaulflavius's 100 Days UI design into React components!

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# <100-days-ui/>

**Monthly updates in [One Side Project Challenge](https://medium.com/one-side-project-challenge) on Medium**, [more inspiring projects](https://medium.com/one-side-project-challenge/50-inspiring-side-projects-to-follow-in-2016-69f3e5e57048).

Turn [@npaulflavius](https://twitter.com/npaulflavius)'s [100 Days UI design](http://www.100daysui.com/) into reusable web components (React)!

Developed by [@shuding](https://github.com/shuding) with React and Less, open sourced with the MIT license.

Preview: [shuding.github.io/100-days-ui](http://shuding.github.io/100-days-ui/).

### Tech details

Those components are all created with React, ES6 and Less. I strongly recommend to use [webpack](https://github.com/webpack/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](https://github.com/quietshu/100-days-ui/tree/build-sap) branch (:construction:).

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](https://github.com/rackt/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](https://github.com/chenglou/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.

## About

All design works (PSD) by [100daysui.com](http://www.100daysui.com/).

Special thanks to [@moyicat](https://medium.com/@moyicat) :D

100-days-ui

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README