Skip to content

RobustaStudio/awesome-frontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 

Repository files navigation

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

About

Collection of awesome tools and libraries

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published