Freebie: Responsive And Mobile Icon Set (100 Icons, PNG, PSD)

Go to Source

This responsive and mobile-themed icon set, designed by the folks behind Iconshock91 and Designshock102, consists of 100 individual icons merging outlined as well as flat styles, all vectors built in Photoshop, in four transparent PNG image sizes and available in two color versions: a limited cold palette and a warm colorful one. The vector editable source files are included.

Please note that this icon set is licensed under a Creative Commons Attribution 3.0 Unported3. You may modify the size, color or shape of the icons. No attribution is required, however, reselling of bundles or individual pictograms is not cool. Please provide credits to the creators and link to the article in which this freebie was released if you would like to spread the word in blog posts or anywhere else.

warm-colors-preview-opt4
(Large preview of icon set5)
cold-colors-preview-opt6
(Large preview of icon set7)
colors-icons-preview-opt
cold-icons-opt
colors-icons-closer-preview-opt
cold-icons-closer-preview-opt

Download The Icon Set For Free

Insights From The Designers

“This is an iconset conceived to fill up the void in responsive-design-related icons, beyond the usual representation of three devices with the same layout that’s usually presented more like a whole illustration. Considering the minimum level of detail required, and the design trends of the times, the style opted for was a mixture of outlined and flat, beyond simply rendering stroked and filled icons, giving each color area intention and meaning, as well as crafting two colorschemes, one with full warm colors and other with a cold reduced palette. Finally, to provide a complete and articulated pack, icons for mobile design, use and interaction were added, such as gestures and connection options.”

A big thank you to Juan Pablo Sarmiento — we sincerely appreciate your time and efforts. Keep up the brilliant work!

(il)

Footnotes

  1. 1 http://www.iconshock.com/
  2. 2 http://www.designshock.com/
  3. 3 http://creativecommons.org/licenses/by/3.0/
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/11/warm-colors-large-preview-opt.jpg
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2014/11/warm-colors-large-preview-opt.jpg
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2014/11/cold-colors-large-preview-opt.jpg
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2014/11/cold-colors-large-preview-opt.jpg
  8. 8 http://provide.smashingmagazine.com/smashing-freebie-responsive-mobile-icon-set.zip
  9. 9 http://www.iconshock.com/
  10. 10 http://www.designshock.com/

The post Freebie: Responsive And Mobile Icon Set (100 Icons, PNG, PSD) appeared first on Smashing Magazine.

Getting started with Foundation for apps

Go to Source

So, there’s a new version of Foundation…

Not long ago, we told you all about how to get started with Foundation 5. Now there’s a new version out; not “Foundation 6” but Foundation for Apps, and it’s going to be huge.

That Foundation 5 is a powerful and flexible framework, there is no doubt. It can be used for content-driven websites, apps, almost anything you can think of, though it might take some work and customization. There are, however, layout and design conventions specific to apps. Also, apps are often developed for mobile browsers, which support newer technologies.

In short, the classic Foundation framework, while flexible enough to make apps with, was created as a tool for many purposes. App developers may want something that caters a bit more specifically to their needs, and Zurb has provided exactly that.

Installation & features

Foundation for Apps is not the old Foundation with some added features. It’s a completely different product. It’s designed from the ground up do be web developer-friendly. Indeed, while you don’t need to be a developer to use it, it helps to know a little bit about setting up development environments.

