Giter Club home page Giter Club logo

awesome-frontend's Introduction

Awesome Frontend

Collection of awesome tools and libraries for building interfaces.

Animation and Parallax

  • Lax.js

    Details

    Simple & light weight (3kb minified & zipped) vanilla javascript plugin to create smooth & beautiful animations when you scrolllll! Harness the power of the most intuitive interaction and make your websites come alive!

    Mainly used to create parallax effects

    Pros

    • Predefined sets for parallax with very simple configuration rules
    • Can be enabled / disabled / reinitialized (for window resize)
    • Support custom animation rules

    Cons

    • Custom animations are not easy to configure
    • Cannot define a threshold for the predefined sets

UI components

Images comparison

  • Image Compare Viewer

    Details

    Compare before and after images, for grading, CGI and other retouching comparisons. Vanilla Javascript, zero dependencies.

    Pros

    • Dependency Free
    • Works very well on mobile and touch friendly devices
    • Support vertical and horizontal modes
    • Simple markup and simple setup
    • Actively maintained

Sliders

  • Swiper.js

    Details

    The most modern mobile touch slider

    Pros

    • Dependency Free
    • Works very well on mobile and touch friendly devices
    • Easy to define bullets and navigation buttons
    • Support RTL
    • Different modes like fixed number of slides, auto width, variable height, free mode, multi-row, nested sliders ...
    • Allow spaces between slides
    • Built-in lazy loading
    • Expose events

Utilities

  • in-view.js

    Details

    Get notified when a DOM element enters or exits the viewport. A small (~1.9kb gzipped), dependency-free, javascript utility for IE9+.

    Pros

    • Dependency Free, small in size
    • Dead simple to implement

    Cons

    • Original author archived the repository, this means it's deprecated and won't recieve fixes and updates
    • Use MutationObserver. Currently IntersectionObserver is way more performant
    • Some options like threshold cannot be defined per instance. It's global

Vue

Use these when shopping for Vue libraries.

UI Utilities

Form Validation

  • vee-validate

    Details

    Template Driven Validation Framework for Vue.js

    Pros

    • Dependency Free
    • Actively Maintained
    • Localization Support
    • Async and Custom Rules Support

I18n

  • vue-i18n

    Details

    Vue I18n is internationalization plugin for Vue.js

    Pros

    • Most Popular
    • Actively Maintained
    • App-level translations as well as component-level translations

    for Nuxt use the nuxt-i18n module that uses this under the hood.

UI components

Sliders

  • hooper

    Details

    A customizable accessible carousel slider optimized for Vue

    Cons

    • No longer maintained

    Pros

    • Most Popular
    • Touch, Keyboard, Mouse Wheel, and Navigation support
    • SSR Support
    • Easily customizable through rich API and addons

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.