Discover some of the best new web design resources including tools, libraries, freebies, fonts, UI kits and many other goodies that we curated during August 2018.
With CodeZen you can generate beautiful and customizable previews of your code snippets and share them with your friends or social media.
Moceen is an open-source app that allows you to create beautiful screenshots with device mockups.
Between.js is a lightweight and highly performant ES6 tweening engine.
A masonry grid with enter and exit transitions for React.
A dead-simple state management library for React that is meant to be an alternative to Flux or Redux.
A library for generating random IDs with a very small probability of an ID being duplicated.
A renderless rich-text editor for Vue.js based on Prosemirror that is highly extendable.
A lightweight (400 bytes) library that loads images only when they are in viewport.
Vue Storefront is a PWA storefront powered by Vue that is ultra-fast, offline ready web app that is licensed under the MIT license.
Razzle is a tool that abstracts all the complex configuration needed for server-side rendering into a single dependency.
3. UI Kits & Templates
A free responsive single-page template created using Tailwind perfect for any management-like projects.
A free and beautiful UI kit designed for online stores.
A free collection of 100 beautiful, gradient icons.
A free collection of 60 food & drink icons.
A beautiful slideshow with a “diagonal” look and three visible slides.
Sticky, Smooth, Active Nav
A short tutorial from Chris Coyier detailing how to create a sidebar nav that scrolls smoothly to the sections you link to, stays on the screen but doesn’t overlap the header/footer or make the links in-accessible
Slide Out Box Menu
A really great tutorial detailing how you can create a details menu with boxes that slide in an irregular grid with delays and beautiful transitions
Animated SVG Neon Effect
A full-tutorial from Illustrator, to Sketch to SVG in which you learn how to create an animated, flashy SVG neon-light effect.
A free and beautiful typeface that supports the Latin Extended-A character set and several OpenType features.
A free, scribble-style font designed by Tikhon Reztcov.
A free brush font designed by Krišjānis Mežulis.
A free grid-based, mono-width font designed by Arek Zajac.
7. Great Reads
- 📄[CSS Tricks] VS Code extensions for the discerning developer palate
- 📄[Signal vs. Noise] Real Work vs. Imaginary Work
- 📄[Smashing Magazine] What Happens When You Create A Flexbox Flex Container?
- 📄[Meg Robichaud – Medium] Designing Illustrations for Small Screens
- 📄[Silo Creativo] Progressive Disclosure with CSS
What are your favorite tools or resources? Did we miss anything? If you liked this roundup make sure you share it! 😁
Check out the other monthly roundups for 2018:
- Resources for web designers and developers – January 2018
- Resources for web designers and developers – February 2018
- Resources for web designers and developers – March 2018
- Resources for web designers and developers – April 2018
- 30+ New resources for web developers and designers – May 2018
- 43+ Best new web design resources – June 2018
- 23+ Best new resources for web developers – July 2018