In this article, we feature a list frameworks and tools that is geared toward web development. Interestingly, I’ve found a few of these tools and frameworks coming from behemoth corporations like Microsoft and Alibaba.
This is a good sign, as more companies are now contributing to open-source and help shaping a better the Web. Let’s take a look at what’s in store for this month’s compilation.
A UI framework built on top of Sass. It comes with all the most common web interfaces like forms, navigations and buttons, which should be sufficient in many cases. If you find popular frameworks like Bootstrap and Foundation overwhelming, Cutestrap might be a great alternative for you.
Browser Calories is a Chrome extension that measures a webpage weight. It scans the files loaded and their contribution to the total weight of the page. A great tiny tool to help you optimize your website performance.
A framework from Microsoft, the UI components in MWF is built based on the Microsoft Modern design language: flat, clean, and minimalistic. This framework, aside from the UI components, also gives direction on the use of Colors, Typography and Animation. I think Material Design Lite has finally met an equal contender.
Fontea is a free Photoshop extension to easily manage and apply hundreds of Google Fonts. You can search the font from inside Photoshop, preview, and apply the font straight into your design – streamlining your workflow.
This is a tool that enables you to build UI patterns or style guide for your website. It will generate things like the colors, basic styles or layout for components as well as the code snippet. A style guide generator like Drizzle will allow you to stay consistent with your website styles.
Picla is a jQuery plugin to show image labels retrieved from the image alt attribute. It provides a few options to let you add custom styling and motion to the label. Picla can be installed as your website dependency with Bower.
Here is a jQuery plugin to show modal popups. IziModal has lots of options for personalization. You can, for example, customize the animation, text content, colors. It is lightweight, responsive and retina-ready.
FlippingTypical allows you to view all the fonts installed on your system. I find this app to be more convenient than using the FontBook app in macOS. I type random text and see which of the fonts on my system look best.
A new IDE that I think is worth exploring. It started as a KickStarter project, backed by Matt Mullenweg (WordPress founder), and finally went open source. You can watch this video to get an idea of how cool this IDE is.
This is a handy tool from Microsoft to analyze your website for issues like browser compatibility and accessibility. The tool will list a report telling you if anything is not right about your website and how you can proceed to address the issue. Give it a try!