Thursday Roundup # 62
This is our web design and web development news series where we share our favorite design/development related articles, resources, tutorials and awesome freebies.
NEW DEVELOPMENT RESOURCES AND TOOLS
Declarative On-Scroll Reveal Animations – ScrollReveal.js
A simple way to create and maintain how elements fade in, triggered when they enter the viewport.
Moves a DOM element along an SVG path.
jQuery Strong Password Plugin: Power PWChecker
Power PWChecker jQueryPlugin observes passwords as users type and provide instant password strength check (Weak, Medium, or Strong). This encourages users to review their password selection and ensure that the password is strong and secure. Power PWChecker also allows you to enforce password length policy by specifying minimum and maximum password length. It also matches password entries and provides visual alert in case of inconsistent passwords.
scrollReveal.js does not require jQuery, but does rely upon CSS3 transitions; as such, it has been developed exclusively for modern browser use only.
HTML5+JSON Interactive Table Plugin
Dynatable is a funner, semantic, interactive table plugin using jQuery, HTML5, and JSON. And it’s not just for tables.
Open Source Vector Graphics Web App – Mondrian
Mondrian is a free vector graphics web app like Adobe Illustrator or Inkscape. Mondrian offers all the tools needed to create, modify, and export simple SVG files. Mondrian also supports undo/redo through a file history API that stores operations.
Great jQuery SVG Fallback – SVGMagic
SVGMagic is a simple jQuery plugin that searchs for SVG images (including background-images) on your website and creates PNG versions if the browser doesn’t support SVG.
Extract Inline CSS Styles from HTML Document – ExtractCSS
ExtractCSS is an online tool which can extract ids, classes and inline styles from HTML document and output them as CSS stylesheet. All you have to do is to type or paste your HTML document and let extractCSS to do the rest for you!
Free Emulators and Tools For Testing Your Website on Desktop & Mobile Devices
Respify – Responsive Image Library
A simple responsive images library, which parses a image from a set of child span nodes with data-media and data-src attributes. It uses media queries to select images.
The event-driven nature together with MVC architecture of JointJS makes it easy to plug-in any backend application.
Generates and Plays CSS3 Keyframes – jQuery.keyframes
jQuery.Keyframes generates and runs CSS3 keyframes quickly and easily allowing you to concentrate on the content of your project whilst cutting down code.
18 Free, Open Source Responsive Image / Content Sliders
Image sliders are one of the most common component of modern web design. Go to any popular e-commerce website and you are most likely to find a carousel displaying latest products and offerings.
Image sliders are often used to present large amount of information in a limited space. They can be used to catch attention of website visitors, display important information or some times just to add colorful imagery to the design layout. Carousels can be catchy as well as distracting – but that is another debate. As advocate of usability and simplicity of the design, we believe that image sliders, when used correctly, can be used as a means to present information effectively. And fortunately, there are plenty of free and open source image sliders that you can integrate in your web design effectively. This is a list of 18 responsive image sliders for free use.
jQuery CSS3 Responsive Slider with Audio Support – A-Slider
Simple Autocue/Teleprompter jQuery Plugin
Scrollocue is a jQuery plugin for building a simple autocue/teleprompter system, to scroll through lines of text. Walk through the autocue text with the arrows, space bar or just click.
jQuery Animated Fixed Position Element Plugin – Stickyfloat
This plugin makes it possible to have a fixed position element that is relative to it’s parent. A normal fixed positioned element would be “out of context” and is very difficult to use in the most common situations with fluid designs. This plugin solves that problem with as little code as I could possible get it so it will run in the most optimized way, while also allow you to customize it in many important ways which might suit you best.
A Responsive Multi Level Dropdown Menu Plugin With Icons For WordPress: WPBootM
WPBootM is a responsive multi level dropdown menu plugin for WordPress, based on famous twitter bootstrap framework it also supports text based icons using font-awesome iconic fonts. All the features of WPBootM plugin are customizable from plugin option page, where you change the menu bar color, menu item color, menu text color, add logo to your menu. Along with image based logo there is an option for text based logo as well.
FontAwesome Animation with CSS3
Simple animations using FontAwesome and some CSS3.
The Top 100 Email Marketing Campaigns of 2013 – Free Ebook
Looking for fresh ideas on how to improve the design and performance of your emails? Get inspired with this collection of 2013’s best email marketing campaigns! This is a free eBook with top 100 email marketing campaigns, by Campaign Monitor.
Creating web apps and sites for the Mobile Web has its own sets of challenges and techniques. From UIs optimized for fingers instead of mouse cursors to the bandwidth limitations that most portable personal devices have, developing for mobile devices requires a paradigm shift for those of us who’ve traditionally created products aimed at desktops.
Tutorial: Create A Countdown & Signup Coming Soon Page
The post shares a quick and easy way to building a countdown landing page with a simple email sign up form. FlipClock.js jQuery plugin has been used to power the countdown clock and MailChimp to power the email sign up form.
If you have not connected your web content with social medial platforms, you are are just a step behind. All you need to do is add floatShare jQuery plugin on your website. It is a free jQuery plugin that allows your website visitors to share your web content on popular social media platforms with a single- click giving you good coverage and audience on multiple social media platforms. floatShare also gauges popularity of your web content by giving you a summary of total ‘shares’ and ‘likes’.
floatShare is easy to integrate and customize. It comes with three different sizes and styles of social buttons. Built on jQuery, floatShare is compatible with all major web browsers and work with mobile devices as well. The social buttons of floarShare have floating behavior – they float with content as visitors scroll up or down the page. floatShare can be customized with different start and end points.
FREE TEMPLATES AND THEMES
Orion – Beautiful & Creative Free PSD Template
Print-ready Free Professional HTML5 CV/Resume Template: The Resume
Whether you are designer, developer or an entrepreneur and want to show your online presence, The Resume will help you present yourself and show case your work over the internet in an appealing and professional way.
Its a free, professional print-ready HTML5 CV/Resume Template with 13 creative themes suitable for every profession.
Free PSD Template
This free psd template is based on bootstrap grid. Bootstrap psd grid folder is also there in this psd template. Very easy to edit and extend. Fonts are Google fonts. This psd website templates is absolutely free for both commercial and persona use.
Free HTML5 Responsive Business/Portfolio Template
AmazingBiz – a free HTML5 responsive template. This free responsive template is design to look great on all devices, including desktops, smartphones and tablets. The HTML5 templateincludes search engine optimized content, fully functional 2 /3 / 4 column portfolio, contact form, image /content slider, and a featured content gallery.
Freebie – Twitter GUI PSD (New Home Template)
Free WIP Template PSD
SPACE: Dribbble Powered Portfolios
Create an instant, amazing portfolio with your Dribbble shots.
Free WordPress Resume Theme: Elegant Resume
With Elegant Resume theme, You can build it on top of your personal domain or on a free WordPress account. Elegant Resume is a free WordPress theme that can be used to design simple and elegant resume.
Since it is based on WordPress, you just have to download Elegant Resume theme and import it in your WordPress installation. Thus, you are ready to put your name, skills, and career information in less than 5 minutes. Elegant Theme can be easily customized to cater to various styles of resume.
Branding Stationery Free PSD
Freebie: Mini Envelopes
Download comes as a print ready pdf template with assembly instruction. Just print the template on any 8.5?x11? paper on your home printer, cut and fold following the included instructions and you’re all set!
Meroo Flat-Styled Icon Set
This huge set contains a total of 110 beautifully and individually designed icons. The download package come in PSD format, so you can edit, modify, or re-size each icon to suit your needs. You can also freely use these icons in both your personal and commercial projects.
AMOceanus – Free Font Download for Big Text Sizes and Headers
A display sans serif font with tight kerning best used for big text sizes or headers. If used as body text increase the kerning. It comes in two weights Regular and Bold. The font is rigid and simple. It is inspired by lines, architecture and has been designed within a square (lower case) and rectangle (upper case).
BROWNIE – Free Font
DPOPPER – Free Font
65 High Quality Fonts for Free Download
‘Fonts’ is a subject that I love to talk about. As an admirer of calligraphy and a professional UX developer, font is my favorite design element. For me, it is more than a type face; it is an important design element. Fonts can make interesting logo designs, beautiful typographic design and attractive print material. From a huge selection of free fonts available online, you can find a font for almost any theme and style.
With the modern techniques and capable web browsers, it has become easier than before to use your favorite fonts online. Most web browsers support and render new and custom fonts (without having to download fonts) nicely making it easier to enhance web designs with beautiful typography.
The pros and cons of using fonts in web design is a long discussion and I would rather keep it for another post. Today’s post lists some beautiful and interesting free fonts that you can download and use in your project. Some of these typefaces have a webfont Kit to embed custom fonts with @font-face rule.