Skip to content

Latest commit

 

History

History
186 lines (134 loc) · 11.7 KB

README.md

File metadata and controls

186 lines (134 loc) · 11.7 KB
Raw
awesome

Awesome frontend Awesome

😎 Curated list of awesome Dude frontend related resources 😎

CSS

Grid tutorials

CSS Grid tools

SVG

Open source SVG icon packs

  • Feather: Simply beautiful open source icons
  • CSS.gg: 700+ Pure CSS, SVG & Figma UI Icons
  • Iconoir: Iconoir is one of the biggest open source libraries with currently 914 SVG Icons.
  • Material Icons: Material Icons are available in five styles and a range of downloadable sizes and densities.
  • Iconic: Free "do wtf you want with" pixel-perfect icons
  • Icongram: Serving you 10000+ icons on the fly.
  • iconmonstr: Free simple icons for your next project
  • SVG Repo: Browse 300.000+ SVG Vectors and Icons
  • Orion: 8613 pro & free SVG icons for your Web, iOS, Android & design projects
  • Remix: Open source neutral style icon system
  • Hero icons: A set of free MIT-licensed high-quality SVG icons for UI development
  • Ionicons: Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere

SVG illustrations

  • unDraw: Open source illustrations for any idea
  • ManyPixels: 2,000+ royalty-free illustrations to power up your designs
  • Scale: One new high-quality, open-source illustration each day

CSS/SVG generators

Other SVG & SVG tools

Typography

Sans Fonts

  • The Inter Font Family: 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: Apple Monospaced variant of San Francisco, Ligaturized version

Blogs

  • CSS-Tricks: Daily articles about CSS, HTML, JavaScript, and all things related to web design and development. By Chris Coyier and various others.

Inspiration and library resources

Vanilla JavaScript

Modals

  • Cookie consent: A lightweight & GDPR compliant cookie consent plugin written in vanilla JavaScript.
  • glightbox: Pure Javascript lightbox with mobile support. It can handle images, videos with autoplay, inline content and iframes.
  • Micromodal: Micromodal.js is a lightweight, configurable and a11y-enabled modal library written in pure JavaScript.

For building layouts

  • 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: Complete, flexible, extensible and easy to use page transition library for your static web.
  • Choregrapher.js: a simple library to take care of complex CSS animations.
  • Rebound.js: is a simple library that models Spring dynamics for the purpose of driving physical animations.
  • tween.js: JavaScript tweening engine for easy animations.
  • Velocity.js: Accelerated JavaScript animation.
  • Matter.js: 2D physics engine for the web.
  • anime.js: is a lightweight JavaScript animation library.
  • mo.js: Motion graphics toolbelt for the web
  • Animate.css: A cross-browser library of CSS animations. As easy to use as an easy thing.
  • WOW.js: Reveal Animations When Scrolling
  • Slick: The last carousel you'll ever need
  • skrollr: Parallax scrolling for the masses
  • waypoints: Waypoints is the easiest way to trigger a function when you scroll to an element.
  • saffron: A simple Sass mixin library for animations and transitions

Testing & Optimization

Linters

  • PHP_CodeSniffer: PHP_CodeSniffer tokenizes PHP files and detects violations of a defined set of coding standards
  • stylelint: A mighty, modern linter that helps you avoid errors and enforce conventions in your styles
  • ESLint: ESLint statically analyzes your code to quickly find problems
  • doiuse: Lint CSS for browser support against caniuse database

Performance and website loading speed

  • WebPageTest: Website Performance and Optimization Test
  • Google PageSpeed Insights: The PageSpeed tools analyze and optimize your site following web best practices
  • GTMetrix: 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: Automatically compress images without losing quality
  • ImageOptim: ImageOptim makes images load faster
  • SVGO: Nodejs-based tool for optimizing SVG vector graphics files.
  • SVG OMG: UI for SVGO

Accessibility

  • aXe: The Standard in Accessibility Testing
  • Siteimprove: Create more accessible, inclusive web content
  • 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: An accessibility (a11y) visualization toolkit
  • WAVE: Web accessibility evaluation tool

Placeholders & dummy content

  • Lorem.space: Lorem Ipsum fake image placeholder, API for placeholder images - but useful!

Photos and videos

Tools

Visual Studio Code extensions for front end design

  • stylefmt: stylefmt is a tool that automatically formats your stylesheets.
  • Bracket Pair Colorizer 2: This extension allows matching brackets to be identified with colours.
  • colorize: A vscode extension to help visualize CSS colors in files.
  • SCSS IntelliSense: Advanced autocompletion and refactoring support for SCSS
  • stylelint: Modern CSS/SCSS/Less linter.
  • Highlight Matching Tag: Highlights matching closing and opening tags
  • webhint: The Webhint Visual Studio Code extension provides diagnostic data for workspace files based on webhint analysis.
  • doiuse: Lint CSS for browser support against caniuse database.
  • Error Lens: ErrorLens highlights the entire line wherever a diagnostic is generated and also prints the message inline.
  • CSS var hint: This simple extension adds more capability for CSS var hint
  • SVG: SVG Coding, Minify, Pretty, Preview All-In-One

Front end design mac apps

  • PerfectPixel: This extension helps develop your websites with pixel perfect accuracy!
  • PixelSnap: The fastest way to measure everything on screen.
  • ColorSnapper: The missing color picker for Mac
  • LittleIpsum: The best Latin text generator for macOS. Incredibly quick and lightweight. And it's completely free!

Productivity

  • KeepingYouAwake: Don't let your Mac fall asleep
  • Amphetamine: With Amphetamine, you can effortlessly override your energy saver settings and keep your Mac awake.
  • f.lux: 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: 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...)