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

Posts Tagged ‘Responsive’

Glide.js is a lightweight (4.5kb minified) jQuery plugin for creating sliders.

It has completely customizable OOCSS markup and uses CSS3 transitions but has fallback to JavaScript.

The slider is responsive, it’ll adapt well to all devices and comes with touch support.

Glide.js

You can navigate through the items with keyboard, swipe events or with the help of the bullet and arrow menus.

Glide.js also has a public API that supports all its events (play, pause, next, prev, etc.).

FerroSlider is a jQuery slider for creating full-page sliders (or content/image sliders) of almost any type.

The contents can be placed in a flexible way, horizontal + vertical, and the plugin will simplify browsing through them easily.

FerroSlider

It uses CSS3 transitions for a good performance, works well with responsive layouts and works on mobile too.

The plugin has lots of customization options, has ready to use controls for navigation (arrow, bullet..)and can load content via Ajax.

Layers CSS is a lightweight CSS framework that doesn’t emphasize any designs but handles the main structure.

It has support for responsive layouts with fluid grids and simple classes are used for dealing with them.

Layers CSS

There are styles for forms, tables, lists and more but no colors or rounded-corners, customization is totally up to you.

Layers also comes with handy “everyday-use-styles” for clear, floats or hiding.

There are lots of scrolling plugins for jQuery and various good ones were shared at WRD.

Scrolld is another alternative that 3 to you when it comes to customizing the functionality.

jQuery Scrolld Plugin

It focuses on providing a pixel-perfect scrolling experience for dynamic and/or responsive layouts. And, mobile is supported too.

There are lots of built-in easing methods and options like “speed, distance from elements and more”.

Grid Forms is a JavaScript-CSS framework that aims to ease data entry.

It allows us to create printed-like forms that are perfectly placed on a grid and occupy less space.

Grid Forms

The framework comes with ready-to-use styles and they can also be customized with Sass.

Created forms are responsive and use a simple HTML structure.

Responsive Wireframes is a free and web-based tool for quickly creating wirefames for any project.

It enables us to insert elements, style them (color, opacity), add text and also resize if wanted.

Responsive Wireframes

These elements can be re-positioned with drag ‘n drops and the work can be saved for future reuse.

The tool is focused on responsive layouts as we can define multiple viewports and decide how each element will look on different viewports.

This again work by positioning + resizing each element for each viewport and simplifies the sharing of “responsive ideas” a lot.

For responsive layouts, we usually define the breakpoints and use @media-queries to apply different styles when needed.

Responsive Elements, a jQuery plugin, makes this process easier for the elements used in a web page.

The plugin adds classes (like gt100 lt150 lt200 where gt refers to “greater than” and lt refers to “lower than) to the elements which tell us “how big exactly the size of each element is“.

Responsive Elements

And, using these pre-defined classes, we can create styles for each scenario.

The range of the classes (from x to y pixels) and the interval of them (create classes each z pixels) can be defined too.

Semantic is an exciting new front-end framework that comes with a set of specifications for sharing UI elements between developers.

The vocabulary used (for classes and IDs) is much clear compared to alternatives which lowers the learning curve.

Semantic UI

There are styles for many HTML elements, UI elements and scenarios (buttons, forms, tables, accordion, navigation, commenting..).

LESS is used as the CSS pre-processor and Semantic is currently in a pre-release version but planned to be improved with much more stuff.

There are many different solutions for creating Pinterest-like, dynamic-column layouts.

Salvattore is another good one that comes with an important difference: it is not configured in JavaScript but in CSS.

It is again a JavaScript-powered solution but doesn’t require any frameworks.

Salvattore

The number of columns are mentioned in CSS and it is pretty easy to define different numbers for different devices using @media queries.

And, Salvattore works on almost all modern browsers (IE9+).

Intention.js, created by Dow Jones, is a jQuery plugin for easily developing responsive layouts.

The plugin reduces the need for CSS media queries and provides a highly-flexible solution for restructuring HTML.

It has 3 basic manipulations, attribution, class and placement, where they can all be set with HTML attributes.

Intention.js

There are ready-to-use settings for width thresholds, touch devices, highres displays and a fallback which can be totally customized.

Intension.js is well-documented and supported with lot of examples.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com