Every once in a while, we stumble across some helpful sites that not only inspire, but push the viewer to learn and better understand the subject. While developing and designing a new site, do you ever say to yourself: I wish I had more resources to help me accomplish this task faster? We do. In fact, we say it to ourselves everyday. Thats why we are constantly on the search for the next batch of fresh development tools created by other developers like ourselves. These resources can teach us a new framework, give UX and design tips, and light up our day with color palette samples to use on our own sites. We want to share these Caxy favorite front-end tools with you.
1. SVG Basics Series
http://www.vanseodesign.com/web-design/svg-basics
Vanseo Design gives us a crash course in Scalable Vector Graphics. SVG’s, as they’re referred to, is an XML language to describe the two-dimensional graphic that include shapes, images, and text. This is the first in a series by Vanseo Design that walks the user through an introduction on the benefits of SVG files while giving examples of how to set up your own. Further posts, found here, cover creating shapes, setting fills, and styling for the viewport.
2. Flex Box In 5
Flexbox In 5 promises exactly what it states: learn the functions of thenew CSS property called the Flex Box in 5 minutes. This site is too interactive and fun to pass up the chance to learn more about the idea of Flex Boxing.. After getting a quick tour of the properties of a Flex Box, the site allows you to create your own using the Control Panel while adjusting the styling options to change its appearance, size, and color. The real steal from this hands-on learning is the code sample box in the lower right hand corner that outputs the CSS code from the very Flex Box you’re creating. This means that when you’re done creating your masterpiece, you can simply copy and paste your code in a CSS file for future use on your next big web project.
3. Bootstrap Freebie UI Kit
https://www.behance.net/gallery/20188269/L-Bootstrap-Freebie-UI-Kit-Inspired-by-Android-L
The free Bootstrap UI kit features all the elements and components of Bootstrap 3.2 in one tidy little collection. This kit, which was inspired by Android, contains all its features in easy to extract PSD files, just in time for your next mockup designs. Some of the elements included in this bundle include buttons, carousels, tables, dropdowns, navbars, and the list goes on. Scroll all the way to the bottom of the page to find the Download link, and from there, let your inner creative process unleash.
4. Colorable
Colorable is a color combination and contrast tester. In other words, a designers dream palette. The main table shows a selection of font colors in the far left column, with the corresponding row showing the font color on a variety of background colors to see how it contrasts. This tool can help find safe color combinations and even includes a pass/fail score based on WCAG accessibility guidelines. The site includes the option to set the hue, saturation, and lightness of the font/background colors to tweak and adjust until the perfect color combo is found. Installation instructions are also included to set this up on your own computer and change the color options that appear by default. This feature might be for the more hardcore Colorable users, but is a testament to how powerful a tool this can be.
5. Perf Tool Today
Performance Tooling Today is all about automating, monitoring, and improving. Perf-Tooling is a collection of powerful resources, including tools, articles, video tips, and books, to improve your workflow and deliver faster and better websites. The tools are scripts, plugins, and libraries that can be installed and configured on your computer. A few of the options include CSS analyzers, PHP app performance booster, and on-demand resizing, optimization, and conversion of high-res images. Each tool links to its respective site or download link for configuration. Under the article and videos menu are links to articles and posts with tips as well as video tutorials showing how to improve your sites performance while understanding how the code within the site affects the speed.
