When I started making UIs I experienced what Ira Glass calls The Gap.
I had the same experience when I first started desiging clothes. Back then I followed Yohji Yamomoto's thoughts on copying, and made replicas of his clothes. It was an arduous process of disassembling, measuring, rebuilding, and slowly understanding the systems of tailoring and construction that he uses. In examining how great clothes were made and creating replicas of them, I became a better designer.
Therefore I wanted to do the same for UI, by replicating some Nice UI Components that I come across.
So here is a series of UI components, handwritten in CSS. No UI libraries, except for Tabler Icons for icons. All of the components are responsive from desktop to 320px (iPhone 5/5S/SE).
Some of the components are from the book Refactoring UI by Adam Wathan and Steve Schoger. Some were found in other places. Some are combinations of two or more components that I liked.
Install dependencies
yarn
Run the test server
yarn start
View the site (by default it will be at http://localhost:3000)
Amsterdam photo by Nastya Dulhiier on Unsplash
Apartment photo by Augusto Lopes on Unsplash