Handpicked Frameworks and Libraries for Web Design
When it comes to development it is very easy to be distracted from the actual development of a web application. Putting too much effort into attention to details sometimes leads to unnecessary time and energy consumption. The solution to the problem is custom CSS Libraries.
Work Smart not Hard!
Responsive websites are a must these days and to conquer that we have frameworks like Bootstrap and Foundations, etc. But, these frameworks are too mainstream and we are so used to them.
Overriding subtle transitions sure do the job but coding them can be cumbersome for some. Here are some CSS frameworks and libraries which can really help embellish your website.
The big players
Download it here: http://getbootstrap.com/getting-started/
Foundation just like bootstrap is based on a grid system of 12 columns making it easier to develop for mobile devices, tablets and desktops at the same time.
Download it here: http://foundation.zurb.com/
Along with a starter template, a parallax template is also included which gives a parallax effect on a scroll.
Download it here: http://materializecss.com/getting-started.html
Embellish yours Site Pages with these effects!
From modals and positional modals animations to buttons, lists and even tabs, you can animate almost everything using this library. Some of the features include — minimalistic animations, jank-free 60 fps, works on almost all browsers seamlessly.
Find the GitHub here: https://github.com/h5bp/Effeckt.css
A CSS file so powerful that can be used to add a bunch of animations to your divs or any other elements for that matter. To use animate.css in your project, all you need to do is include “animate.css” in your project.
Download it here: https://github.com/daneden/animate.css
It is not always about subtle and minimalistic animations, sometimes, it is also about seeking animations with crazy shakes to add that “BUZZ” and let the user know that you mean business.
A practical use of shake.css is to notify a user about something of great significance, e.g. an important text field a user forgot to fill or maybe he clicked on the submit button before filling the mandatory fields. These animations add up to a great user experience because they keep the user in the know of what is happening and what just went wrong.
Download it here: https://elrumordelaluz.github.io/csshake/
Sometimes forms can be complicated and people are afraid of clicking without affirmations. Most buttons are self-explanatory, yes, but sometimes they have a baggage. The solution is “#Tooltips”.
Tooltips have been with us for a long time and “hint.css” adds that hint of animation to those tooltips encouraging more usage.
It is a 1.5kb minified file with no configurations required and works with most modern browsers.
Download it here: http://kushagragour.in/lab/hint/
Ratchet is a full-fledged framework to build mobile apps with simple HTML, CSS and JS components. From all sorts of title bars and table views to buttons, popovers, and “ratchicons”, ratchet comprises of all the components specific to both iOS and Android.
Download the full zip with documentation here: http://goratchet.com/
Here’s what you need to get started: http://goratchet.com/getting-started/
Flat design, one of the first incorporators was Windows 8 Metro UI and it flourished since then. Flat design is cleaner, colours are easier on the eyes and gives a more spacious feeling.
“Flat UI” is a beautiful amalgamation of Bootstrap and flat design. It comprises of a flat layout for components of the Bootstrap framework.
Download it here: http://designmodo.github.io/Flat-UI/
Small but noteworthy
Download it here: https://codyhouse.co/gem/css-animated-headlines/
A plethora of hover effects for links, buttons, logos, SVG, featured images and so on. Just include the .css.
Download it here: http://ianlunn.github.io/Hover/
TypeIt is a versatile jQuery animated-typing plugin.
Download it here: https://macarthur.me/typeit/
Animated Transition Effects
Animated Transition Effects is a full-screen 60fps transition effect library powered by CSS animations.
Download it here: https://codyhouse.co/gem/animated-transition-effects/
This is by far the best place to be for finding that perfect gradient. You can grab the .css right away.
Use it here: http://uigradients.com/
Caption hover effects
Text style and hover effects
Inline anchor styles
Demo 1 of the letters.js plugin for animating SVG letters creatively.tympanus.net
Originally published at blog.templatetoaster.com on August 22, 2016.