15 Interesting #JavaScript and #CSS Libraries
A Thread
1.Leaflet( leafletjs.com/index.html) is one of the most popular open-source solutions for creating interactive maps. It offers everything you'd expect out of a map library - markers, layers, zooming, and many more basic and advanced features.
2.Flexbox grid system for React(jxnblk.com/reflexbox/) that allows developers to quickly build page layouts using a simple API of 3 React components - Grid, Flex, and Box. Since it utilizes the flexbox model, all grids with Reflexbox are responsive .
3.Lightweight no-dependencies JavaScript carousel with excellent gesture controls for touch-screen devices. The library provides lots of customization options for controlling the transition speed, frequency, animations, and other details.
(meandmax.github.io/lory/)
4. Tiny, very simple to use JavaScript library for creating beautiful gradient animations. Go to the examples page to see all the features Granim( sarcadass.github.io/granim.js/) provides, including linear and radial animations, image masks, and interactive change of gradient colors.
5. A UI toolkit for React Native that combines a number of useful components into one package. It includes elements such as menus, various buttons, and form inputs, with new components coming in the future. Very well documented and easy to implement.
github.com/react-native-c…
6.JavaScript plugin that makes unresposnive elements responsive. It is useful for <iframe> and <video> element as it preserves their original aspect ratio. this one doesn't rely on jQuery but can work with $('selectors') if it is included in the page.

dollarshaveclub.github.io/reframe.js/
7.Awesome library for creating responsive animated progress bars. ProgressBar.js provides a number of built in shapes, and also allows developers to create their own paths using SVG.
kimmobrunfeldt.github.io/progressbar.js/
8. Headroom is a vanilla JavaScript library that allows you to easily set up event listeners for user scroll. You can bind different functions for when the scroll moves up or down, the bottom/top of the page is reached, and other events.
wicky.nillia.ms/headroom.js/
9. Sass mixins for loading indicators with fluid CSS-only animations. The spinners are extremely easy to implement as they require just one HTML element per spinner. To customize the mixins themselves you can simply change the provided SCSS variables.
matejkustec.github.io/SpinThatShit/
10. Vanilla JavaScript library that utilizes the History API to make a robust routing system with proper history on single page apps. In browsers where the History API isn't available, Navigo automatically falls back to a hash (#) based routing.
work.krasimirtsonev.com/git/navigo/
11. Pretty theme for documents that have been generated from HTML or Markdown. It styles all elements on the page, providing them with proper typography, colors and paddings, greatly improving readability.
jgthms.com/wysiwyg.css/
12. This is a library for easier handling of complex CSS animations. Choreographer makes more manageable the transition of multiple properties at once, animations that start off after different delays, and syncing with user gestures such as scrolling.

christinecha.github.io/choreographer-…
13.Color pallette created especially for designing user interfaces. It contains 12 colors, each having 10 variations with different intensity. Open color is available in CSS, Sass, Less, and as a plug-in for Photoshop, Illustrator, and Sketch.
yeun.github.io/open-color/
14. No dependencies JavaScript library that enables you to integrate fuzzy-search (approximate string matching) to your web app. Fuse is very powerful and has lots of options for you to tinker and play with to get the exact search functionality you need.
fusejs.io
15. Ionicons is the icon font from the Ionic framework, but it can be freely used as a standalone library. The collection consists of over 500 premium-quality symbols and logos, all drawn in a modern and very appealing style.
ionicons.com

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Lindsey🌻👩‍💻

Lindsey🌻👩‍💻 Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @Lindsey_design

13 Jan
Top 10 Projects For Beginners To Practice #HTML and #CSS Skills

A thread
#WomenWhoCode
1. A Tribute Page
The simplest website you can make as a beginner is a tribute page of someone you admire in your life. It requires only basic knowledge of HTML and CSS.
2. Webpage Including Form
Forms are always an essential part of any project and you will be working with a lot of forms in most of the applications . How to use a text field, checkbox, radio button, date, and other important elements in a single form.
Read 11 tweets
23 Aug 20
Recently i have started to learn #color theory.
What color schemes should pick for the next website? This is a frequent question that a lot of people are asking me so i will start to post some advice here on Twitter.I hope that this may help you! A thread🧵
#100DaysOfColour #web
Tip no 1:
Picking the right #Colors for your website is very important.
Your colors must reflect your design’s goal and brand’s personality. You should create a positive psychological impact on users. So, you should determine how the color temperature reflects your message.1/2
Picking the right color is related with the purpose of your website. For example if you want to sell a product the right color is blue because it represents trust and strength. Make a colour scheme with blue in it and that's it( not100% blue maybe light blue)
Read 25 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!