Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/imarc/awesome

A list of links inspired by sindresorhus/awesome lists
https://github.com/imarc/awesome

List: awesome

Last synced: about 1 month ago
JSON representation

A list of links inspired by sindresorhus/awesome lists

Awesome Lists containing this project

README 

        
# Imarc Awesome



> Imarc's list of links inspired by [sindresorhus/awesome](https://github.com/sindresorhus/awesome) lists.



## Contents



- [Front End](#front-end)

  - [Animations](#animations)

  - [Collections](#collections)

  - [Colors](#colors)

  - [CSS Methodologies](#css-methodologies)

  - [Design Systems & Pattern Libraries](#design-systems--pattern-libraries)

  - [Favicons](#favicons)

  - [Icons](#icons)

  - [Shadows](#shadows)

  - [Shapes](#shapes)

  - [SVGs](#svgs)

  - [Vue](#vue)

- [Fun](#fun)



## Front End



### Animations



- [Animate.css](https://animate.style/) - collection of CSS animations.

- [cubic-bezier](https://cubic-bezier.com/) - generate and compare `cubic-bezier()` easing functions.



### Backgrounds



- [Patternify](http://www.patternify.com/) - generate background patterns as tiny PNGs.



### Collections



- [Omatsuri](https://omatsuri.app/) - a collection of generators.

- [Tiny Helpers](https://tiny-helpers.dev/) – a collection of 'single page' tools for all kinds of things.



### Colors



- [Colornames.org](https://colornames.org/) - Suggestions for names for colors given a hex.

- [Contrast Grid](https://contrast-grid.eightshapes.com/) – Input color values to see a matrix showing if they satisfy WCAG’s minimum contrast compliance.

- [Easy Gradient Generator Tool](https://learnui.design/tools/gradient-generator.html) - Better CSS gradients that [avoid the 'gray' tones](https://css-tricks.com/the-gray-dead-zone-of-gradients/) by using more stops.

- [Leonardo](https://leonardocolor.io/) - Adobe color palette generator focused on contrast ratios.

- [Name that Color](https://chir.ag/projects/name-that-color/) - Suggests a name for a color given a hex.

- [Scale — color scale generator](https://hihayk.github.io/scale/) – Input a color and generate shades/tints for a complete scale.

- [Sorted CSS Colors](https://enes.in/sorted-colors/) – Sorted, filterable list of the CSS named colors.



### CSS Methodologies

- [ABEM. A more useful adaptation of BEM.](https://css-tricks.com/abem-useful-adaptation-bem/) – Most popular article describing ABEM.

- [BEM – Block Element Modifier](http://getbem.com/) – Official BEM site.



### Design Systems & Pattern Libraries



- [Awesome Styleguides](https://github.com/streamich/awesome-styleguides) – A directory of style guides.

- [Carbon Design System](https://www.carbondesignsystem.com/) - IBM's design system.

- [Material Design 3](https://m3.material.io/) – Google's newest UI design system.



### Favicons

- [How to Favicon in 2021](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs) – Guide to modern favicons, including SVG favicons.



### Icons



- [CSS Icons](https://css.gg/) - icons available as pure CSS or SVGs.

- [Hola SVG Icons](https://holasvg.com/icons/) - customizable SVG icons.

- [Phosphor](https://phosphoricons.com/) - customizable PNG/SVG icon set with optional React/Vue components.

- [Tabler Icons](https://tablericons.com/) - Stroke-based SVG icon set.

- [The Noun Project](https://thenounproject.com/) - Vast SVG icon library, easily customizable via their UI.



### Performance

- [Bundlephobia](https://bundlephobia.com/) - look up the size of NPM packages.



### Placeholder Text



- [Bob Ross Lipsum](https://www.bobrosslipsum.com/) - Bob Ross flavored lorem ipsum.



### Shadows



- [Neumorphism](https://neumorphism.io/#940000) - generate Neumorphism-style, "Soft-UI" shadows.

- [Smooth Shadow](https://shadows.brumm.af/) - generate better shadows using multiple layers.



### Shapes

- [Clippy — CSS clip-path maker](https://bennettfeely.com/clippy/) – spin up some clip-path based on presets.



### SVGs

- [SVG Background Generators](https://fffuel.co/) – generators for creating svg noise, patterns, gradients, blobs, etc.



### Vue



#### Learning Vue

- [Laracasts: Learn vue 2: Step By Step](https://laracasts.com/series/learn-vue-2-step-by-step)

- [Vue Mastery](https://www.vuemastery.com/)



## Fun



- [Party Parrot as a Service](https://parrotify.github.io/) - quickly generator party parrots emojis for any need.



## Contribute



Contributions welcome! Read the [contribution guidelines](contributing.md) first.