Showing posts with label JavaScript. Show all posts
20 Fresh jQuery Plugins
The jQuery developer community has to be one of the most wonderful programmers community of hardworking people on the web. They’re constantly churning out amazingly useful and completely free plugins and libraries that they share with anyone and everyone who wants to use them.
jQuery Plugins are very useful for designers & developers. jQuery plugins can save lots of time on any web or mobile apps project. I really thankful to jQuery Developers who give us fresh plugin day by day which are really helpful to make web apps more effectively and friendly.
AnimatedScroll: jQuery Plugin for Animating Scroll
AnimateScroll is a beautiful jQuery plugin which enables you to scroll to any part of the page in style by just calling the animatescroll() function with the Id or Classname of the element where you want to scroll to.
Echo.js: Simple JavaScript Image Lazy Loading
Echo.js is a simple image lazy loading library, it’s less than 1KB minified. Lazy-loading works by only loading the assets needed when the elements ‘would’ be in view, which it’ll get from the server for you upon request, which is automated by simply changing the image src attribute.
Multi-Level Push Menu
An experimental push menu with multi-level functionality that allows endless nesting of navigation elements.The result is a “push” menu that can (theoretically) contain infinite nested sub-menus. When opening a sub-level, the whole navigation pushes the content more, allowing a slice of the parent menu to be visible. Optionally, this slice can be visible or not, in which case the sub-menu will simply cover its parent.
jQuery Flat Shadow: Create Long Shadows Flat UI
Long shadow effects are widely used to create a depth for any element in flat design. jQuery Flat Shadow is a plugin which can add this fading shadow to everything targeted.
tidyTime.js: Display More Friendly Time with jQuery
tidyTime.js takes any regular time and changes it into more human friendly dialogue such as “It’s just gone noon. It’s quarter past 8 in the evening, it’s nearly half past 4 in the afternoon, it’s just gone 25 to 6″ and more. By adding additional text before and after the time you are able to create powerful friendly interaction with users.
Taggd: jQuery Plugin to Tag Images
Taggd is a jQuery plugin that help you create tags on images with, or without a popup!
UIKIT: Lightwight Front-end Framework
UIkit is a front-end framework, built by YOOtheme, for creating cross-browser and responsive layouts faster. It is lightweight, has a modular structure and uses LESS for styles + jQuery for the JavaScript.
slimMenu: Multi-Level Responsive Menu
slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly. It converts an unordered list with any depth into a menu with sub-menus and, for smaller screens, the menu becomes a drill-down navigation. It istouch-friendly and has several options for customization like the animation or its speed.
Tabulous.js: Create Tabs with Effects
Tabulous.js is a lightweight jQuery plugin that simplifies creating them with a plain HTML structure. The tabs created can be styled with CSS and multiple switching effects exist (slide, scale, scale up and flip).
Owl Carousel: Touch-Enabled and Responsive Carousels jQuery Plugin
Owl Carousel is a jQuery plugin that allows us to create responsive carousel sliders so quickly. The plugin is touch-friendly and capable of featuring any HTML content with almost any markup.
Summernote: WYSIWYG Editor on Bootstrap
Summernote is a super simple WYSIWYG editor on Bootstrap. It’s open source and easy to install. Lightweight (Summernote: 30Kb), Smart User Interaction, Customize by Initializing options, Safari, Chrome, Firefox, Opera ,Internet Explorer 9+ (IE8 support coming soon)
flipLightBox: Responsive Lightbox jQuery Plugin
flipLightBox is a responsive Lightbox that is extremely easy to implement and doesn’t require additional stylesheets, scripts or libraries.The coolest feature of flipLightBox is that it has optional flip effect as each lightbox image opens and closes.
jquery.arbitrary-anchor.js: Smooth Scrolling For Any Element On Page With jQuery
With jquery.arbitrary-anchor.js , you can easily create useful and neat dynamic anchor scrolling by simply adding a jQuery/CSS selector after the hash (#) in your page’s URL. This plugin extends the normal anchor functionality, that is, an anchor tag with a name value attribute will still get scrolled to as normal. The same goes for an element with an ID which matches the hash. This little plugin will take care of everything else.
Minified.js: Lightweight JavaScript Library
Minified.js is a very strong alternative to these frameworks and it comes with an impressive size, less than 4kb minified. Minified.js is a client-side JavaScript library, comparable to jQuery and MooTools in scope. Its features include DOM manipulation, animation, events, cookies and HTTP requests.
RTP.Slider.js: Touch Enable and Responsive Slider Plugin
RTP.Slider.js is a versatile and flexible slider. Strong support for fluid / responsive Designs, mobile browsers and touch devices. It has nearly every feature that you can find in other sliders on the web.
Tabby: Lightweight and Mobile First Toggle Tabs
Tabby is a lightweight JavaScript and CSS kit for mobile-first toggle tabs. It’s style-light so you can easily modify it to fit your design.
Sticky-Kit: jQuery plugin for Making Smart Sticky Elements
Sticky-Kit is a very handy jQuery plugin that simplifies creating/managing such sticky elements and comes with features for complex use.
S Gallery: Responsive jQuery Gallery Plugin with CSS3 Animations
S Gallery makes use of HTML5′s FullScreen API, and relies heavily on CSS3 animationsgoodness and CSS3 transforms, so it will work only in browsers that support these features. Once an item is clicked and focused, it is possible to browse others with prev-next buttons or via keyboard.
On Scroll Effect Layout: Beautiful Scroll Effects
An on scroll effect template that animates the sides of sections once they are in the viewport. It works with adding a class for animating the two sides of a section. There is an example effect defined and also some media queries for dealing with smaller screens.
Freebie Collection 2: Latest PSD, CSS, Fonts
Freebie Collection 1: Latest PSD, CSS, Fonts
LATEST FREE PSD
Flat iPhone 4/5 mockups PSD
PSD flat icons by Pierre Borodin
Free tiny icons by Prakash
Email app template PSD
Flat calendar widget PSD
LATEST FREE FONTS & PATTERNS
Myra 4F Caps free font
Dunste – Thin free Webfont
Aleo free font
Corki v2 free font
How to make a Responsive Design?
It’s no secret that many believe responsive web is the future. Creating a responsive site means that it’s able to adapt to the many different browsers and sizes that are available. If I want to make sure my website I’ve created on my desktop can be seen on a tablet with minium scrolling and zooming, I’m going to be interested in creating a responsive site.
One reason responsive sites have become popular is because it just makes sense. It’s cheaper than creating one or more extra sites for mobile phones and tablets. It also makes sure there’s a consistent viewing experience amongst devices and desktop screens. It’s not fun having to increase the size of your window or scroll horizontally to see an entire website.
While creating responsive web designs is becoming easier, there are some ways to get it going even quicker. Thanks to some CSS and HTML, we can code it right into our sites. Other elements require a bit more work. Either way, we’ve come up with a list to help you put your responsive site together with minimum fuss and maximum results.
jQuery plugins
Isotope
Isotope is a jQuery plugin that claims to create magical layouts that cannot otherwise be created by CSS and HTML. It has the ability to rearrange elements inside of a container so they fit within it as it resizes. You can also use Isotope to filter and sort items by categories and such.
One reason responsive sites have become popular is because it just makes sense. It’s cheaper than creating one or more extra sites for mobile phones and tablets. It also makes sure there’s a consistent viewing experience amongst devices and desktop screens. It’s not fun having to increase the size of your window or scroll horizontally to see an entire website.
While creating responsive web designs is becoming easier, there are some ways to get it going even quicker. Thanks to some CSS and HTML, we can code it right into our sites. Other elements require a bit more work. Either way, we’ve come up with a list to help you put your responsive site together with minimum fuss and maximum results.
jQuery plugins
Isotope
Isotope is a jQuery plugin that claims to create magical layouts that cannot otherwise be created by CSS and HTML. It has the ability to rearrange elements inside of a container so they fit within it as it resizes. You can also use Isotope to filter and sort items by categories and such.
Breakpoints.js
Breakpoint was made with developers and designers in mind. It’s a plugin that allows you to create breakpoints for different browser sizes. When your browser is resized to one of those sizes, the elements are able to fit into the screen.
FitText.js
This is one of my favorite jQuery plugins because it’s for fonts. Far too often in responsive web design, people don’t take into consideration that the headlines should be responsive instead of squished into a certain space. FitText allows you to do just that, but remember to only use it for headlines!
Response.js
If you like the idea of Breakpoint.js but want more customization, Response.js is the answer. It’s really great for those who know jQuery better than CSS and HTML and need to create responsive web sites. You use your breakpoints, but there’s so much more customization, such as device size, pixel rations and the ability to load different sources for different sizes.
TinyNav.js
TinyNav is a lightweight jQuery plugin that allows you to change any menu items using lists to turn into drop down menus when the browser is resized. You can specify the sizes as well as which menus change. Its not that broad in function, but it is very effective for what it does.
Popular frameworks and systems
Responsive Grid System
This system claims to not be a boilerplate or framework, but just a system to make your designs responsive. It seems to be one of the most flexible ones as it doesn’t restrict you to a certain size or to a certain gridsize. They use different CSS classes that are able to float and create their own columns.
Golden Grid System
The GGS is also a system, and not a ‘framework’. They like to refer to themselves as a starting place or guideline for those who wamt to use a certain amount of grids in their web design. You’re given 18 colums on the screen, but 16 to use in your design. You make up your own widths and gutters to use and essentially go from there.
1140 Grid System
For a while, many designers were using web designs that were 960px wide. Then that became to small and they went up. Now many designs are being developed using an 1140px width. This 1140 Grid System allows you to create 12 columns to use in a wide width web design.
Twitter Bootstrap
Bootstrap is one of the most popular frameworks available. It’s a 12 grid framework that has made itself usable cross-browser (including Internet Explorer 7) and can be used responsively in handheld devices. It comes with various styling components, typography and JavaScript to use and create sleek, intuitive sites.
SimpleGrid
SimpleGrid takes the idea of grids and simplifies it. With most grid systems and frameworks, you have these unknown classes and unknown columns. Simple grid has classes that specify what columns are first, middle and last. In addition, you can add different ‘slots’ to the columns to make it seem like there are more columns. It’s a very simple and straightforward framework.
Other responsive tools
Responsive Web Design Sketch Sheets
Much like any designer or developer, you probably sketch out your designs before you actually go about making them. Hopefully you do. If not, perhaps you should start by using these RWD sketch sheets. They come with difference device and desktop sizes on them so that you can plan everything out.
Responsive Design Sketchbook
If you like the idea of the sketching on paper, but want to have all your doodles together, you may consider getting the responsive design sketchbook. It comes with 50 pages, spiral bound with various screen sizes on each page. All the grids and math are already done for you, so this is a great tool for beginners and experts in responsive design.
Style Tiles
This is a nice little resource for web designers whether they are looking for something for responsive design or not. It’s a PSD that allows you to get the essence of a website by adding headings (typography), logos, colors and other elements. The reason why this works for responsive web design is because it doesn’t imply any dimensions, just a digital idea with no restrictions.
Responsive Calculator
There’s a ton of math involved in creating pixel perfect responsive designs. It’s necessary that your math is correct, as well, because you’ll be dealing with different percentages, widths and browser sizes. To help out, here’s a calculator that gives you the correct math and the CSS to go along with it.
Conclusion
It’s imperative that we take notice of what responsive web is doing. Many clients will want to have their sites available to a variety of devices, and it’s just more cost effective to create responsive sites. In addition, most of your frameworks and other resources for responsive design really help cultivate organized and high-quality, standard websites.
What are your favorite ways to start responsive designs? Have we missed a resource you rely on? Let us know in the comments.
Breakpoint was made with developers and designers in mind. It’s a plugin that allows you to create breakpoints for different browser sizes. When your browser is resized to one of those sizes, the elements are able to fit into the screen.
FitText.jsThis is one of my favorite jQuery plugins because it’s for fonts. Far too often in responsive web design, people don’t take into consideration that the headlines should be responsive instead of squished into a certain space. FitText allows you to do just that, but remember to only use it for headlines!
Response.jsIf you like the idea of Breakpoint.js but want more customization, Response.js is the answer. It’s really great for those who know jQuery better than CSS and HTML and need to create responsive web sites. You use your breakpoints, but there’s so much more customization, such as device size, pixel rations and the ability to load different sources for different sizes.
TinyNav.jsTinyNav is a lightweight jQuery plugin that allows you to change any menu items using lists to turn into drop down menus when the browser is resized. You can specify the sizes as well as which menus change. Its not that broad in function, but it is very effective for what it does.
Popular frameworks and systemsResponsive Grid System
This system claims to not be a boilerplate or framework, but just a system to make your designs responsive. It seems to be one of the most flexible ones as it doesn’t restrict you to a certain size or to a certain gridsize. They use different CSS classes that are able to float and create their own columns.
Golden Grid SystemThe GGS is also a system, and not a ‘framework’. They like to refer to themselves as a starting place or guideline for those who wamt to use a certain amount of grids in their web design. You’re given 18 colums on the screen, but 16 to use in your design. You make up your own widths and gutters to use and essentially go from there.
1140 Grid SystemFor a while, many designers were using web designs that were 960px wide. Then that became to small and they went up. Now many designs are being developed using an 1140px width. This 1140 Grid System allows you to create 12 columns to use in a wide width web design.
Twitter BootstrapBootstrap is one of the most popular frameworks available. It’s a 12 grid framework that has made itself usable cross-browser (including Internet Explorer 7) and can be used responsively in handheld devices. It comes with various styling components, typography and JavaScript to use and create sleek, intuitive sites.
SimpleGridSimpleGrid takes the idea of grids and simplifies it. With most grid systems and frameworks, you have these unknown classes and unknown columns. Simple grid has classes that specify what columns are first, middle and last. In addition, you can add different ‘slots’ to the columns to make it seem like there are more columns. It’s a very simple and straightforward framework.
Other responsive tools
Responsive Web Design Sketch Sheets
Much like any designer or developer, you probably sketch out your designs before you actually go about making them. Hopefully you do. If not, perhaps you should start by using these RWD sketch sheets. They come with difference device and desktop sizes on them so that you can plan everything out.
Responsive Design SketchbookIf you like the idea of the sketching on paper, but want to have all your doodles together, you may consider getting the responsive design sketchbook. It comes with 50 pages, spiral bound with various screen sizes on each page. All the grids and math are already done for you, so this is a great tool for beginners and experts in responsive design.
Style TilesThis is a nice little resource for web designers whether they are looking for something for responsive design or not. It’s a PSD that allows you to get the essence of a website by adding headings (typography), logos, colors and other elements. The reason why this works for responsive web design is because it doesn’t imply any dimensions, just a digital idea with no restrictions.
Responsive CalculatorThere’s a ton of math involved in creating pixel perfect responsive designs. It’s necessary that your math is correct, as well, because you’ll be dealing with different percentages, widths and browser sizes. To help out, here’s a calculator that gives you the correct math and the CSS to go along with it.
Conclusion
It’s imperative that we take notice of what responsive web is doing. Many clients will want to have their sites available to a variety of devices, and it’s just more cost effective to create responsive sites. In addition, most of your frameworks and other resources for responsive design really help cultivate organized and high-quality, standard websites.
What are your favorite ways to start responsive designs? Have we missed a resource you rely on? Let us know in the comments.
