resource-vault

KO | EN

gitlite — search

#python #hacktoberfest #ai #typescript #rust #deep-learning #linux #macos #nodejs #java #kubernetes #pytorch #ios #openai

(★ 13)

My secret vault of Design & Frontend/UI resources!

resource-vault 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# My secret vault of Design & Frontend/UI resources!
These are the things I have in my bookmarks and use everyday. I hope you'll find use for them aswell :)

## **Life-easier-makers**
* [Tailwind CSS](https://tailwindcss.com/) - An absolute must know if you like creating more advanced UI/UX. It's sort of a CSS library in a sense, but it's also not. Just get into it, you'll see.
* Some cool Tailwind component libraries:
  * [tailblocks](https://mertjf.github.io/tailblocks/) - Pre-made layout components for tailwind
  * [DaisyUI](https://daisyui.com/) - Neat, good looking library for tailwind. Doesn't hold up with *everything* you want to do, but it's pretty nice to work with overall.
  * [TailwindUI](https://tailwindui.com/components/) - Component library by the makers of Tailwind. ABsolutely beautiful, but costs a whopping $150.
  * [Flowbite](https://flowbite.com/) - ALSO not free, but ALSO very good-looking
  * [Myna UI](https://mynaui.com/) - Finally, something that looks good AND is free?
  * [Kutty](https://kutty.netlify.app/components/) - Also free, but not my personal favorite
  * [WickedBlocks](https://wickedblocks.dev/#elements) - Neat free collection of tailwind "Blocks"

## General
* [PNGPixel](https://png-pixel.com/) - Convert Images to base64
* [ColorsAndFonts](https://www.colorsandfonts.com/) - A collection of colors, fonts and more
* [IconScout](https://iconscout.com/) - Icons, Illustrations and stock photos in one place
* [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/macos/overview/themes/) - Don't question it, it's apple.

## Javascript
* [moveable](https://github.com/daybrush/moveable) - A library for movable/resizable etc. HTML Elements
* [Code snippet how to let users paste from clipboard](https://stackoverflow.com/questions/6333814/how-does-the-paste-image-from-clipboard-functionality-work-in-gmail-and-google-c)
* [keycode.info](https://keycode.info/) - Quickly get keyboard input codes
* [HTML DOM.](https://htmldom.dev/) - Super useful snippets to modify DOM elements with Vanilla JS

### Frameworks that don't suck
* [SvelteKit](https://kit.svelte.dev/)

### Templating engines for express.js
* [Pug](https://pugjs.org/api/getting-started.html)
* [ejs](https://ejs.co)
* [express-handlebars](https://www.npmjs.com/package/express-handlebars)

## Layout
* [csslayout](https://csslayout.io/patterns/) - Pre-made CSS elements using flex
* [CSS Flexbox generator](https://flexgenerator.com/) - Great for grids and item streams
* [CSS Grid generator](https://cssgrid-generator.netlify.app/) - Great for layouts that uses some fixed values and some not - e.g. layout with sidebar & footer etc.

## Icons
* [Iconoir](https://iconoir.com/) - Over 2000 Icons beautiful rounded Icons in 3 styles
* [MyIcons](https://myicons.co) - Probably my favorite Icons. 80$ for the whole 5200+ Icon Pack
* [Iconify](https://iconify.design/) - Tiny, universal icon loader (You can also discover a lot of cool icons there)
* [Iconly Essential](https://ui8.net/piqodesign/products/iconly-essential-icons) - 500 (free) essential Icons
* [Design Essentials 2](https://ui8.net/aps/products/design-essentials-2) - over 400 great Icons for 16$
* [Carbon Icons](https://www.carbondesignsystem.com/guidelines/icons/library/)
* [Remix Icons](http://remixicon.com/)
* [Ikonate](https://ikonate.com/)
* [Icons8 Animated Icons](https://icons8.com/animated-icons)
* [System UIcons](https://systemuicons.com/)
* [Unicons Line](https://iconscout.com/unicons/explore/line)
* [Box Icons](https://boxicons.com/)
* [MaterialDesignIcons](https://materialdesignicons.com) - A collection of Google's Material icons plus hundreds of community-made ones
* [MaterialDesignIcons Light](https://creativemarket.com/templarian/348441-Material-Design-Icons-Light)
* [IonIcons](https://ionicons.com/)
* [Tabler Icons](https://tablericons.com/)
* [Feather Icons](https://feathericons.com/)
* [Simple Icons](https://simpleicons.org/)
* [Icons8](https://icons8.com)
* [Zwicon](https://www.zwicon.com)
* [Simple Icons](https://simpleicons.org) - All the brand logos
* [Octicons](https://octicons-primer.vercel.app/octicons)

## Illustrations
* [3d Fluency by Icons8](https://icons8.com/illustrations/style--3d-fluency) - Some beautifully designed, Windows 11-style illustrations
* [Isometric love](https://www.isometriclove.com/) - Smooth isometric 3d objects
* [Isometric.online](https://isometric.online/) - Modern isometric 3d illustrations
* [Lottie](https://lottiefiles.com/popular?sort=all-time) - Animated Icons, Illustrations ans Micro-Interactions
* [IRA Design](https://iradesign.io) - Customizable, generatied gradient illustrations
* [ManyPixels](https://www.manypixels.co/gallery/) - More CUstomizable Illustrations in various different styles

## Color Themes
* [HalfMoon Palette](https://www.gethalfmoon.com/docs/color-utilities/)

## Gradients
* [MeshGradients](https://www.ls.graphics/meshgradients)
* [Grabients](https://www.grabient.com/)
* [GradientMagic](https://www.gradientmagic.com/) - Background patterns with css gradients
* [WebGradients](https://webgradients.com/)
* [CSSGradient](https://cssgradient.io/) - CSS Gradient Generator
* [UIGradient](https://uigradients.com/)

## SVG
* [Yoksel URL-Encoder](https://yoksel.github.io/url-encoder/) - Converts SVGs into In-line HTML SVGs
* [SVGBackgrounds](https://www.svgbackgrounds.com/) - Tiny customizable background patterns
* [HeroIcons Patterns](https://heropatterns.com/) - SVG background patterns
* [GetWaves](https://getwaves.io) - Customizable SVG Waves
* [BlobMaker](https://www.blobmaker.app) - The same tool, but for blob shapes.
* [Haikei.app](https://haikei.app) - A collection of tools to generate interesting and fun shapes and effects, including the two above
* [SVGator](https://www.svgator.com) - (kind of) free tool that helps you animate SVGs
* [Keyframes](https://keyframes.app/) - Same as above, but actually free

## Images
* [Dante Metaphor on BeHance](https://www.behance.net/dantemetaphor) - Creates futuristic, modern and metall-ish wallpapers and logos
* [Pexels](https://pexels.com) - Royalty Free high quality stock photos
* [Unsplash](https://unsplash.com) - Free HD stock photos
* [Icons8 Upscaler](https://icons8.com/upscaler) - AI-Powered image upscaler
* [Transparenttextures](https://www.transparenttextures.com) - Great textures for use with background blending etc.

## UI Kits
* [UIStore Design](https://www.uistore.design)

## UI Sounds
* [SoundsUIGood](http://soundsuigood.com/) - Rings, clicks, chimes & more because why not spice it up a bit (7$)

## Fonts
* [Google Fonts](https://fonts.google.com/)
* [Rostype](http://rostype.com) - Custom font designers with a few small but nice freebies
* [Stefano Giliberti](https://www.brumale.xyz/) - A talented font designer with some freebies
* [FontFabric](https://www.fontfabric.com/) - Font designers with great free fonts and good paid offers
* <details>
 <summary>My personal favorite fonts</summary>
 <h2>Header Fonts</h2>
 <ul>
 <li>
 <details>
 <summary>Helvetica 83 Wide</summary>
 <img src="fonts/helvetica.png">
 <a href="https://www.fonts.com/font/linotype/neue-helvetica/83-extended-heavy">Buy</a> 
 </details>
 </li>
 <li>
 <details>
 <summary>Do Hyeon</summary>
 <img src="fonts/hyeon.png">
 <a href="https://fonts.google.com/specimen/Do+Hyeon">Download</a> 
 </details>
 </li>
 <li>
 <details>
 <summary>URW Geometric</summary>
 <img src="fonts/urw.png">
 <a href="https://www.myfonts.com/fonts/urw/geometric/">Buy</a> 
 </details>
 </li>
 </ul>
 <h2>Text Block Fonts</h2>
 <ul>
 <li>
 <details>
 <summary>San Francisco Display</summary>
 <img src="fonts/sanfrancisco.png">
 <a href="https://developer.apple.com/fonts/">Download</a> 
 </details>
 </li>
 <li>
 <details>
 <summary>Sequel Sans</summary>
 <img src="fonts/sequel.png">
 <a href="https://www.myfonts.com/fonts/ogj-typedesign/sequel-sans/">Buy</a> 
 </details>
 </li>
 <li>
 <details>
 <summary>Titillium Web</summary>
 <img src="fonts/titillium.png">
 <a href="https://fonts.google.com/specimen/Titillium+Web">Download</a> 
 </details>
 </li>
 <li>
 <details>
 <summary>Poppins</summary>
 <img src="fonts/poppins.png">
 <a href="https://fonts.google.com/specimen/Poppins">Download</a> 
 </details>
 </li>
 </ul>
 <h2>Serif Fonts (Goes best with Headings)</h2>
 <ul>
 <li>
 <details>
 <summary>New York</summary>
 <img src="fonts/newyork.png">
 <a href="https://developer.apple.com/fonts/">Download</a> 
 </details>
 </li>
 <li>
 <details>
 <summary>Sparkling Moscow</summary>
 <img src="fonts/moscow.png">
 <a href="https://creativemarket.com/sensatype/4422537-Sparkling-Moscow-Font-Duo">Buy</a> 
 </details>
 </li>
 <li>
 <details>
 <summary>Trajan Pro 3</summary>
 <img src="fonts/trajan.png">
 <a href="https://www.azfonts.de/load_font/trajan-pro-3.html">Download</a> 
 </details>
 </li>
 <li>
 <details>
 <summary>Winchester</summary>
 <img src="fonts/winchester.png">
 <a href="https://www.dafont.com/winchester-2.font">Download</a> 
 </details>
 </li>
 </ul>
 </details> 
* Other great fonts
 * [Alegreya](https://fonts.google.com/specimen/Alegreya)
 * [Rubik](https://fonts.google.com/specimen/Rubik)

resource-vault

resource-vault 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

resource-vault

resource-vault 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README