Posts Tagged ‘Responsive’

Mobile responsive design is one of the greatest achievements in recent web design history. A very popular responsive technique is the hidden drawer sliding navigation menu. This can be found in smartphone applications but has also grown into a popular choice for web development. In this post I’ve organized ten free plugins that you can use to create quick & easy sliding navigation menus.

Shifter

shifter jquery sliding menu plugin

Read the rest of this entry »

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.