Fresh Resources for Web Designers and Developers (February 2014)
It’s already the second month of the new year (gasp!), we hope you are still working towards your goal and New Year resolutions. And if yours was to become a better and more productive designer or developer, you probably will love our new collection.
In this post, we have put together a number of handy tools and resources for designers and developers including a Photoshop plugin for creating templates in the right size for social media profile pictures and covers, a jQuery plugin to create a popup dialog, and a fine collection of loading and spinning icons. Lets check them out.
SocialKit
Social media sites like Google, Twitter, and Facebook suggest that you upload the picture profile and cover for your account. SocialKit is a Photoshop plugin that can help you create these picture profiles and covers, in the precise size. Once it is installed, it adds a new extension panel. Select the social media site you want to create your account picture for, and it will generate the template for you.
ToyChestTheme
ToyChest is a color scheme package for code syntax that uses color schemes from FlatUIColors (which is also known as the “Flat Design Color Scheme”). ToyChest is available for many popular code editing applications including TextMate, Coda, SublimeText, and even also Terminal.
Magnific Popup
Magnific Popup is jQuery plugin for creating responsive lightbox and popup dialog. You can apply the lightbox effect for single images or a gallery, a video from Youtube or Vimeo, or a Map from Google Maps. Also. It performs well on both desktop and mobile platforms.
Story Engine
Story Engine is a plugin to create more interactive story-telling in WordPress. It brings several new storytelling components that you can insert into your post (story), including Audio, Video, Parallax, Map, Timeline, Document Viewer and Chapter Headings.
Blueimp Gallery
Blueimp Gallery is a jQuery plugin for building image and video galleries, carousel, and lightbox effect. It is built upon Swipe.js, a touch-enabled jQuery slider. You can comfortably and accurately navigate through the gallery or the carousel with a swipe of you fingers.
Recommended Reading: Creating Touch-Enabled Slider With SwipeJS and jQuery
Myth.io
Myth is a new CSS pre-processor but, unlike the other CSS pre-processors, which create their own conventions, Myth adopts CSS specifications (of the future). For example, Myth uses var() function to declare a variable and calc() function to perform mathematical operations.
Recommended Reading: CSS Preprocessors Compared: Sass Vs. LESS
SpinKit
SpinKit is a collection of modern spinners or loading indicators. SpinKit is built purely with CSS and CSS Animations to animate the spinners, hence the spinners will only work in the browser that supports CSS Animation @keyframe. You can always do workarounds with JavaScript to provide a fallback. Visit SpinKit repo for more detail instructions.
Flatastic
Flatastic is a large collection of popular UI elements in mobile applications, such as calendar widget, weather forecast widget, offcanvas navigation, toggle buttons, media player, and nice icons. The collocation would be very useful as a starter for a project and a source of inspiration.
