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

awesome-frontend's People

Contributors

ahmadalfy avatar logaretm avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

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.