Frontend Collective - Week #3
Tags: weeklyui, webdev, javascript, css
Published: 2020-03-02 05:45:11

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](https://dev-to-uploads.s3.amazonaws.com/i/6cz481meseom2fdm0g6r.png)

### **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](https://cloudfour.com/thinks/navigation-for-design-systems-and-style-guides/)**

------------

![Tailwind UI](https://dev-to-uploads.s3.amazonaws.com/i/6vrkdmj075a91mov5oyv.jpg)

### **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](https://tailwindui.com/)**

------------

![500+ CSS Icons](https://dev-to-uploads.s3.amazonaws.com/i/9xllyxkx0c7qrs6t6h5o.png)

### **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](https://css.gg/)**

------------

![Heroicons](https://dev-to-uploads.s3.amazonaws.com/i/r8djmq9u89lktt1au8bw.png)

### **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](https://github.com/refactoringui/heroicons)**

------------

![Iconset](https://dev-to-uploads.s3.amazonaws.com/i/lw5kje7u21y704kyhho8.png)

### **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](https://iconset.io/)**

------------

![CSS Specificity calculator](https://dev-to-uploads.s3.amazonaws.com/i/iamu6f4efoy0brh2x87z.png)

### **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](https://polypane.app/css-specificity-calculator/)**

------------

![Sass mixin for Buttons](https://dev-to-uploads.s3.amazonaws.com/i/a7uuopay01rgt4j4gl93.png)

### **Sass mixin for Buttons**
A flexible Sass mixin for creating BEM-style buttons.

Visit the site **[here](https://hsnaydd.github.io/buttono/)**

------------

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**