This is because you don’t just unzip this framework and drop it in your apps folder. It’s based on tools like Angular.js](https://angularjs.org/) and Sass; it comes with its own mini-server which will compile and serve your projects for you on the fly. This means that you have to have Node.js, Ruby, and a few other things installed. You also have to install the whole thing from the command line. Developers working on Linux and OSX won’t have any problems getting set up. It’s a bit more troublesome for aspiring nerds like me who use Windows.

Once you get past these initial hurdl… ahem I mean, embrace this new way of doing things, you’ll see some awesome stuff under the cover, including:

  • A grid based on Flexbox and designed for apps. It includes support for laying out your “screens” vertically and horizontally, scrolling inside each section, and more;
  • tons of UI components;
  • Angular.js; it’s all the rage right now;
  • a template and component-based file structure;
  • Motion UI: Zurb’s new animation library designed specifically for app user interfaces.

Getting started

One of the advantages of frameworks in general is that they’re perfect for making quick prototypes. Once you’ve installed this thing, and have started the mini server, it’s time to put your ideas together into a live, interactive interface that doesn’t do anything. Yet.

For this article, I created a dead-simple “contact management page” that would have any client begging for more details, and maybe a change of layout:

Getting started with Foundation for apps

In your app’s directory, you’ll find several folders and files. For the purposes of pure front-end development, you only need to worry about the “client” folder. That’s where all of your source files go. In there, the following folders and files are set up by default:

assets
- js
- - app.js
- scss
- - _settings.scss
- - app.css
- templates
- - home.html
index.html

The app.scss and app.js files are where you put all your custom Sass and JS, respectively. _settings.scss is just that: the file where you can override a lot of the default styles. The code is properly commented, and it’s easy enough to find what you need. You can also use this file to completely disable different parts of the CSS framework, so they won’t be included when your app is built.

index.html is the file that “make it all happen” by pulling in other components, app screens, and so on. home.html is the content that you’ll see when you first go to http://localhost:8080, once the mini-server is running. It’s also where I started working.

The grid

The first thing you’ll have to get used to is the grid itself. It uses Flexbox, so things work quite a bit differently, but the classes will be familiar. To create two blocks/columns of equal width, this is all you need to do:

<div class="grid-block">
    <div class="grid-block"></div>
    <div class="grid-block"></div>
</div>

Yup. That’s it. If you want to put actual content inside those two columns, you’ll need to do it differently. This is what the columns in my prototype look like:

<div class="grid-block">
    <div class="grid-block">
        <div id="side" class="small-12 medium-4 grid-content medium-order-2"></div>
        <div id="contacts" class="small-12 medium-8 grid-content medium-order-1">
    </div>
 </div>

You’ll notice that you always seem to need two elements with grid-block as classes to make things align properly. You might also notice that I’ve manually specified column widths. If you don’t, all blocks will expand to fill all available space, remaining equally wide.

Components

Also included are a large number of components from classic Foundation. You have your classic callouts and modal windows, alert boxes, form styles, button styles, tabs, and more. The typography is solid, and there’s also a limited icon set (all SVG) included for use in buttons, menus, and so on.

I’m particularly fond of the panels, which are basically blocks of content hidden off-canvas, which can be called onto the screen from any side.

I also like the “cards”. Cards are just simple rectangular objects meant to separate content. I used them for the list of contacts in the screenshot above. For the full list, see the documentation.

Go for it.

What are you waiting for? Get your command-line on and start playing with this. Even if you’re not an app developer, it’s good to know how to work in this environment, especially if you work with actual programmers.

RETRO MANIA: 50 Vintage Text Effects – only $10!
Getting started with Foundation for apps

Source

Chartist.js, An Open-Source Library For Responsive Charts

Go to Source

The list of charting libraries for the web is already quite long, and you might ask yourself why we would need to make it any longer. Whenever you need to develop an application’s dashboard, embed some usage statistics or simply visualize some data, you will find yourself looking for a charting library that fits your needs.

Chartist was developed for a very particular need: to create simple responsive charts. While other charting libraries do a great job of visualizing data, something is always missing to satisfy this simple yet demanding need.

In this article, we’ll show you how to use Chartist to create your own beautiful responsive charts. You’ll learn some key concepts of Chartist, how to easily extend it and also some advanced features, like responsive configuration overrides and the animation API.

Chartist guy pointing at a chart1
Chartist guy pointing at a chart

Your Individual Setup

You can integrate the Chartist library in your project in many ways. It’s available from Bower and NPM but also directly from a content delivery network (CDN). It’s also exposed as a CommonJS module, as an AMD module or just in the global window object. You can decide on the best way to integrate the library according to your project’s setup.

Chartist currently uses a Universal Module Definition2 wrapper, to satisfy a broad range of use cases. Instead of using Chartist directly from the Chartist namespace in the window object, you could use module loaders, like RequireJS, or bundle your charts into your application with Browserify or webpack.

Bower

To install Chartist as a front-end dependency using Bower, simply execute the following command in your project’s folder:

bower install chartist --save

NPM

If you prefer NPM as a repository or if you’re using a CommonJS browser bundler like Browserify or webpack, then you’ll want to install Chartist using NPM:

npm install chartist --save

CDN

Another quick way to get started with Chartist is to use a CDN. The folks at jsDelivr do a fantastic job of keeping a huge number of libraries up to date with their custom load balancing3, and they do it all for free. To use Chartist’s resources from a CDN, include the following in your HTML:

<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<link href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />

Create Your First Chart

Once you have chosen the method that fits your needs, you can start crafting your first chart. Over the course of this article, we’ll use JSBin4 to create our charts. JSBin is a great collaborative web development debugging tool, and Chartist is available directly in the “Add library” menu. If you’d like to try out Chartist quickly, I’d recommend using JSBin.

Let’s start with a simple line chart. For this, we’ll first add a container element to our body with the class ct-chart.

Simple line chart with three series5
Simple line chart with three series
<!DOCTYPE html>
<html>
<head>
  <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
  <link href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
  <title>Chartist | Simple line chart</title>
</head>
<body>
  <div class="ct-chart"></div>
</body>
</html>

Now we can initialize a line chart on the container with only a few lines of JavaScript. Let’s create three series, with five values each. We’ll also set a list of labels for the x-axis. As a second argument, the Chartist.Line constructor accepts an options object. Here, we can specify a fixed width and height for our chart.

new Chartist.Line('.ct-chart', {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  series: [
    [2, 3, 2, 4, 5],
    [0, 2.5, 3, 2, 3],
    [1, 2, 2.5, 3.5, 4]
  ]
}, {
  width: 320,
  height: 240
});

Edit on JSBin6

Responsive Containers With Intrinsic Ratios

In the example above, we used a fixed width and height for the chart. This is not always desired, and in responsive design we should keep our elements fluid and not think in fixed dimensions.

Chartist uses its own classes to set containers with fixed aspect ratios (intrinsic ratios). Usually, this is a technique applied to responsive videos and iframes, and it uses the intrinsic ratio CSS trick7 to establish a fixed ratio container. With the implementation in Chartist8, you can even set the width of a container while preserving the aspect ratio.

Let’s use one of the generated responsive container classes in Chartist to size our chart. I’ve picked ct-golden-section, but you can choose any from the list of generated container classes9. When using the Sass version of Chartist, you can also generate your own fixed-aspect-ratio containers easily.

<body>
  <div class="ct-chart ct-golden-section"></div>
</body>

Because we are now specifying a container with a fixed aspect ratio on our chart, we no longer need to rely on fixed dimensions when initializing our chart. Let’s remove the width and height in our configuration.

new Chartist.Line('.ct-chart', {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  series: [
    [2, 3, 2, 4, 5],
    [0, 2.5, 3, 2, 3],
    [1, 2, 2.5, 3.5, 4]
  ]
});

Edit on JSBin10

Now we have a chart that responds to changes in media. Try resizing the output panel on JSBin to see how the chart adapts to changes in window size.

Advanced Configuration

One of Chartist’s core principles is a clean separation of concerns via standard web technologies. This includes applying all appearance-related settings with CSS. Also, a number of settings allow you to control the behavior of your chart. These settings are applied using JavaScript and can be passed to your chart during initialization.

Let’s create a simple bar chart that visualizes some data for weekdays.

A simple bar chart with two series11
A simple bar chart with two series
new Chartist.Bar('.ct-chart', {
  labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
  series: [
    [2, 8, 2, 4, 5, 8, 10],
    [4, 5, 8, 2, 6, 3, 10]
  ]
}, {
  seriesBarDistance: 30,
  axisX: {
    showGrid: false
  }
});

Edit on JSBin12

In the options, we can control the distance of the bars and tell Chartist not to render the grid on the x-axis. For a complete list of options, you can always visit Chartist’s API documentation13.

By default, the labels on the x-axis are left-aligned. To make them center-aligned, we need to add a CSS style. We also want to change the bar’s width to 20 pixels.

.ct-chart .ct-bar {
  stroke-width: 20px;
}
.ct-chart .ct-label.ct-horizontal {
  text-align: center;
}

Edit on JSBin14

Already, we’ve got a nice-looking bar chart for large screens.

Responsive Configuration Override

The example above works nicely on desktop screens, but not on devices with tight screen resolutions. The bars are too wide, the labels too large and the names of the weekdays are written in full. Also, the distance of the bars needs to be adjusted.

Some of these changes can be done in CSS by modifying the bar’s width in a media query. But how do we go about applying different configurations in JavaScript? Chartist provides a mechanism for this purpose called responsive configuration override.

Let’s look at the previous example and rewrite it with a mobile-first approach. We’ll optimize our media queries for the content we’re working with, introducing a breakpoint at 300 pixels and another at 600 pixels.

.ct-chart .ct-label.ct-horizontal {
  text-align: center;
}
.ct-chart .ct-bar {
  stroke-width: 5px;
}
@media screen and (min-width: 300px) {
  .ct-chart .ct-bar {
    stroke-width: 10px;
  }
}
@media screen and (min-width: 600px) {
  .ct-chart .ct-bar {
    stroke-width: 20px;
  }
}

If we’d like to tailor our chart to a particular medium, we can use the responsive configuration overrides. We simply tell Chartist to inherit and override our configuration based on the same media queries in our CSS. Chartist uses window.matchMedia15 to implement an inheritance in our settings similar to what CSS does with our styles.

Bar chart with responsive configuration overrides16
Bar chart with responsive configuration overrides

The following example uses labelInterpolationFnc to pass a function that enables us to interpolate or even replace the label’s original value for the given axis. This means we can control how the weekdays’ names are displayed on the x-axis.

new Chartist.Bar('.ct-chart', {
  labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
  series: [
    [2, 8, 2, 4, 5, 8, 10],
    [4, 5, 8, 2, 6, 3, 10]
  ]
}, {
  seriesBarDistance: 6,
  axisX: {
    showGrid: false,
    // Only return first letter of weekday names
    labelInterpolationFnc: function(value) {
      return value[0];
    }
  }
}, [
  // Over 300px, we change the bar distance and show the first three letters of the weekdays
  ['screen and (min-width: 300px)', {
    seriesBarDistance: 15,
    axisX: {
      labelInterpolationFnc: function(value) {
        return value.slice(0, 3);
      }
    }
  }],
  // Over 600px, we increase the bar distance one more time and show the full weekdays
  ['screen and (min-width: 600px)', {
    seriesBarDistance: 30,
    axisX: {
      labelInterpolationFnc: function(value) { return value; }
    }
  }]
]);

Edit on JSBin17

In the example above, you can see how easy it is to create a chart that works on both mobile and desktop, while maintaining a clean separation of concerns.

Styling SVG With CSS

Styling inline SVG with CSS is easy and efficient because you’re able to reuse styles for different charts. You can include CSS classes that define the look and feel of your charts and that keep the logic separated from the appearance.

Here are some of the most useful CSS properties for styling inline SVG:

  • fill
    Sets the color of a shape’s fill. You may use RGBa.
  • stroke
    Sets the color of the outline around your shape.
  • stroke-width
    Sets the width of an outline.
  • stroke-dasharray
    Specifies a dashed stroke for an outline.
  • stroke-linecap
    Sets the line-cap stroke for the outline of a shape. This can be set to round, butt or square.

Check the SVG 1.1 specification for a complete list of SVG styling properties18.

A chart with custom CSS styling19
A chart with custom CSS styling

Let’s apply our new styling skills and create a line chart with three different looking series. We’ll use all of the above styling properties to give our chart a unique look.

.ct-chart .ct-label.ct-vertical,
.ct-chart .ct-label.ct-horizontal {
  color: rgba(255, 255, 255, 0.5);
}
.ct-chart .ct-grid.ct-vertical,
.ct-chart .ct-grid.ct-horizontal {
  stroke: rgba(255, 255, 255, 0.1);
  shape-rendering: crispEdges;
}
.ct-chart .ct-series.ct-series-a .ct-line {
  stroke: #4ECDC4;
  stroke-width: 10px;
  stroke-linecap: round;
}
.ct-chart .ct-series.ct-series-b .ct-line {
  stroke: #C7F464;
  stroke-width: 2px;
  stroke-dasharray: 5px 2px;
}
.ct-chart .ct-series.ct-series-c .ct-line {
  stroke: #FF6B6B;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-dasharray: 30px 5px;
}

Edit on JSBin20

If you play around with this example a bit, you’ll quickly see how easy it is to style SVG with CSS. Also, you might have noticed the shape-rendering: crispEdges style on the grid lines. While I haven’t included the shape-rendering property in the list of useful styling properties, you’ll find it quite handy in some situations. It allows you to give the browser some hints on how to render SVG. The values auto, optimizeSpeed, crispEdges and geometricPrecision are supported by the specification. Intended for performance control, this property is also handy for rendering certain shapes without anti-aliasing. In some charts, including the example above, making the grid lines look very crisp with the crispEdges value has a very nice effect.

CSS Animation Craziness

I’m a huge fan of animation… well, as long as it supports the content and conveys information to the user. It can mean the difference between a UX playing nicely and not. Google’s material design21 is a great example of functional animation design. However, for this article, we will not focus on functional animation, but instead go a bit crazy with the possibilities at our disposal. Browser support for animation of SVG properties is pretty stable now, and you can even animate the stroke-dasharray and stroke-dashoffset properties. Let’s enhance the previous example with some meaningful animation.

Animated chart using CSS animation22
Animated chart using CSS animation

Simply by using some CSS3, we are able to create some crazy animations in our chart.

@keyframes width-pulse {
  0% {
    stroke-width: 6px
  }
  50% {
    stroke-width: 14px;
  }
  100% {
    stroke-width: 6px;
  }
}
@keyframes dashoffset-seven {
  0% {
    stroke-dashoffset: 7px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}
@keyframes dasharray-craziness {
  0% {
    stroke-dasharray: 7px 2px;
  }
  80% {
    stroke-dasharray: 7px 100px;
    stroke-width: 10px
  }
  100% {
    stroke-dasharray: 7px 2px;
  }
}
.ct-chart .ct-label.ct-vertical,
.ct-chart .ct-label.ct-horizontal {
  color: rgba(255, 255, 255, 0.5);
}
.ct-chart .ct-grid.ct-vertical,
.ct-chart .ct-grid.ct-horizontal {
  stroke: rgba(255, 255, 255, 0.1);
  stroke-dasharray: 2px;
  shape-rendering: crispEdges;
}
.ct-chart .ct-series.ct-series-a .ct-line {
  stroke: #4ECDC4;
  stroke-width: 10px;
  stroke-linecap: round;
  animation: width-pulse 2s infinite;
}
.ct-chart .ct-series.ct-series-b .ct-line {
  stroke: #C7F464;
  stroke-width: 2px;
  stroke-dasharray: 5px 2px;
  animation: dashoffset-seven 200ms infinite linear;
}
.ct-chart .ct-series.ct-series-c .ct-line {
  stroke: #FF6B6B;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-dasharray: 30px 5px;
  animation: dasharray-craziness 10s infinite linear;
}

Edit on JSBin23

As you can see, styling and animating SVG using CSS is a lot of fun. If you’d like more information, I recommend the article by Sara Soueidan “Styling and Animating SVGs With CSS24.”

Animating With SMIL

CSS animation is a great way to inject some life into a chart. There are some things you can’t animate with CSS, though. If you want to animate individual parameters of an SVG element to morph a shape, then you would use the Chartist.Svg APIs to conveniently create SMIL animations.

SMIL is powerful, but the declarative API, which uses <animate> elements, can be confusing in its complexity. Chartist offers a high-level API that enables you to easily take advantage of SMIL animations in your charts.

The goal of Chartist is to simplify the handling of SMIL while preserving the semantics specified by the W3C. Chartist uses its own SVG manipulation library, which is accessible through Chartist.Svg. Similar to jQuery, it provides a wrapper object around real SVG DOM nodes, giving you some convenient methods to manipulate the underlying SVG. You can get a complete overview by browsing the Chartist.Svg API documentation25.

To animate an SVG element, you first need to obtain a wrapper object by passing an SVG node to the Chartist.Svg constructor.

var element = new Chartist.Svg(document.querySelector('#my-specific-svg-element'));

You can then call the animate function on your wrapped element with an animation definition object:

element.animate({
  opacity: {
    dur: 1000,
    from: 0,
    to: 1
  },
  x1: {
    dur: '1000ms',
    from: 100,
    to: 200,
    easing: 'easeOutQuart'
  },
  y1: {
    begin: 1000,
    dur: '2s',
    from: 0,
    to: 100
  }
});

This will create three SMIL <animate> elements, each of which contains the SMIL animation attributes specified in the definition objects. The Chartist animation API has a few particularities. The begin and dur (i.e. duration) properties may be specified as unitless numbers; Chartist will convert the numbers to milliseconds automatically. Chartist also supports an easing property in the animation definition object that is not directly supported by SMIL. The easing property allows you to specify an easing function from Chartist.Svg.Easing, which will be translated to a SMIL interpolation function.

Chartist handles SMIL animations in a special guided mode by default. The guided mode includes the following behavior, which makes handling and optimization easier for immediately triggered animations:

  • Before the animation starts (even when delayed with begin), the animated attribute will already be set to the from value of the animation.
  • begin is explicitly set to indefinite so that it can be started manually without relying on the document’s begin time (i.e. creation).
  • The animate element is forced to use fill="freeze".
  • The animation is triggered with beginElement() in a timeout, where the beginning of the definition object is interpreted in milliseconds. If no beginning is specified, then the timeout is triggered immediately.
  • After the animation, the element’s attribute value is set to the to value of the animation.
  • The animate element is then deleted from the DOM.

You can also disable guided mode by passing false as the second argument to the animate function.

Animating Chart Elements Using the Event API

Chartist provides a few events that you can use to intercept the creation process of charts. The draw events of Chartist get triggered each time a chart element is created in the DOM. Since we have the Chartist.Svg wrapper and all relevant data available in the event callback, this makes it a perfect spot to add our animations.

Chart with SMIL animations26
Chart with SMIL animations

This example looks more like a confetti party than a chart, but it should illustrate how easy it is to create custom animations. The example makes use of the Chartist event API and adds animations to points in a line chart.

var seq = 0;

chart.on('created', function() {
  seq = 0;
});

chart.on('draw', function(data) {
  if(data.type === 'point') {
    seq++;

    data.element.animate({
      x1: {
        from: data.x - 50,
        to: data.x,
        begin: seq * 80,
        dur: 800,
        easing: Chartist.Svg.Easing.easeOutQuint
      },
      opacity: {
        from: 0,
        to: 1,
        begin: seq * 80,
        dur: 300,
      }
    });
  }
});

Edit on JSBin27

Extensibility

Because Chartist uses inline SVG in the DOM, extending the core functionality is very easy. While SVG elements in the DOM have the same events as regular DOM elements, you can easily use the DOM library of your choice and add custom functionality to your chart’s elements.

Chart with custom tooltip28
Chart with custom tooltip

This example shows you how to add a simple tooltip to a chart using jQuery. When the user hovers over a data point, the tooltip should become visible and display the data value.

var $tooltip = $('<div class="tooltip tooltip-hidden"></div>').appendTo($('.ct-chart'));

$(document).on('mouseenter', '.ct-point', function() {
  var seriesName = $(this).closest('.ct-series').attr('ct:series-name'),
      value = $(this).attr('ct:value');

  $tooltip.text(seriesName + ': ' + value);
  $tooltip.removeClass('tooltip-hidden');
});

$(document).on('mouseleave', '.ct-point', function() {
  $tooltip.addClass('tooltip-hidden');
});

$(document).on('mousemove', '.ct-point', function(event) {
  $tooltip.css({
    left: event.offsetX - $tooltip.width() / 2,
    top: event.offsetY - $tooltip.height() - 20
  });
});

Edit on JSBin29

The example above uses regular DOM events to add a simple tooltip. You might have noticed the use of the ct:value attribute from the line chart’s point element and the ct:series-name attribute from the series group. Chartist has its own XML namespace, which it uses to expose some meta data to the SVG. This makes it easy to extract information from the DOM and use it for custom functionality.

Extending the Drawing Pipeline

The event system of Chartist is powerful and is a great tool to extend your chart with custom features. The following example uses the draw event of the line chart to replace the boring point elements with something smashing.

Chart with Smashing Magazine logo using Chartist draw event30
Chart with Smashing Magazine’s logo using Chartist’s draw event
var smashingImgTag = '<img src="http://media.mediatemple.netdna-cdn.com/wp-content/themes/smashing-magazine/images/smashing-windows-icon-70-70.png" style="width: 40px; height: 40px" alt="Smashing Logo" />';

chart.on('draw', function(data) {
  if(data.type === 'point') {
    var smashingFoob = data.element.parent().foreignObject(smashingImgTag, {
      width: 40,
      height: 40,
      x: data.x - 20,
      y: data.y - 20
    });

    data.element.replace(smashingFoob);
  }
});

Edit in JSBin31

In the example above, we’ve replaced each point element just after it has been drawn (inserted in the DOM tree) with a foreignObject that contains an image. A foreignObject allows you to embed HTML elements in an SVG. The Chartist.Svg API provides an easy and convenient way to create foreignObjects. For details on the Chartist.Svg API, visit the API documentation32.

Resources

Contribute

We are constantly looking for people to get involved. If you have some spare time and are interested in contributing, please grab an issue to work on or open a new one.

(vf, al, il)

Footnotes

  1. 1 http://gionkunz.github.io/chartist-js/
  2. 2 https://github.com/umdjs/umd
  3. 3 https://hacks.mozilla.org/2014/11/jsdelivr-and-its-open-source-load-balancing-algorithm/
  4. 4 http://jsbin.com/
  5. 5 http://jsbin.com/qalewi
  6. 6 http://jsbin.com/qalewi/edit?js,output
  7. 7 http://alistapart.com/article/creating-intrinsic-ratios-for-video
  8. 8 https://github.com/gionkunz/chartist-js/blob/develop/src/styles/chartist.scss#L4-L30
  9. 9 http://gionkunz.github.io/chartist-js/getting-started.html#creating-a-chart-using-aspect-ratios
  10. 10 http://jsbin.com/quyamo/edit?js,output
  11. 11 http://jsbin.com/kebaye
  12. 12 http://jsbin.com/kebaye/edit?js,output
  13. 13 http://gionkunz.github.io/chartist-js/api-documentation.html
  14. 14 http://jsbin.com/kebaye/edit?css,output
  15. 15 https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia
  16. 16 http://jsbin.com/ciyunu
  17. 17 http://jsbin.com/ciyunu/edit?js,css,output
  18. 18 http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties
  19. 19 http://jsbin.com/zoruko
  20. 20 http://jsbin.com/zoruko/edit?css,output
  21. 21 http://www.google.com/design/spec/animation/meaningful-transitions.html
  22. 22 http://jsbin.com/jovuh
  23. 23 http://jsbin.com/jovuh/edit?css,output
  24. 24 http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/
  25. 25 http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-svg
  26. 26 http://jsbin.com/zumubi
  27. 27 http://jsbin.com/zumubi/edit?js,output
  28. 28 http://jsbin.com/seruk
  29. 29 http://jsbin.com/seruk/edit?js,output
  30. 30 http://jsbin.com/nupexe
  31. 31 http://jsbin.com/nupexe/edit?js,output
  32. 32 http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-constructor-svg
  33. 33 http://gionkunz.github.io/chartist-js/api-documentation.html
  34. 34 http://gionkunz.github.io/chartist-js/examples.html
  35. 35 http://www.w3.org/TR/SVG/
  36. 36 http://www.w3.org/TR/SMIL3/smil-animation.html
  37. 37 https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject

The post Chartist.js, An Open-Source Library For Responsive Charts appeared first on Smashing Magazine.

Everything web designers need to know about #VATMOSS

Go to Source

Sell ebooks, software, courses or music online? If you or any of your customers live in a European country then a piece of legislation designed to deal with companies the size of Amazon might be about to give you a taxation headache.

When you sell digital products online, the world can seem a borderless place. I run a company from the UK, but 50% of our customers are not from Britain. There have always been hoops to jump through when selling to other countries, and as a small business you have little choice to comply with whichever rules are created — even when they were not created with small businesses in mind.

This change has huge implications for everyone selling and buying digital services online

An example of this is the change in “place of supply” rules in the European Union (EU), which cover how Value Added Tax (VAT) is collected. This change has huge implications for everyone selling and buying digital services online. (You may have noticed somewhat angry tweets using the #VATMOSS hashtag recently.)

In this article, I’m going to cover the situation as it stands today. As WebdesignerDepot has a large audience from outside of Europe I am going to explain the situation as it applies to businesses outside of the EU as much as within it.

(I’m not a VAT expert, I’m a business owner who has spent a long time reading up on this subject so I can comply, and also help other small businesses. In addition the situation is still changing frequently as individual member states in the EU refine their guidance. You should take this information as a guide and check with your own accountant or tax advisor before making any changes to your business.)

What is VAT?

VAT is a tax on purchases and is used in many countries around the world including within the EU. VAT is a percentage of the sale added to the selling price of the item. For example in the UK the Basic Rate of VAT is 20%. If I purchase an item costing £120, £20 of that price is VAT.

VAT Registered businesses collect the VAT and then pay the VAT they have collected to their tax authority. They can deduct from the amount due any VAT they themselves have incurred buying items for business use.

Which products and services are affected by the new rules?

The electronic services included in the new rules include:

  • Download and online games
  • E-books (e.g. Amazon Kindle)
  • Download and streaming music and videos
  • Cloud computing, including software provided as a service (‘SaaS’)
  • Subscriptions to online journals, newspapers etc
  • Membership fees to online associations, fan clubs or dating service

Bloggers! HMRC have confirmed that “advertising space on a website” falls under the new #VATMOSS rules: https://t.co/QEHVcBxWc9
— Laura Howard (Lupin) (@bugsandfishes) December 10, 2014

What is the current situation for sellers in the EU?

Currently, when selling an electronic service to consumers VAT is charged where the business is based.

If you sell just one product to a consumer in an EU country you are liable to pay the VAT to that country

This means that a VAT registered business in the UK selling a WordPress plugin to a person in Spain needs to charge VAT at the UK Rate of 20% and pay that to the UK tax authority via their VAT Return.

If the customer is VAT Registered (and not in the same country as the seller) then VAT is charged where the customer is. However what this means in practice is that they account for the VAT in their own VAT return under the reverse charge rules. All the UK business has to do is validate the VAT number of the customer and allow them to pay without including VAT. The UK business does not need to know about the Spanish VAT rate or pay the tax themselves.

What is the current situation for sellers outside of the EU?

Since 2003, businesses selling to EU consumers should have been paying VAT due via a scheme called VOES (VAT on e-Services). This scheme enabled businesses from outside the EU to register with a single member state and pay VAT there. In practice only the largest businesses complied with this, and usually by registering in a member state with a low VAT rate.

What changes on January 1st 2015?

From January 1st supplies of electronic services to consumers must always be taxed where the customer is based.

What this means is that a business in the UK selling a WordPress plugin to a person in Spain needs to pay the Spanish tax authorities VAT at the Spanish rate on that sale. The UK business therefore needs to know the Spanish VAT rate and verify that the customer is in Spain.

The rules with regard to sales to businesses who have a VAT number do not change.

@kickstarter @Patreon @Indiegogo do you know how #VATMOSS will affect crowd funding creators from Jan 2015? Wont this cripple your business?
— Owen Jollands (@ComicColorist) December 9, 2014

Why the change?

This is an attempt to prevent large businesses, such as Amazon, from registering the VAT in an EU country with a very low VAT rate for some or all products. Luxembourg has typically been used for this purpose and, as this 2012 article in The Guardian demonstrates, other member states were keen to ensure they did not lose out on this tax money.

By moving the tax to the place where the service is used, this ruling ensures that tax is paid more fairly. On paper this sounds fine, in practice it has scooped up a lot of very tiny businesses with legislation designed for larger ones.

Part of me is actually considering shutting down the business side of @js_bin due to cost of handling #VATMOSS. UK gov failing entrepreneurs
— Remy Sharp (@rem) December 14, 2014

What is the MOSS?

The Mini One Stop Shop (MOSS) is a facility offered by EU countries to simplify the payment of VAT to all of the different member states. Businesses in EU countries register with the MOSS in their own country. Then they make one quarterly MOSS return that details the sales they have made to other EU countries and the VAT owed, make one payment to the MOSS and then that money is distributed.

The alternative, and valid, option is to register for VAT in each country that you trade in. This is unlikely to be a sensible option for all but the largest of businesses.

Sell #WordPress themes/plugins? #EUVAT #VATMOSS (affects EVERYONE worldwide). Twitterstorm 16/12 PLS JOIN http://t.co/zgRQVrqcAm
— Carmia Cronjé (@ClementineCreat) December 15, 2014

Businesses outside of the EU can choose to register with an EU business in order to report their sales through the MOSS in that country. You are eligible to register as a “non-Union” business if, you haven’t got a business establishment in the EU and you are not registered or otherwise required to be identified for VAT purposes in the EU.

Are there minimum sales thresholds before I need to register?

Unfortunately not. If you sell just one product to a consumer in an EU country you are liable to pay the VAT to that country. Some countries have minimum VAT thresholds, in the UK this is currently 81,000 GBP (about 127,000 USD). However these thresholds do not apply when the tax is due to another country, in that case the threshold is zero even if the country has a threshold for its own residents. It is for this reason that many small businesses are being forced into VAT Registration for the first time in EU countries, and in particular the UK. To register for MOSS you need to have a VAT Registration.

The UK is putting into place rules for UK businesses in this situation. I’m not going to delve into them here but if you are a UK business, read the information here for more information.

How do I prove where my customer is?

The issue of proof is a difficult one for many small businesses due to reliance on third party payment processing, shopping carts and delivery of digital products and services.

The EU legislation states that unless the service is delivered via a fixed landline, or some other method that means it is clear where the customer is at the point they use the service you need to provide two, non-conflicting forms of evidence as proof you are paying VAT to the correct member state. The possible options are:

  • the billing address of the customer
  • the Internet Protocol (IP) address of the device used by the customer
  • location of the bank
  • the country code of SIM card used by the customer
  • the location of the customer’s fixed land line through which the service is supplied
  • other commercially relevant information (for example, product coding information which electronically links the sale to a particular jurisdiction)

The location that is important is where the person buying the goods or service will normally use it. There is an example in the EU Explanatory Notes (page 56) of a UK resident purchasing MP3s while on holiday in Spain; their usual address is in the UK, the rights to use the MP3s do not disappear when they leave Spanish airspace, so UK VAT would be payable.

This means that for most businesses the billing address that is provided by the customer would be what you use to decide how much VAT is payable and then you need to find another piece of information to back that up. The most likely pieces of information being the customers IP address, run through a geocoding service to get country, or the billing address of the card used. You can usually get the card country back via the API when using a PSP. This is possible with both Stripe and PayPal.

On my own blog I have detailed more about what my company is doing with regard to proof, and also looked at the implementations of some other companies.

How long must I keep this proof for?

The proof you collect about the location of your customer must be kept for 10 years in case of a VAT audit.

Where can I find up to date VAT Rates for each EU country?

Up to date VAT Rates are published by the EU and can be found in PDF form here. There is currently no official API to retrieve these. It is worth noting that there are different levels of VAT, some items incur a reduced rate. This includes ebooks in some, but not all, member states. So if you sell a software product and an ebook you will find that you need to charge different rates of VAT for those items.

There is an excellent resource at VATlive, a site providing all kinds of information about VAT in a far easier to read format than the official EU information.

What about VAT invoicing?

If you sell products and services to people and companies in the EU you may already have been asked for a “VAT Invoice”. This is because VAT registered companies need to provide an official VAT invoice to claim the VAT paid back.

You need to provide a VAT invoice that details the amount of VAT paid. Requirements are different for different countries but the EU sets the minimum details required. If you use a third party accounting system that sends invoices you should check with them that their invoices meet the requirements.

My service or software sells digital products on behalf of other people, what should I do to help my customers?

If you have an e-commerce plugin, shopping cart or offer a delivery service for software or ebooks then it is likely that your customers will be asking for your help to comply with this legislation.

Take a look at the implementation details posted by SendOwl and Recurly, these are good examples of what services can put in place to help customers. With people scrambling to comply with the rules there is a competitive advantage for any service that can adapt quickly to help customers. The same is true for WordPress or other CMS plugin developers, you could really help people out and gain new customers by putting provision in place.

Can I avoid dealing with VAT?

The simplest way to avoid dealing with the VAT is to only sell via a distributor who becomes the seller of the product and pays you a royalty or cut of profits. Therefore ebooks sold only through the Kindle store will not cause you to need to register for VAT as Amazon is the actual seller of the product. Likewise Apps on the Apple App Store do not cause the developer to need to become registered for VAT.

You need to ensure that the third party does become the seller of the item or service, and has their company name on the invoices. Services that just give you the ability to host an online store or that deliver digital downloads for you will not exempt you from having to deal with the VAT yourself.

#VATMOSS: If you sell through a marketplace you will pay VAT through them, even if your turnover is below £81k. It’s a no win situation.
— Suw (@Suw) December 12, 2014

What problems is this likely to cause for people who buy digital products and services?

The biggest issue for consumers is likely to be price increases. Companies selling to consumers typically display prices inclusive of VAT, and now the amount of VAT due is based on the consumer location and not the sellers. Stores will need to price items so that they can afford to pay the highest possible amount of VAT for each sale. To take one example:

VAT on an ebook in the UK is 20%, in France it is 5.5%. I price an ebook at $10. A UK resident buys my book so I need to pay $2 in VAT to the UK. A French resident buys and I only need to pay 55 cents to France. Giving me an extra $1.45 profit each time I make a sale in France!

Amazon have issued guidance to their sellers with regard to minimum and maximum pricing due to this issue.

I can confirm that #VATMOSS is stopping me selling apps online. Simply not worth it.
— John Nye (@john_nye) December 14, 2014

You may also find that businesses choose not to sell their product to people in EU countries outside of their own. There is some debate as to whether this is legal within the EU due to the fact we are supposed to trade openly with each other. However businesses outside the EU may decide it is just too much trouble to offer their products and services to EU citizens.

What happens if I don’t comply?

Businesses who do not comply with VAT legislation can be audited by any member state who believe that they are owed VAT. If you are within the EU then my understanding is that this would be instigated by your tax authority in the first instance.

How likely is it that EU member states will pursue non-registered small businesses from outside of the EU? That’s a question I can’t answer, however these businesses should have been paying VAT on supplies to EU countries since 2003 anyway. How the VAT needs to be paid has changed, but the requirement to pay VAT hasn’t.

Where can I find out more?

I am collecting information as I find it on a site at GitHub. I am trying to maintain this as an up to date resource as new information is found. If you have new information I’d love you to add it via a Pull Request, or just let me know.

 

Featured image, money image via Shutterstock.

RETRO MANIA: 50 Vintage Text Effects – only $10!
Everything web designers need to know about #VATMOSS

Source

This is a demo store for testing purposes — no orders shall be fulfilled.