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.
🔥 Check out the best resources for web developers from August 2018 #web #resources Click To Tweet
1. Tools
CodeZen
With CodeZen you can generate beautiful and customizable previews of your code snippets and share them with your friends or social media.
Moceen
Moceen is an open-source app that allows you to create beautiful screenshots with device mockups.
2. Libraries
Between.js
Between.js is a lightweight and highly performant ES6 tweening engine.
Mauerwerk
A masonry grid with enter and exit transitions for React.
Apex Charts
A free and beautiful JavaScript charting library.
Undux
A dead-simple state management library for React that is meant to be an alternative to Flux or Redux.
Nano ID
A library for generating random IDs with a very small probability of an ID being duplicated.
Tiptap
A renderless rich-text editor for Vue.js based on Prosemirror that is highly extendable.
Lazyestload
A lightweight (400 bytes) library that loads images only when they are in viewport.
Vue Storefront
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
Razzle is a tool that abstracts all the complex configuration needed for server-side rendering into a single dependency.
3. UI Kits & Templates
Libre
A free responsive single-page template created using Tailwind perfect for any management-like projects.
Creation Shop
A free and beautiful UI kit designed for online stores.
4. Icons
Gradient Icons
A free collection of 100 beautiful, gradient icons.
Capitalist Icons
A free collection of 60 food & drink icons.
5. Tutorials
Diagonal Slideshow
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.
6. Fonts
Space Grotesk
A free and beautiful typeface that supports the Latin Extended-A character set and several OpenType features.
Ustroke
A free, scribble-style font designed by Tikhon Reztcov.
Sanos
A free brush font designed by Krišjānis Mežulis.
Travelers
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 best resources for web developers from August 2018 #web #resources Click To Tweet
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
🤔 What do you think?