Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Goodies’ Category

When it comes to drag ‘n’ drop and reordering elements with JavaScript, jQuery UI’s sortable widget is by far the most popular.

There is also a tutorial at WRD for using it with server-side scripting.

Sortable is a JavaScript library that performs the same task without any JavaScript framework.

Sortable

It uses the native HTML5 drag and drop API, has a small footprint (<2kb gzipped) and works on touch devices too.

Also, besides single lists, items can be moved between multiple lists too.

UI kits are very useful for starting and completing  a web design project quickly.

PixelKit, a premium UI kit brand, is sharing a lightweight version of their Modern Touch UI kit exclusively with WRD.

It is available in PSD and there are items for navigation, slider, accordion, form controls, social links and more.

Modern UI Kit
Read the rest of this entry »

  • Tags:
  • Filed under: Gallery
  • 0 Comments
  • iOS7 has slick, flat and circular switches that are used for select box-like elements that has two options.

    Switchery is a JavaScript library, that doesn’t require any JS  frameworks, that can convert select boxes into such interfaces.

    The style of the switches can be customized easily, they support the “disabled” state and the effect speed can be changed as well.

    Switchery

  • Tags:
  • Filed under: Forms, Gallery, Goodies, MIT License
  • 0 Comments
  • Summernote is a simple, clean and flexible WYSIWYG Editor that is built on top of jQuery and Bootstrap.

    It supports Bootstrap’s both active versions (2 and 3) and has keyboard shortcuts for all major tasks.

    Summernote WYSIWYG Editor

    There is a powerful API which provides lots of customization options in means of design (width, height, active items..) and functionality.

    The project also has integration samples for major scripting languages or frameworks (PHP, Ruby, Django, Nodejs).

    It is usually not easy to present “menus that are few levels deep” in a user-friendly way. And, that’s specially hard for cross-platform layouts.

    Multi-Level Push Menu is a jQuery plugin that provides a very good solution to such menus.

    Multi-Level Menu jQuery

    It has support for unlimited levels, works cross browser/platform and makes things much easier for touch devices with swipe gestures.

    The menu can be set to next from left-to-right or right-to-left and all works with a simple markup (unordered lists).

    Smartimage, a cloud-based brand image management application (that was featured before at WRD), now has new features offering a more powerful, visual experience.

    The application helps companies to manage + share images and other visual content that workgroups and small businesses use everyday for events, promotions and brand communications.
    Besides all the core features like auto-conversion to popular formats and sizes, sharing/embedding and public/private galleries, there are now features like:

    • Custom image gallery options – Users can now choose which display and action features to enable for each collection including on/off switches for downloading and sharing files.
    • Embeddable image gallery carousel – Images can be displayed in a stunning super-sized carousel or elegant thumbnail gallery.
    • Robust digital imaging – Dynamic resizing allows Smartimage to host your images and easily display them on other web pages while maintaining their quality.
    • Updated user interface (UI) – A cleaner interface puts the focus on the user’s brand and high-quality images.
    • Faster speeds globally – Everywhere in the world, Amazon’s CloudFront Content Delivery Network (CDN) provides faster upload and download speeds.

    Smartimage now offers more control and attractive, dynamic ways of presenting and sharing high quality content, while emphasizing simplicity.

    An API is also in the roadmap of Smartimage which will allow integrating it further. P.S. The app offers a full set of features for getting the most out of these assets and you can find the complete list here.

    When developing with Xcode and Objective-C, it is usually hard and time-consuming to create animations.

    Canvas is a project that makes adding good-looking animations easy for iOS apps.

    Canvas For iOS

    With almost no coding, effects like fade, zoom in/out, slide, bounce, pop, shake and more are available for use.

    The project is not only about animations but currently comes with a “custom font” component and plans to add ones like parallax, sticky headers and various others.

    Elegant Themes, a well-known WordPress themes company with high-quality resources, has just released an extraordinary WordPress theme.

    It is called Divi and it is probably the most flexible WordPress theme ever; in means of design and functionality.

    Elegant Themes - Divi

    The theme has a unique drag ‘n’ drop builder that allows you to add sections, rows, columns or widgets and design the layout.

    Into any row or column, you can insert the built-in modules like text, image, slider, pricing table, contact form, tabs, portfolio and even shop.

    Each module comes with its own options and, optionally, their appearance can be customized by injecting custom CSS.

    Simply you can create countless number of layouts with Divi and, whatever you create, it is responsive, which is awesome.

    Divi

    There are multiple pre-built layouts to get started quickly. These include homepages for business, commerce, portfolio and blog.

    Also, Divi comes with a contact page, a project case study, a blog, portfolio, and shop as well.

    You can watch this video below to learn more about it and also read more about it in Elegant Themes’ Blog.
    Read the rest of this entry »

    Using footnotes in web pages and presenting them nicely is usually a difficult job.

    Bigfoot, a jQuery plugin, not only eases but also beautifies the footnotes in web pages.

    Bigfoot jQuery

    It auto-detects the footnote link + content, converts the link into a button and displays the footnote content inside a popover when clicked.

    The script adapts well to responsive layouts and there are options provided to customize its functionality.

    We are used to controlling/navigating websites with mouse, keyboard and “touch” afterwards.

    Voix.js is a JavaScript library that allows us to add another layer to controlling them which is “voice”.

    Voix.js

    It has functions to start and stop listening through the microphone and we can set events to be fired when a given keyword is detected.

    The library is pretty easy to use and it currently works in Chrome.

    Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com