At StatHat, they make a lot of charts. They creates dynamic, autoupdating charts using JavaScript, but we also send charts via email and to external services like Campfire and Slack. Plus, they let users embed charts on their own web pages. For these situations, JavaScript charts either won’t work, are overkill, or could get messy.
So they made chartd. It allows you to create a chart with just an img tag. These charts:
- are responsive (resize this page to see the charts respond)
- are retina-friendly
- can contain up to 5 datasets
- can be line or step charts
- have customizable colors and strokes
No JavaScript is required. You can generate SVG or PNG charts. We prefer SVG, but some services (like gmail) won’t render SVGs in emails.
Requirements: –
Demo: http://chartd.co/
License: License Free
Today Codrops has shared an Interactive 3D Mall Map experiment with us. The idea is to show a mall map with all its floors in perspective. Additionally, we have a search in a sidebar that allows to filter mall spaces. Once a floor is selected, we show some pins as indicators for the different stores/spaces.
When clicking on a pin, we show some more details of that space. We’ve mostly used CSS trickery for this, applying transitions that will rotate and move the levels by adding or removing classes. The levels are represented by inline SVGs. This concept can be applied to any kind of floor map actually; any building that has several floors and spaces could be an interesting use case for this.
Requirements: –
Demo: http://tympanus.net/Development/Interactive3DMallMap/
License: License Free
Material Kit is a Free Bootstrap UI Kit with a fresh, new design inspired by Google’s material design. You asked for it, so we built it. It’s a great pleasure to introduce to you the material concepts in an easy to use and beautiful set of components. Along with the restyling of the Bootstrap elements, you will find three fully-coded example pages, to help you design your next project.
Material Kit makes use of light, surface and movement. It uses a deliberate color choice, edge-to-edge imagery and large scale typography. The general layout resembles sheets of paper following multiple different layers, so that the depth and order is obvious. The navigation stays mainly on the left and the actions on the right.
Material Kit is based on the Github Repo from Fez who did an amazing job creating the backbone for the material effects, animations and transitions. Big thanks to his team for their forward thinking efforts.
Requirements: –
Demo: http://demos.creative-tim.com/material-kit/index.html
License: License Free
We are all absolutely unique and we want different things. Vivaldi web browser lets you do things your way by adapting to you and not the other way around. You prefer the browser tabs placed at the bottom or on the side of the window? – You prefer a different address bar location? Go ahead and customize your preferences be it your keyboard shortcuts, mouse gestures, appearance and so on.
Are you a keyboard person? Then Vivaldi is your delight. Quick Commands let you search through open tabs, bookmarks, history, settings and more with one single keyboard shortcut. Quick commands menu is highly customizable allowing you to create your own commands and run them instantly. Tired of unorganized tabs in your browser? Let the mess be cleaned up with Vivaldi. Organize your tabs using Tab stacks, a feature that you will fall in love with. It lets you group multiple tabs into one. It can’t get better than this – just drag a tab over to another for an uncomplicated grouping.
Requirements: –
Demo: https://vivaldi.com/
License: License Free
Their mission at Front is to help people communicate better. Usually, it means building the best communication software possible, but today they are doing something different. They are releasing a collection of emails that we think have great copy called Good Copy, so the everyone can get inspiration for their own communication.
You never have too many examples. The approach is really focused on the copy, not the design of the emails.That’s why it’s plain text: easy to search, easy to copy and paste the content and adapt it to your own “style”!
Requirements: –
Demo: http://www.goodemailcopy.com/
License: License Free
GIF Editor lets you add animated stickers, fun filters, and captions to your GIFs. Simply choose a GIF to get started by entering a GIF URL or any GIPHY link or by dragging and dropping your image files. On the Stickers tab, search our entire sticker collection to add funny or weird GIF stickers to your GIF. Just type in your search term or click on our suggested searches, and click on the sticker you want to add to your GIF. You can add as many stickers as you want!
Click the Filters tab, choose a filter, and decide whether to apply it to the whole background or the entire GIF. Click the Caption tab, then type your witty, relevant, or irrelevant caption text into the Caption field. You can share your GIF on Facebook, Twitter, Instagram, Pinterest, Tumblr, Reddit, text message, email, and everywhere!
Requirements: –
Demo: http://giphy.com/create/gifeditor
License: License Free
Privacy gives you a new card number for every transaction. This protects you from card fraud, data breaches, and identity theft. Privacy is the first payments product that keeps your personal information private. And the best thing is, it’s even easier than using your regular credit card online. Privacy Visa Cards may be used everywhere Visa debit cards are accepted. Their mission is to build elegant, usable software that protects your privacy and security. You deserve the best. Protect yourself online without sacrificing convenience and ease of use.
Requirements: –
Demo: https://privacy.com/
License: License Free
By using a PNG sprite and the steps() timing function in CSS, Codrops taught us how to create video effects and use them as transitions! In the resource, they used this technique to fire a modal window, but you can use it to transition between two different pages as well. First, you need a video with a filling effect and a transparent area. Then you need to export this video as a PNG sequence. You can read the full tutorial on the site.
Requirements: –
Demo: https://codyhouse.co/demo/ink-transition-effect/index.html
License: License Free
We know building HTML emails is hard, especially responsive emails. That’s why ZURB created Foundation for Emails. Get away from complex table markup and inconsistent results. Use Foundation for Emails to spend less time coding emails, and more time on other things, like building amazing products.
Making a marketing or promotional email? Drip campaign? Transactional email? Foundation for Emails is the framework that can help you easily build emails for any use case. Choose from 10 responsive HTML templates to start from that are tested on mobile and desktop versions of Outlook, Gmail, Apple Mail and more.
Requirements: –
Demo: http://foundation.zurb.com/emails.html
License: License Free
Open Foundry — The ‘open’ stands for open-source, free and easily available. The word ‘foundry’ is taken from the ‘type foundry’ and suggests professional quality and industrial heritage. Their solution is to offer a carefully curated number of fonts in the most clear and dynamic way possible. Instead of overwhelming the user, Open Foundry provides enough interest and excitement to encourage further exploration. All fonts are distributed under an open-source license and are free to use. Every font provides you with a source button to its open-source hosted project, a direct download and the site where it was initially found or published.
Requirements: –
Demo: http://open-foundry.com/
License: License Free
