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

Posts Tagged ‘Responsive’

There are pretty standard ways to approach navigation when it comes to responsive layouts and, previously, responsive jQuery menu solutions were shared at WRD.

FlexNav is another jQuery plugin for easily handling menus in responsive layouts and it does that well for complex ones too.

FlexNav jQuery Plugin

The plugin has support for unlimited sub-menus that work similarly in both desktop and mobile layouts.

It has no-JS fallback, works with keyboard-tabs too (for accessibility) and touch-friendly.

There are various jQuery plugins for creating Pinterest-like dynamic grid layouts.

jQuery.Shapeshift is a strong alternative to them with an an extra touch: the items can be drag ‘n’ dropped (uses jQuery UI).

jQuery Shapeshift Plugin

The drag ‘n’ drop doesn’t effect the grid negatively as the grid auto-fills the gaps when needed.

It also works on touch devices and responsive layouts.

The plugin comes with lots of options to set the margins, enable/disable drag-drops, customize animation and much more.

TopCoat is an open source library of user interface elements that are built without any JavaScript.

The elements use clean, standards-compliant HTML-CSS and all of them are created with responsive layouts in mind.

The library provides 2 style guides, one for desktop and the other for mobile where all elements are showcased inside these guides.

UI Library - TopCoat

Using TopCoat is very straightforward, just include the CSS file, use its HTML structure and customize however wanted.

For anyone not using any front-end frameworks or looking to improve their frameworks, TopCoat is a good resource to get started quickly while developing web apps.

Moot is a fresh and free web service for instantly creating a discussion environment on any web page.

It is setup so quickly. The service provides you a unique HTML code and, once embedded into any web page, Moot appears.

Btw, Moot loads the full HTML and it is no IFRAME. This makes all types of customizations possible. You can apply CSS or even change interactions via JS.

Hosted Forums And Comments

The service provides a single feed of posts, users can follow any number of topics, view other online users or make searches quickly.

It can be a flat or threaded discussion, works in real-time (no refresh required), has an easy-to-use control panel and supports responsive layouts.

It is kinda easy to find high-quality open source web apps in PHP or JavaScript. But that’s a little harder for ASP.NET.

JabbR is one of those treasures, it is an open source ASP.NET app for real-time chats.

The app uses SignalR library for the communication and allows users to register/sign-in with their e-mails or via social auth (Facebook, Google, etc.).

Open Source ASP.NET Chat - JabbR

Users can define an avatar for themselves and communicate in a chat room (multiple chat room support with a tabbed interface) or privately.

It can display inline content from multiple sources like YouTube, Vimeo, Twitter, imgur, Google Docs and much more.

There are multiple notification types so that you also keep up with the conversation (Chrome pop-ups, live Twitter mentions or audio).

JabbR support Emojis, has keyboard shortcuts and IRC-like commands. Also, it has a responsive layout.

On small screens, displaying a button/icon that can show/hide menu items in a single column is a very common method for responsive navigations. Even the icon used is pretty standard.

Responsive-Nav, a JavaScript plugin, simplifies creating such responsive menus with a lightweigt footprint (1.6kb minified-gzipped).

Responsive Nav

It makes use of touch events and CSS3 transitions for a great performance and works on screen readers + with a JavaScript-disabled state.

Also, the plugin is standalone and has callbacks for the init, open and close events.

Bootstrap and Foundation are the most widely-used and complete front-end frameworks out there.

However, there are other alternatives in the field. Usually not as complete as them but, sometimes, a simpler solution is what we may prefer.

IVORY Front-end Framework

IVORY is a lightweight front-end framework that can handle responsive layouts from 320px to 1200px widths.

It has a 12-column grid and comes with styles for typography, forms, buttons, tables, pagination, toggle-switches, tooltips, accordion, tabs and more.

Hidden side menus are a good way of enabling users to view the navigation options on request. And, they are perfect for responsive layouts as they save space.

Sidr is a jQuery plugin for creating “hidden side menus” on-the-fly.

Sidr - jQuery Plugin

It can be set to be displayed at right or left, a single page can have multiple side menus and offers multiple methods (existing or remote content) for loading the content.

For responsive layouts, a Sidr menu can be attached to a button (that is displayed for specific screen sizes with media -queries) and it’ll be a very handy navigation solution for small screens.

RazorFlow is a PHP framework for easily creating dashboards that work well on all major devices and browsers.

It works by simply inserting a single PHP file into any app, feeding it with data and choosing the output type.

RazorFlow PHP Dashboard Framework

The outputs can be charts (many chart types are supported), data grids or items that display a single value.

They are all interactive, have support for filtering the data and, like mentioned, they are responsive.

RazorFlow can connect to MySQL, PostgreSQL, or SQLite databases.

Swipebox is a jQuery lightbox plugin that has support for touch events and works well in responsive layouts.

It can display a single item or a group of items (gallery) where they can be browsed with swipe gestures or keyboard too.

jQuery Swipebox

The plugin mostly uses CSS transitions and has jQuery fallback for unsupported browsers.

Captions can be displayed with ease and few options exist for customization (like the appearance delay of the action bar)

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com