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.
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.
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.
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.
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.
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.
cssFilters.co: Custom and Instagram Filters for CSS
cssFilters.co 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.
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.
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.
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.
Fabricator: UI Toolkit Builder
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.