Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/c-ehrlich/nice-ui-components
Some nice UI components made from just HTML and CSS
https://github.com/c-ehrlich/nice-ui-components
Last synced: 15 days ago
JSON representation
Some nice UI components made from just HTML and CSS
- Host: GitHub
- URL: https://github.com/c-ehrlich/nice-ui-components
- Owner: c-ehrlich
- Created: 2022-06-03T16:10:16.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-06-27T13:47:18.000Z (over 2 years ago)
- Last Synced: 2024-10-03T12:30:37.456Z (about 1 month ago)
- Language: TypeScript
- Homepage: https://c-ehrlich.github.io/nice-ui-components/
- Size: 3.44 MB
- Stars: 41
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Nice UI Components
[Live Deployment](https://c-ehrlich.github.io/nice-ui-components/)
## What is this?
When I started making UIs I experienced what Ira Glass calls [The Gap](https://vimeo.com/85040589).
I had the same experience when I first started desiging clothes. Back then I followed [Yohji Yamomoto's thoughts on copying](https://www.facebook.com/businessoffashion/videos/yohji-yamamoto-on-copying/10153711730692428/), 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](https://www.npmjs.com/package/tabler-icons-react) 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](https://www.refactoringui.com/) by Adam Wathan and Steve Schoger. Some were found in other places. Some are combinations of two or more components that I liked.
## Setup
Install dependencies
```
yarn
```
Run the test server
```
yarn start
```
View the site (by default it will be at http://localhost:3000)
## Credits
[Amsterdam photo](https://unsplash.com/photos/3Ze88tZX-p0) by Nastya Dulhiier on Unsplash
[Apartment photo](https://unsplash.com/photos/4pYg5OUJUrk) by Augusto Lopes on Unsplash
Avatars:
[[1]](https://unsplash.com/photos/IF9TK5Uy-KI) [[2]](https://unsplash.com/photos/iEEBWgY_6lA) [[3]](https://unsplash.com/photos/K84vnnzxmTQ) [[4]](https://unsplash.com/photos/MTZTGvDsHFY) [[5]](https://unsplash.com/photos/kVg2DQTAK7c) [[6]](https://unsplash.com/photos/ExVlW9b648Q) [[7]](https://unsplash.com/photos/jKuch64WZ_o) [[8]](https://unsplash.com/photos/ocOW8-uiAjk)