So this is the fifth part of my end of the year round up of HandPicked Goodies for Designers & Developers, Normally with these type of post of roundups i normally published these at the start of every new month of the year and today’s post will be focusing on all whole range of great items, such as some frameworks that been release, browers and design software extensions, html5 tools, new podcasts, new CMS’s.
Please note that not all CSS, HTML, Frameworks and other great awesome tools that got posted through my monthly handpicked roundups will be included in this post.
6to5 turns ES6+ code into vanilla ES5, so you can use next generation features today and 6to5 has plugins for all of your favorite build systems, just check out the official plugins for Gulp, Grunt, Browserify, Webpack, and many many more.
By using either the CLI or require hook, you can easily setup 6to5 to work with your Node.js app. Module authors can also easily precompile their assets before publishing to npm.
Tpesettings.css is the typography boilerplate for you to build minimal website or blog project.
As all typographic styles been inspired by traditional graphic design fundamentals—the boring stuff that you learn in Typography 101.
You simply include typesettings.css in the head section after your main stylesheet, and then add class=”typesettings” to your article element.
Brand Style Guide Examples is a hand-picked collection of brand style guide examples, pattern libraries and design manuals for inspiration.
The Design Details Podcast is a weekly show about the people who design our favorite products that is hosted by Bryn Jackson and Brian Lovin.
Developer Tea is a podcast for web and software developers hosted by a developer that you can listen to in less than 10 minutes. The show will cover a wide variety of topics related to the career of being a developer.
If you are building an analytics dashboard, don’t start from ground up just grab one of Keen IO Bootstrap-based Dashboards Templates that will get you to admire your data in minutes.
With Keen IO dashboards you can create an attractive, custom analytics dashboard that’s ready to be shown to your team or your customers, so no more hours lost tweaking CSS or testing responsiveness on eight different devices.
The Codrops CSS Reference is a archive containing a list of entries categorised by type CSS property, CSS function, CSS data type, CSS at-rule and CSS pseudo-classes/selectors/elements. Each entry is an article defining and explaining a CSS property, function, data type, at-rule or pseudo-class/selector/element.
In addition to these five categories, there are one more category exists: CSS concept, this entry in the CSS Concept category is a complete guide to a specific CSS concept or feature.
CSS concept entries serve as a “global” entry for a group of related properties. For example, Flexbox and Counters are two concepts that have their own entries. Each entry explains what the concept means, what it does, and includes a definition and usage examples of its properties. Each entry has a header that states what category this entry belongs to, and a live search module.
SpaceBase is a Sass-based responsive CSS framework, we see with many CSS frameworks that are meant to be included and left alone. But spaceBase is a boilerplate layer that can be built upon and tailored for your needs. It combines best practices for today’s responsive web with the core components we use on every project. Consider it the launch pad for your adventures into cyberspace.
SpaceBase is the front-end starter files for any new web project, it sets up your Sass architecture and normalizes your CSS and native HTML elements. It provides the structural groundwork for your application. SpaceBase is meant to be copied into your project for further modifications. The SCSS files in scss/base/ are usually not modified much, but the files in scss/ui/ are meant to be completely tailored to your project.
Materialize is a modern responsive front-end framework based on Material Design. They did most of the heavy lifting for you to provide a default styling that incorporate your custom components. Additionally, they refined animations and transitions to provide a smoother experience for developers.
Andy.scss is a collection of free, useful SASS mixins. It includes mixins for things like background gradients, borders, shadows, and more.
StockSnap is the best place on the internet to find beautiful free stock photos. Period, as All photos uploaded to the site are released under Creative Commons – CC and do not require attribution. No more hassle trying to figure out whether you can use photos for commercial use and whether you need to provide attribution.
Booom makes Dribbble.com faster and easier to use, by adding many highly requested.
TransformIcons are an animated symbol/button/icon that morphs using a combination of SVG, CSS and HTML, you will see that they also provide a builder that gives developers the ability to select their preferred Transformicons and output for finer control.
ai2html is a script for Adobe Illustrator that converts your Illustrator document into html and css.
SkyBlue is not Bootstrap killer, as SkyBlue is a minimal framework that is meant to be starting point for my projects. It’s uses a grid system with 12 columns. you can add col class and responsive xs-# sm-# md-# lg-#. Offsets are also available by offset-xm-# offset-sm-# offset-md-# offset-lg-# classes.
UberFaces – an analogue of the plug-in for generating random user ” Random User Generator “, only the latest versions of Photoshop CC and CC-2014.
Ugly Email is a Gmail extension that allows you to see if the email is being tracked before opening it. It seamlessly integrates with Gmail. Ugly Email safely sniffs through the emails in your inbox and exposes the emails that are being tracked. Every tracked email is marked with the “evil eye” so you can easily identify them.
Grav is a fast, simple and flexible file-based web-platform, there is Zero installation required you simply extract the ZIP archive, and you are already up and running. It follows similar principals to other flat-file CMS platforms, but has a different design philosophy than most.
Grav comes with a powerful Package Management System to allow for simple installation and upgrading of plugins and themes, as well as simple updating of Grav itself. The underlying architecture of Grav has been designed to use well-established and best-in-class technologies, where applicable, to ensure that Grav is simple to use and easy to extend.
Primer is the CSS toolkit that powers GitHub’s front-end design, it’s purposefully limited to common components to provide the developers with the most flexibility, and to keep GitHub uniquely GitHubby. It’s built with SCSS and is available via Bower, so it’s easy to include all or part of it within your own project.
It’s available for use under the MIT license and built with open source projects like SCSS, Jekyll, Grunt, and more. It includes a small Gruntfile for compiling SCSS, Autoprefixer for vendor prefixes, and Parker for CSS stats.
Pexels is a huge platform for free stock photos. Many designers and bloggers use it every day to find photos for their personal and commerical projects. Now we would like to introduce Pexels Videos. The only difference is that its purpose is to find free videos instead of photos.
rwdgrid is just another Grid system based on popular 960grid, which is responsive and ranges from mobile, tablet, laptops and wide screen displays. Naming convention is very similar to 960 grid system, where underscore is replaced by hyphen (increases readabilty). rwdgrid is having different Grid system made for 1200px+, 1024px+, 720px+ and Mobile screens.This can be used as a base grid system that will help you to build responsive webdesign with your existing proficiency over popular grid system It’s works with IE8+, Firefox, Chrome, Safari, Opera, PSD Grid & included and you are free to use and Abuse it.
With this ebook you willlearn how to apply typography best practices from only the best hand-picked examples.
Tentative is a podcast about digital product design, hosted by thoughtbot designers Reda Lemeden & Kyle Fiedler
You can use the Google’s Prediction API machine learning algorithms to analyse data and predict future outcomes using a familiar RESTful interface. You can easily predict future trends using historical data. Route messages, detect spam and recommend products for users by using Prediction API.
Rebar is aimed to make responsive development more efficient and keep CSS organised. The idea is to setup a list of breakpoints and assign container or grid settings for each breakpoint at one time. It uses padding for gutter and works the same way as the Bootstrap 3 grid system does.
So if you’re already familiar with Bootstrap, you will find Rebar is easy to use and far more flexible.Rebar requires Sass 3.4 or Stylus and is incompatible with Libsass 3.1.
Typography Cheatsheet is a comprehensive guide to using proper typographic characters, including correct grammatical usage.
Cachet HQ is an open source status page system, for everyone. It shows beautiful & simple service statuses. Cachet has been beautifully built, both by design and code. Using Bootstrap 3, Cachet is completely responsive and works perfectly on mobile, tablet and desktop devices.
Oneliners will take you away from the ordinary, boring taglines into finely crafted masterpieces
The Marvel Comics API is a tool to help developers everywhere create amazing, uncanny and incredible web sites and applications using data from the 70-plus years of the Marvel age of comics. The Marvel Comics API is a RESTful service which provides methods for accessing specific resources at canonical URLs and for searching and filtering sets of resources by various criteria. All representations are encoded as JSON objects.
You call straightforward methods (like adding buttons or getting the subject) on the class and the SDK abstracts the entire DOM away from you.
Brunch is a builder. Not a generic task runner, but a specialized tool focusing on the production of a small number of deployment-ready files from a large number of heterogenous development files or trees.This is an extremely common need among front-end developers (or front-end designers, for that matter), who most often have the same set of needs: take a tree of LESS/SASS files to produce a small set of minified CSS files, same for JS, same for sprited images, etc.
Kore.io is an easy to use web application framework for writing scalable web APIs in C. Its main goals are security, scalability and allowing rapid development and deployment of such APIs. Because of this Kore is an ideal candidate for building robust, scalable and secure web things. Kore makes it easy to get started without having to fiddle with build frameworks such as make. Using the builtin commands you can create, compile and run Kore applications. Kore exposes an easy to use API to build your applications.
HTTTML is a fun alternative to vanilla HTML. With HTTTML you can add a little extra flavor to your code while remaining completely semantic. Change your boring, standard markup, to include custom tags with more interesting and unique names. Works best with an OOCSS toolkit such as Basscss, which, along with HTTTML, was used to build this site.
This Chrome extension can make your Facebook beautiful, lighter and faster.
Keep track of meetings or simply minimise and enjoy the stunning backgrounds.
Snip and Share allows you to share content from any website.
Sitecake is an easy to use CMS for small websites, this CMS with a WYSIWYG, drag&drop editor. A standard web hosting packet (a web server and PHP 5.4+) is all you need to install and use it. Sitecake reads, modifies and saves changes in regular HTML files. No PHP or template language knowledge required. All changes are saved directly in HTML page, all images in file system and once you finish editing you still have a static website.
Inker is an open source front-end architecture & delivery service that will change how you think about one-to-one emails in your company. Inker takes you from coding to sending, keeping it centralised so that your team stops losing time over emails & can focus on more important things.
Inker keeps your email code clean & gives you the tools to test faster, it comes with free templates for transactional emails (forgot password, receipts, account creation) and Inker uses Zurb Ink to provide you with a superior responsive CSS framework: you get all the goodies + a Sass component oriented structure.
Discourse is the 100% open source discussion platform built for the next decade of the Internet, it works as: a mailing list, a discussion forum and a long-form chat room, so why break conversations into awkward and arbitrary pages, where you have to constantly find the Next Page button? They’ve replaced all that with the power of just-in-time loading. Want to read more, Keep scrolling down.
So when someone quotes your post, they’ll notify you and when someone mentions your @name, they’ll notify you, when someone replies to your post… If you’re not around, they’ll email you, too as Discourse is a simple, flat forum, where replies flow down the page in a line you expand the context at the bottom and top of each post to discover the full conversation without breaking your flow.
Tota11y is an accessibility visualization toolkit for seeing how your site performs with assistive technologies. It makes the often tedious and confusing process of testing for accessibility much easier for developers who aren’t used to using the technology themselves.
Crayon.css is a list of css variables linking color names to hexadecimal values, usable with postCSS or with your favourite CSS preprocessor, being it Stylus, Sass or Less.
CSS Plus wants to provide a simple and fast way to make flexible layout based on flexbox modeling. This awesome css feature lets you specify a flexible container which the children can also be flexible and re-sized automatically when the size of the container changed. It supports Chrome 14, Internet Explorer 10, Firefox 6, Safari 4, Opera 12.10.
QQUIA is a tool designed to help build and understand Quantity Queries.
Styleguide is a tool to make creating and maintaining styleguides easy. All you need to do is to add the Styleguide to a separate folder in your project. Use it as your CSS and the only thing you just need to import the generated file inside your HTML and you are all set!
This way the Styleguide will be synced with your project…. Isn’t that awesome!?Just copy your project’s CSS and paste it in the Styleguide CSS file. Now you only need to customise the modules to use the proper classes. You can always create/edit any module when you need.
The Styleguide is also a independent project. You can download it and use it in your browser. Then all you need to do is edit it’s CSS and set/customise the modules. When you are finished you can send the files to a server or use the HTML version.
Instant Update is free Open Source PHP/MySQL Content Management System (CMS) but this CMS is a bit different that your regular old CMS and that because it’s been based on a no template structure as your HTML will be your template. As HTML elements may have unique ID attribute set, our choice was to use HTML IDs to mark editable regions. This is all done on the fly. That means that Instant Update recognizes all IDs automatically. All documentation and issues are located at the InstantUpdate website community
Unsplash.it is a beautiful placeholders using images from unsplash. Just put your image size (width & height) after Unsplash.it URL and you’ll get a placeholder. You can easily get a random image by appending ?random to the end of the url; Get a blurred image by appending ?blur to the end of the url; Select the cropping gravity by adding ?gravity to the end of the url. You can use the /g/ path to greyscale the image. You can also get a specific image by appending ?image to the end of the url.
Dummy Credit Card Generator Generate fake Credit Card numbers for eCommerce testing purposes this does not generate valid credit card numbers. It will pass the Luhn algorithm/formula a.k.a the mod 10 check, but the financial institution will reject it.
Lightning Design System helps you create the world’s best enterprise app experiences. With the Design System you can build custom applications with a look and feel that is consistent with Salesforce core features — without reverse engineering our styles! Simply download our platform-agnostic CSS framework and get started today.
Flatmarket is a free, open source e-commerce platform for static websites. Its simple architecture makes it extremely reliable, secure, and inexpensive to operate. View the source on GitHub.The platform uses Stripe for payment processing and is built on the latest web technologies like hapi, React, and Webpack.
Flarum is the next-generation forum software that makes online discussion fun. It’s simple, fast, and free, it packed full of innovation, all wrapped up in a beautiful design. This isn’t just a nice skin. It’s forum software reimagined.
xpos.it is a cutting-edge open-source CMS that uses a real-time visual environment instead of writing code, opening endless possibilities for web designers while not compromising on content management. Goodbye messy templates, design now defines the process.
Telepat is an open-source backend stack, designed to deliver information and information updates in real-time to clients, while allowing for flexible deployment and simple scaling. Telepat empowers modern apps for the real-time age.
Classic Web APIs deliver on-demand, static information snapshots to clients. Data soon gets outdated, and cannot be synced between multiple clients. Instead of working with data snapshots that get stale, Telepat pushes all new information from the central node to all subscribed devices, instantly.
Zube is virtual task board for your software development team. Zube loves GitHub so all of your GitHub issues are automatically pulled into Zube, and your Zube data is synchronized with GitHub in real-time.
Lattice is an open source project for running containerised workloads on a cluster. Lattice bundles up http load-balancing, a cluster scheduler, log aggregation/streaming and health management into an easy-to-deploy and easy-to-use package. The scheduler balances the allocation of container process resources across the infrastructure. The algorithm uses a distributed auction model based on the resource availability of the hosts and the current placement of your containers.
Lattice aspires to make clustering containers easy plus Lattice includes a cluster scheduler, http load balancing, log aggregation and health management. Lattice containers can be long running or temporary tasks which get dynamically scaled and balanced across a cluster. Lattice packages components from Cloud Foundry to provide a cloud native platform for individual developers and small teams.
Snipcart is a simple shopping cart solution that allows you to turn any website into a fully customisable e-commerce platform. A basic Snipcart integration will take developers minutes, not hours.
Relay which is from Stripe, lets your customers buy products directly within other mobile apps. It lets you sell your products in a number of apps, including selling directly through Twitter, or in apps like ShopStyle and Spring.
Corpus is yet another CSS toolkit. It’s basically a collection of the things that returns to each new project.
Notion is an expressive and collaborative document editor that gives your ideas a place to grow. Beautiful. Lightweight. Always organized. You can create from an assortment of building blocks: to-dos, files, videos, code snippets, and more. Notion helps you work the way you think. Tired of messy folders? They have also invented a new and intuitive way to organize: just drop one page inside another. Let your ideas grow organically as you can share your work with anyone with Notion as well you can see what others are doing on your page. It’s like having your collaborators in the same room with you.
Motion UI is a Sass library for quickly creating CSS transitions and animations. It’s was originally bundled with Foundation for Apps, but Zurb has souped it up and made it its own library, and open sourced it ahead of the launch of Foundation for Sites 6.
The Freelancer is a short, weekly podcast for designers, writers & developers looking to up their business game. Hosted by Paul Jarvis, founder of the Creative Class.
Gogs (Go Git Service) is a painless self-hosted Git service. with the goal to this project is to make the easiest, fastest, and most painless way of setting up a self-hosted Git service. With Go, this can be done with an independent binary distribution across all platforms that Go supports, including Linux, Mac OS X, Windows & ARM. It’s has low minimal requirements & can run on an inexpensive Raspberry Pi. Some users even run Gogs instances on their NAS devices, it’s all on GitHub!
Expose is a simple static site generator for photoessays. If you’re into photography, you probably have folders of images and videos. Expose is a Bash script that turns those images and videos into a photoessay. If you’re not a fan of that look, a Medium-style theme is included. It has been tested on Windows/Cygwin, OSX, and should be fine on Linux.
The Workmanship Manual gives guidelines for writing front-end code that’s reliable and easy to maintain. It includes guidelines for HTML, CSS, and more.
Blur Like Jony is Photoshop filter plug-in that makes the blur in the same way as Apple does in the current iOS.
Blend lets you choose from standard colour palettes (Flat UI, Material Design, etc.) to create a CSS gradient. It’s easy to use and you can quickly grab the code for your projects.
Snatchr is a chrome extension that grabs the stylesheets of a website so that you can quickly and easily find out what others are doing to make awesome websites. DOWNLOAD
Coding regular emails is hard enough by itself. Making them responsive shouldn’t add to the headache. A few simple, but solid patterns are all that’s needed to optimize emails for small screens. That’s what Cerberus is. It’s just a few responsive email patterns that go a long way. The code blocks are compartmentalized so that they may be used, reused, and nested to build an email.
Foundation for Sites 6 has been designed to get your project from prototype to production more efficiently than ever before, It includes a wide range of modular and flexible components that are easily styled and these are versatile and lightweight building blocks which makes it easy to bring your ideas to life.
The total filesize of every component and class now weighs in at 60KB CSS & 84KB JS, with plenty of room to make them even smaller when selectively removing unused components and all code snippets come with ARIA attributes and roles along with instructions on how to properly use these components as this helps ensure that every website built on Foundation 6 can be used anywhere, on any device, by anyone. The base styles act as a coded wireframe rather than a final design and the simpler CSS styles allow you to more easily modify them to fit your brand.
Save your text styles, layer styles, and color palette in a Google Sheet to keep your design team in sync. Every time you run this plugin your styles and colors will be replaced with those you specify in a spreadsheet. This should make it easier to share typography styles across teams!
Avalanche is a responsive, Sass-based CSS system with flexible, configurable naming conventions. It uses real-world breakpoint naming and integrated media query mixins.
Kong is for those people who wants to sell online and they made it free to use to make this a possibility for everyone. No monthly fees and no additional transaction fees, ever. There are no restrictions on Kong. Have as many products you like, use as much bandwidth and storage as you need and make use of our incredibly flexible, customisable default theme; all for free.There are many companies in the eCommerce market that offer, on the face of it, pretty much the same product; with maybe a few standout features.
AutocompleteField adds word completion to your UITextFields. It’s easy to use with plenty of customizable features, including field padding and completion color.
Email Validator is a free JSON API that gives you a simple way to validate/verify email addresses. You can get the free source code and run it on your server or use this service for free 😉