Frontend Collective - Week #3

#weeklyui #webdev #javascript #css

It's the curated collection of awesome work that is done by awesome people and community.

Highlights

Navigation for Design Systems
Tailwind UI
500+ CSS Icons
Heroicons
Iconset
CSS Specificity calculator
Sass mixin for Buttons

Navigation for Design Systems and Style Guides

A look at different types of navigation and when to use them. Design systems vary in size, so the type of navigation that works for one may not work as well for another. However, there are some common solutions. We’ll be looking at some of these different solutions and when it makes sense to use one over the other.

Visit the site here

Tailwind UI

Fully responsive, beautiful UI components, designed and developed by Adam Wathan and Steve Schoger, the creators of Tailwind CSS.

Visit the site here

500+ CSS Icons

Minimalistic icon library Designed by code. Customizable & Retina-Ready icons — entirely built-in CSS 😲

Easy integration: Embed, NPM & API.

Visit the site here

Heroicons

A set of free MIT-licensed high-quality SVG icons for UI development. 140 icons per style currently, more to come in the future.

Visit the site here

Iconset

Organize SVG icons in one place. Free, cross-platform and fast SVG icon organizer app for designers, developers or product teams. Works on both Mac and Windows.

Visit the site here

CSS Specificity calculator

If an element is targeted by multiple selectors, the browser uses the specificity of the selector to determine which styling to apply. Each selector has a specificity that is determined by what you use in that selector: elements, ID's, classes etc. This specificity is split up on different levels.

Visit the site here

Sass mixin for Buttons

A flexible Sass mixin for creating BEM-style buttons.

Visit the site here

If you have found this blog very helpful then please feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions.

Till then,
Keep on Hacking, Cheers