New Web Design and Development Resources: #14 January Edition

Here we are again with another round of design and development resources that have been introduced at the start of this new year. As usual, you will find here mockups, icons, jQuery plugins and much, much more.

New for Designers and Developers

Free Notebook Mockup

A cool mockup scenario featuring a notebook over a light wooden table and among several office elements such as glasses, watch, and more it comes in a 300DPI resolution and 3500x2300 pixel dimensions.

Notebook Mockup

Black & White Office Mockup

A cool photorealistic mockup of office items such as stationery, business cards, pens, markers, and more that come in 5 separate PSD format files with a resolution of 300DPI.

Black &  White Office Mockup

Company Folder: Mockups

Mockups let you demonstrate to a client or employer what your design will look like once it’s printed and folded into shape. These PSD templates give you a quick and easy way to turn your design into a realistic folder mockup.

Company Folder Mockup

Colorado: A Minimal Base-Colored UI Pack

Colorado is a modern UI pack that presents nicely crafted designs and shadows in 3 variations of base tone colors available in both PSD and Ai formats.

Colorado UI Pack

Stationery Branding Mockup Templates

An awesome set of 50 different mockup scenarios featuring top and perspective views as well as a realistic and a flat style available in PSD format.

Stationery Branding Mockup

Picnic: Pretty Vector Menu Template

Picnic is a pretty menu template that features nice lile and lavender colors as well as pastel ones as secondaries, perfect to suit ice cream, fast food or vintage restaurants.

Picnic Custom and Instagram Filters for CSS is an online tool for creating CSS filters for your photos counting on several Instagram filters as well as customization through UI control elements.


Feature.js: Browser Features Detector

Feature.js is a library that allows you to detect the features of your browser having no dependencies and weighing only 1kb minified and gzipped.


Typi: Responsive CSS Typography Preprocessor

Typi is a CSS preProcessor that allows you to basically write font-size and line-height properties at multiple instances, and also to create vertical rythms in EM or REM units.


Collapser: Element Truncating jQuery Plugin

Collapser is a lightweight jQuery plugin that allows you collapsing or truncating an element by words, characters, and lines through a flexible API.


Velocity.js: JQuery-like Animation Engine

Velocity is an animation engine that uses the same API as jQuery's $.animate() and features color animation, transforms, loops, easings, SVG support, and scrolling.


72 Tiny Line Icons Set

A set of 72 icons for general purposes crafted in a neat line style and a grid of 24x24 pixels available in PSD, Ai, Sketch, and SVG, and PNG formats.

72 Tiny Line Icons

Material Medical & Laboratory Icon Set

An extraordinary set that consists of almost 3,600 icons in total regarding medical and laboratory items and entities in SVG format and 8 PNG sizes.

Material Medical & Laboratory Icon Set

Huge Collection of Line Vector Icons

A humongous collection of over 15,400 icons in both line and filled style divided in several different industries available in Ai, SVG, and PNG multi-size formats.

Line Vector Icons

20 Food Sketch & SVG Line Icons Set

A set of nicely crafted food icons with a two-color line style delivered in both SVG and Sketch format files you'll find croissants, sandwiches, waffles, donuts, lollies, and more.

20 Food Line Icons

Fabricator: UI Toolkit Builder

Fabricator is a platform built on Node.js for creating fast and scalable network applications, featuring pre-built installers for each platform, as well as useful materials, rapid prototyping, stylesheets and JavaScript, and more to see.


Codepad: Social Ranked Code Snippets

Codepad is a social ranked snippets website featuring snippets in a wide range of languages such as CoffeScript, CSS, Django, Perl, PHP, Python, SQL, Swift, and lots more.


Curated Collection of Web Development Resources

A humongous curated collection of around 100 resources and tools for web development covering every and each of its aspects available for one-click all-items download.

Collection of Web Development Resourses

Scooter: Dropbox's SCSS Framework

Scooter is Dropbox's SCSS framework and UI library developed to provide base styles, CSS components, and rapid static prototyping featuring maths, colors, and units functions.


DuoTone: Syntax Themes for Atom

DuoTone is a set of double-hue syntax themes for Atom using only 2 hues with 7 shades in total, the idea is to tone down less important parts and highlight only the important ones.


JSTips: JavaScript Tips Every Day

An online collection of JavaScript tips that are updated daily allowing you to invest 2 minutes every day to read and improve your performance, conventions, hacks, interview questions, everything to come in this language.


SVGnest: Open Source Vector Nesting for CNC Machines

SVGnest is a vector nesting software for CNC machines that allows you to have many pieces to be cut off organized in the most efficient way nested inside a designated area of the material pieces will be taken from.


ColorFavs: Palette Creation Playground

ColorFavs is an online tool that allows you to generate custom palettes from images, URLs, or random generation based on 3 parameters for a number of colors, hue, and luminosity.


Invoice Home: Online Invoice Template Creation Tool

Invoice home is an invoice template generator that allows you to download and send PDF invoices using lots of free templates, outlines, and alternatives.

Invoice Home

Parallax Expanding and Blurred Title

A new concept of parallax effect for website titles that makes them fade away with a blur effect as you scroll away from it.

Parallax Expanding and Blurred Title

SVG Clip-path Hover Effect

An amazing snippet that allows you to reveal portfolio grids through SVG and CSS transforms as you hover over the items.

SVG Clip-path Hover Effect

Absolute Centering: Pure CSS Viewport Centered Box

A pure CSS snippet that allows you to precisely center elements both horizontally and vertically inside the viewport regardless of what its aspect ratio or size is.

Absolute Centering

BlowBrush: Brush Handwritten Font

BlowBrush is a free font delivered in OTF format that features amazingly crafted uppercase characters handwritten with a thick brush style trace counting also on numeral characters and 23 different ligatures.

BlowBrush Font

Ginebra: Serif Circled Ends Typeface

Ginebra is a fancy serif typeface that features circled ends contrasting with next by ultra thin lines.It comes with both uppercase and lowercase characters as well as numeric and special ones.

Ginebra Font

Sertin: Clean PSD Bootstrap Template

Sertin is a Bootstrap web page template available in both PSD and HTML format that comes with over 30 ready-to-use sections such as about us, contact us, footers, menus, pricing tables, as well as 60 animations and 350 font icons, and stacks more.

Sertin Template


Hopefully you have found somethings of interest in this month's round up. As always, we extend our thanks to the designers and developers who share their work free of charge for our benefit.

Don't forget, if you come across anything, or have designed or developed anything that you think could make it into our next list, please share the link with us.

Opinions expressed in this article are those of the author and not necessarily those of Onextrapixel.