Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/digitoimistodude/awesome-frontend

😎 Awesome list about all things in front end we use here at Dude
https://github.com/digitoimistodude/awesome-frontend

List: awesome-frontend

Last synced: about 1 month ago
JSON representation

😎 Awesome list about all things in front end we use here at Dude

Awesome Lists containing this project

README 

        


awesome







# Awesome frontend [![Awesome](https://user-images.githubusercontent.com/1534150/194293453-be2163cb-7351-4728-9766-847ae09c49cc.svg)](https://github.com/sindresorhus/awesome)

😎  Curated list of awesome Dude frontend related resources 😎



## CSS



### Grid tutorials



- [Learn CSS Grid](https://learncssgrid.com/): Jonathan Suh's free guide to learning CSS Grid

- [Flexbox.io](http://flexbox.io): A simple 20 video course that will help you master CSS Flexbox by Wes Bos

- [Flexbox Zombies](https://geddski.teachable.com/p/flexbox-zombies): Funny alternative way to learn flexbox

- [HTML Reference](http://htmlreference.io/): Features all elements and attributes of HTML

- [CSS Reference](http://cssreference.io/): Features all elements and attributes of CSS



### CSS Grid tools



- [Layoutit Grid](https://grid.layoutit.com/): CSS Grids layouts made easy



## SVG



### Open source SVG icon packs



- [Feather](https://feathericons.com/): Simply beautiful open source icons

- [CSS.gg](https://css.gg/): 700+ Pure CSS, SVG & Figma UI Icons

- [Iconoir](https://iconoir.com/): Iconoir is one of the biggest open source libraries with currently 914 SVG Icons.

- [Material Icons](https://fonts.google.com/icons): Material Icons are available in five styles and a range of downloadable sizes and densities.

- [Iconic](https://iconic.app/): Free "do wtf you want with" pixel-perfect icons

- [Icongram](https://icongr.am/): Serving you 10000+ icons on the fly.

- [iconmonstr](https://iconmonstr.com/): Free simple icons for your next project

- [SVG Repo](https://www.svgrepo.com/): Browse 300.000+ SVG Vectors and Icons

- [Orion](https://orioniconlibrary.com/all-icons): 8613 pro & free SVG icons for your Web, iOS, Android & design projects

- [Remix](https://remixicon.com/): Open source neutral style icon system

- [Hero icons](https://heroicons.dev/): A set of free MIT-licensed high-quality SVG icons for UI development

- [Ionicons](https://ionic.io/ionicons): Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere



### SVG illustrations



- [unDraw](https://undraw.co/illustrations): Open source illustrations for any idea

- [ManyPixels](https://www.manypixels.co/gallery): 2,000+ royalty-free illustrations to power up your designs

- [Scale](https://2.flexiple.com/scale/all-illustrations): One new high-quality, open-source illustration each day



### CSS/SVG generators



- [The Hero Generator](https://hero-generator.netlify.app/)

- [Blobmaker](https://www.blobmaker.app/): Make organic SVG shapes for your next design

- [Blobs](https://blobs.app/): Generate beautiful blob shapes for web and flutter apps

- [Get Waves](https://getwaves.io/): Create SVG waves for your next design

- [SVG Wave](https://svgwave.in/): A free & beautiful gradient SVG wave Generator

- [Squircley](https://squircley.app/): SVG Squircle Maker



### Other SVG & SVG tools



- [SVG-Loaders](https://github.com/SamHerbert/SVG-Loaders): Loading icons and small animations built with pure SVG

- [URL-encoder for SVG](https://yoksel.github.io/url-encoder/): URL-encoder, useful for SVG background elements



## Typography 



### Sans Fonts



- [The Inter Font Family](https://github.com/rsms/inter): Inter is a typeface specially designed for user interfaces with focus on high legibility of small-to-medium sized text on computer screens



### Monospace fonts



- [SFMono](https://github.com/lemeb/a-better-ligaturizer/blob/master/output-fonts/SFMono.ttf): Apple Monospaced variant of San Francisco, Ligaturized version



## Blogs



- [CSS-Tricks](https://css-tricks.com/): Daily articles about CSS, HTML, JavaScript, and all things related to web design and development. By [Chris Coyier](https://github.com/chriscoyier) and various others.



## Inspiration and library resources



- [CodyHouse](http://codyhouse.co/)

- [Codrops](http://tympanus.net/codrops/)

- [Codepen](http://codepen.io/)



## Vanilla JavaScript



### Modals



- [Cookie consent](https://github.com/orestbida/cookieconsent/): A lightweight & GDPR compliant cookie consent plugin written in vanilla JavaScript.

- [glightbox](https://github.com/biati-digital/glightbox): Pure Javascript lightbox with mobile support. It can handle images, videos with autoplay, inline content and iframes.

- [Micromodal](https://github.com/Ghosh/micromodal): Micromodal.js is a lightweight, configurable and a11y-enabled modal library written in pure JavaScript.



### For building layouts



- [macy.js](https://github.com/bigbitecreative/macy.js): A lightweight dependency-free JavaScript library designed to sort items vertically into columns by finding an optimum layout with a minimum height.



## Animations



- [swup.js](https://github.com/swup/swup): Complete, flexible, extensible and easy to use page transition library for your static web.

- [Choregrapher.js](https://christinecha.github.io/choreographer-js/): a simple library to take care of complex CSS animations.

- [Rebound.js](http://facebook.github.io/rebound-js/examples/): is a simple library that models Spring dynamics for the purpose of driving physical animations.

- [tween.js](https://github.com/tweenjs/tween.js/): JavaScript tweening engine for easy animations.

- [Velocity.js](http://velocityjs.org/): Accelerated JavaScript animation.

- [Matter.js](http://brm.io/matter-js/): 2D physics engine for the web.

- [anime.js](http://animejs.com/): is a lightweight JavaScript animation library.

- [mo.js](https://github.com/legomushroom/mojs): Motion graphics toolbelt for the web

- [Animate.css](http://daneden.github.io/animate.css/): A cross-browser library of CSS animations. As easy to use as an easy thing.

- [WOW.js](http://mynameismatthieu.com/WOW/): Reveal Animations When Scrolling

- [Slick](http://kenwheeler.github.io/slick/): The last carousel you'll ever need

- [skrollr](http://prinzhorn.github.io/skrollr/): Parallax scrolling for the masses

- [waypoints](http://imakewebthings.com/waypoints/): Waypoints is the easiest way to trigger a function when you scroll to an element.

- [saffron](https://github.com/colindresj/saffron): A simple Sass mixin library for animations and transitions



## Testing & Optimization



### Linters



- [PHP_CodeSniffer](https://github.com/squizlabs/PHP_CodeSniffer): PHP_CodeSniffer tokenizes PHP files and detects violations of a defined set of coding standards

- [stylelint](https://stylelint.io/): A mighty, modern linter that helps you avoid errors and enforce conventions in your styles

- [ESLint](https://eslint.org/): ESLint statically analyzes your code to quickly find problems

- [doiuse](https://github.com/anandthakker/doiuse): Lint CSS for browser support against caniuse database



### Performance and website loading speed



- [WebPageTest](https://www.webpagetest.org/): Website Performance and Optimization Test

- [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/): The PageSpeed tools analyze and optimize your site following web best practices

- [GTMetrix](https://gtmetrix.com/): GTmetrix gives you insight on how well your site loads and provides actionable recommendations on how to optimize it



### Image & SVG optimization and manipulation



- [Optimage](https://optimage.app/): Automatically compress images without losing quality

- [ImageOptim](https://imageoptim.com/mac): ImageOptim makes images load faster

- [SVGO](https://github.com/svg/svgo): Nodejs-based tool for optimizing SVG vector graphics files.

- [SVG OMG](https://jakearchibald.github.io/svgomg/): UI for SVGO



### Accessibility



- [aXe](https://www.deque.com/axe/): The Standard in Accessibility Testing

- [Siteimprove](https://siteimprove.com/en/accessibility/): Create more accessible, inclusive web content

- [alix](https://github.com/ireade/alix): Alix is a browser extension for a11y.css. It allows you to lint your HTML for Accessibility issues simply by applying a stylesheet that makes use of advanced CSS selectors.

- [tota11y](https://github.com/Khan/tota11y): An accessibility (a11y) visualization toolkit

- [WAVE](https://wave.webaim.org/extension/): Web accessibility evaluation tool



### Placeholders & dummy content



- [Lorem.space](https://lorem.space/): Lorem Ipsum fake image placeholder, API for placeholder images - but useful!



## Photos and videos



- [StockSnap.io](https://stocksnap.io/): Beautiful free stock photos. (CC0)

- [TheStocks.im](http://thestocks.im/): The best royalty free

stock photos in one place (CC0)

- [Pexels Videos](https://videos.pexels.com/): Completely free stock videos. (CC0)

- [Pixel Buddha](http://pixelbuddha.net/): Free and premium resources for designers and developers

- [Streetwill](http://streetwill.co/): Free Hi-Res Photos (CC0)

- [Life of Pix](http://www.lifeofpix.com/): Free high-resolution photos (CC0)



## Tools



### Visual Studio Code extensions for front end design



- [stylefmt](https://marketplace.visualstudio.com/items?itemName=ronilaukkarinen.vscode-stylefmt): stylefmt is a tool that automatically formats your stylesheets.

- [Bracket Pair Colorizer 2](https://github.com/CoenraadS/Bracket-Pair-Colorizer-2): This extension allows matching brackets to be identified with colours. 

- [colorize](https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize): A vscode extension to help visualize CSS colors in files.

- [SCSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss): Advanced autocompletion and refactoring support for SCSS

- [stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint): Modern CSS/SCSS/Less linter.

- [Highlight Matching Tag](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag): Highlights matching closing and opening tags

- [webhint](https://marketplace.visualstudio.com/items?itemName=webhint.vscode-webhint): The Webhint Visual Studio Code extension provides diagnostic data for workspace files based on webhint analysis.

- [doiuse](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-doiuse): Lint CSS for browser support against caniuse database.

- [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens): ErrorLens highlights the entire line wherever a diagnostic is generated and also prints the message inline.

- [CSS var hint](https://marketplace.visualstudio.com/items?itemName=yanai101.css-var-hint): This simple extension adds more capability for CSS var hint

- [SVG](https://marketplace.visualstudio.com/items?itemName=jock.svg): SVG Coding, Minify, Pretty, Preview All-In-One



### Front end design mac apps



- [PerfectPixel](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi): This extension helps develop your websites with pixel perfect accuracy!

- [PixelSnap](https://getpixelsnap.com/): The fastest way to measure everything on screen.

- [ColorSnapper](http://www.colorsnapper.com/): The missing color picker for Mac

- [LittleIpsum](https://itunes.apple.com/us/app/littleipsum/id405772121?mt=12): The best Latin text generator for macOS. Incredibly quick and lightweight. And it's completely free!



### Productivity



- [KeepingYouAwake](https://github.com/newmarcel/KeepingYouAwake): Don't let your Mac fall asleep

- [Amphetamine](https://itunes.apple.com/us/app/amphetamine/id937984704?mt=12): With Amphetamine, you can effortlessly override your energy saver settings and keep your Mac awake.

- [f.lux](https://justgetflux.com/): Is your computer keeping you up late? f.lux is free software that warms up your computer display at night, to match your indoor lighting.

- [Moom](http://manytricks.com/moom/): Move and zoom windows



# Contributors

- Open PR with your links

- Try to keep them organized and categorized

- Use h2 for categories (ex: frameworks) and h3 for subcategories (ex: React, Angular...)