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

Posts Tagged ‘Responsive’

For responsive layouts, we may want to trigger different JavaScript codes depending on the screen size, platform or browser.

Simple State Manager is a lightweight and easy-to-use JavaScript State Manager for responsive websites.

It doesn’t require any JavaScript frameworks and a perfect companion for handling layout-specific code in a clean way.

Simple State Manager

You can define the breakpoints and pack all the JavaScript to be executed on that breakpoint. Once another breakpoint is reached, SSM disables all the previous custom code and triggers new ones (so you don’t have to).

The manager comes with a complete API, a debugger and plugin support for extending further.

Sometimes, using breakpoints in @mediaqueries are not enough and we also declare them (for further customizations) in JavaScript as well.

Unison.js is a tiny script (<1kb minified, gzipped) that enables us to declare breakpoints only once and use them both in JavaScript and markup.

Unison.js

It requires a preprocessor like SASS, LESS or Stylus to function. And, behind the scenes, it uses the font-family property on the page’s head and title tags to store information.

There is also a debug feature which prints the breakpoints to see them easier.

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.

Allofthelights.js is a jQuery plugin that can change the opacity of the whole webpage but leave the video player.

This is for helping the user to easily focus on the video and there is built-in support for YouTube, Vimeo,  DailyMotion.. and custom players can be added too.

Allofthelights.js

It works with multiple players on the same page and supports responsive layouts/players with no issues.

The animation speed, background color and opacity can all be customized an callback functions exist.

mightySlider is a premium jQuery plugin that provides everything you need to build an awesome slider.

The plugin can be used for simple-to-advanced scenarios like a slideshow, gallery, content-rotator, carousel, video gallery and more.

mightySlider

It adapts well to responsive layouts (down-to-mobile) and works in all major browsers including mobile (there is touch support).

mightySlider is SEO-friendly with a semantic markup and deep-linking which makes each slide bookmarkable as well.

Any type of content can be displayed, vertically or horizontally, and it can even pull content from 500px, Flickr and Instagram.

mightySlider - Video

With the help of a powerful API (and detailed docs), mightySlider‘s functionality can be completely customized. Also, a slider generator exists for performing this customization easily.

When it comes to browsing through the slides, there are all the options on the table: prev-next, bullet-navigation, keyboard and touch.

Some other features of the plugin are auto-play, native fullscreen mode, smart lazy loading and the ability to use multiple instances on the same page.

mightySlider Carousel

GPU-accelerated CSS3 transitions are used and it is optimized for a smooth experience with max performance.

The slider is priced $12 and it is definitely worth what it offers in exchange.

There are always new ideas and approaches for anything related to web development and the same goes for responsive layouts.

ResponsiveComments is a client-side solution for conditional loading in responsive web design.

ResponsiveComments

It uses the data attributes for defining the breakpoints and the HTML comments for hiding the content to be displayed on a defined screen-size.

The approach comes with pros and cons where the biggest advantage is “being a quick solution, easier JavaScript manipulation” and the major disadvantage is the HTML-bloat.

Slippry is a jQuery image gallery plugin for that has modern features.

First of all, it uses HTML5-CSS3 markup and works well with responsive layouts (optional).

It can be styled with Sass or CSS and has multiple transition options including Ken Burns effect.

Slippry - jQuery Gallery

The slider can be set to auto-slide, display captions and has both prev-next + bullet navigation controls.

There are also callbacks for major events and multiple examples + a detailed documentation is provided.

We used to see lots of CSS frameworks for website layouts but it is hard to find one for e-mails.

Ink, by Zurb, fills that gap by simplifying the creation of HTML e-mails that look the same on all major e-mail clients.

The framework includes the styles for a table-based grid, buttons, panels, retina images and more.

E-mail CSS Framework

Once the e-mail is ready, you can use the web-based Inliner tool to get all styles inline.

And, to get started quickly, take a look at the ready-to-use e-mail templates of Ink.

There are many jQuery slideshow plugins out there (make sure you check the Gallery section) and it is usually hard to decide which one is better.

Actually, sometimes, it is not about being better but being a good fit for the job as each gallery has various differences from another.

jQuery SlideMe! Plugin

SlideMe! is another solid option which is responsive and supports both limited or full screen views.

It can be used vertically or horizontally, makes use of CSS3 transitions and has support for pagination.

There are methods to control the slider (prev, next..), callbacks for each of them and much more.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com