STYLE SWITCHER

Jquery

Responsive Facebook Like Box

Responsive Facebook Like Box

Code
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>

<div id="container" style="width:100%;">
<div class="fb-like-box" data-href="https://www.facebook.com/adobegocreate" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
</div>

<div id="fb-root"></div>
<script>
/*
* REMEMBER TO CHANGE TO YOUR APP ID AND CHANGE data-href TO SUIT YOU
*/
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=ADD YOUR APP ID HERE";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$(window).bind("load resize", function(){
var container_width = $('#container').width();
$('#container').html('<div class="fb-like-box" ' +
'data-href="https://www.facebook.com/adobegocreate"' +
' data-width="' + container_width + '" data-height="730" data-show-faces="false" ' +
'data-stream="true" data-header="true"></div>');
FB.XFBML.parse( );
});
</script>

 

</body>
</html>

More
Tabella.js – Touch Enabled Responsive Tables

Tabella.js – Touch Enabled Responsive Tables

Tabella.js is a pure javascript, touch enabled, responsive table plugin. Table header is fixed only when at least some part of the table is in the viewport.
Website
More
Macy.js – Lightweight JavaScript Masonry Layout Library

Macy.js – Lightweight JavaScript Masonry Layout Library

Macy.js is a lightweight, dependency-free, 4kb masonry layout library, designed for a hassle-free configuration.

Features

  • User definable breakpoints
  • Works with CSS transitions
  • Simple event API
  • No dependencies
Website
More
Lazy Line Painter

Lazy Line Painter

A jQuery plugin for SVG path animation

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files.

Website
More
18 web design trends for 2017

18 web design trends for 2017

As we look forward to 2017 — a year that hopefully won’t be plagued by the passing of so many of the world’s greatest artists and performers — the big question on every designer’s mind has to be: what will define design in 2017?
So with that in mind, I decided to ask Webflow’s own designers what trends they think will dominate the world of digital design in 2017. (And wrote up a little commentary on their thoughts.) First, let’s hear from Webflow’s Chief Design Officer, Sergie Magdalin.
Sergie Magdalin, Chief Design Officer at Webflow
‍Sergie Magdalin, Chief Design Officer at Webflow

Layouts that let content shine

The arrangement of design elements within a given structure should allow the reader to easily focus on the message, without slowing down the speed of his reading

The last few years have seen a sea change in how people view design’s role in business. Design has shifted from a late-in-the-process “optimization” stage where designers swooped in to sprinkle on some “pretty” like mystical fairy dust to a real competitive advantage.

It’s been an amazing evolution to watch.

And a fascinating element of that evolution has been the shift back toward a focus on content: the meat on the bones of the web. Designers worldwide have realized that people visit websites for their content — whether it’s raging tweetstorms, thoughtful long-reads, or the latest “user-generated” meme — and that design’s ultimate role is to present content in an intuitive, efficient, and “delightful” way.

That’s one reason for the shift away from skeuomorphic design toward “flatter,” more minimalist design approaches, as seen in Google’s Material aesthetic, and really, across the web and our various devices.

Of course, as Newton’s third law states, for every action, there’s an equal and opposite reaction. Many designers feel that the flat design trend has taken the “soul” out of design. We expect to see this conversation continue across 2017, but look forward to it becoming a productive dialogue that never loses sight of the heart of our design work: the content.

Better collaboration between designers, and between designers and developers

As design has taken a greater and more influential role in shaping businesses, more and more attention has been paid to designers’ collaboration with both their fellow designers, and their developer colleagues.

The emphasis on designer collaboration has arisen in part from the massiveness of the web and mobile apps we’re building these days. Gigantic platforms like Google, Facebook, Twitter, and LinkedIn require not only huge design teams working on disparate aspects of the platform, but also better ways for designers to stay on the same page — and that means more collaboration, and better communication.

All kinds of tools have arisen to help facilitate that collaboration, from the shared templates and dashboards in Webflow’s Team plan to the real-time, shared canvas of Figma — and you can bet 2017 will bring both improvements to those platforms, and all-new options.

On the designer-developer collaboration front, lots of attention has been focused on the all-important handoff stage. Where designers used to hand off massive packages of static images and specs, they’re now sharing dynamic visualizations enabled by tools like InVision, Marvel, and UXPin — or doing one better by exporting real, production-ready code from Webflow.

Read Article
More
Responsive Google Plus Widget

Responsive Google Plus Widget

<div class="gp-wrap" id="gp-wrap">
<div class="g-page" data-href="https://plus.google.com/102226233421872956936" data-rel="publisher"></div>
<script type="text/javascript">
(function() {
// this guy right here
document.getElementsByClassName('g-page')[0].setAttribute('data-width', document.getElementById('gp-wrap').clientWidth);
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div> 
More
Plupload – JavaScript API for Building File Uploaders

Plupload – JavaScript API for Building File Uploaders

Plupload is JavaScript API for building file uploaders. It supports multiple file selection, file filtering, chunked upload, client side image downsizing and when necessary can fallback to alternative runtimes, like Flash and Silverlight.
Website
More
DisplayJS – Simple JavaScript Framework for Building Ambitious UIs

DisplayJS – Simple JavaScript Framework for Building Ambitious UIs

DisplayJS is a simple JavaScript framework for building ambitious UIs. DisplayJS helps you to efficiently render the DOM.
Website
More
Markvis – Make Visualization in Markdown

Markvis – Make Visualization in Markdown

Markvis is a plugin to generate charts in markdown with few lines of code.
Website
More
Flubber – Tools for Smoother Shape Animations

Flubber – Tools for Smoother Shape Animations

Flubber is a library to provide a best-guess interpolation for any two arbitrary shapes (or collections of shapes) that results in a reasonably smooth animation.
Website
More