June 19, 2019
12 HTML5 & CSS3 Tools To Streamline Development
Up until recently HTML5 & CSS3 had issues with cross-browser support. That is now quickly dissipating. All of the latest versions of every modern browser supports almost all if not all features of these technologies and HTML5 is now competing against native apps for mobile devices. Here are 12 very helpful tools to help you streamline development with HTML5 and CSS3.
1# Modernizr
Modernizr Is a tool that every developer should have that creates HTML5/CSS3 websites. It’s a Javascript Library that helps detect the features of HTML5 and CSS3 in different browsers. Unfortunately, each browser is different and some tend to lag behind and do not support every single HTML5/CSS3 feature that is available. To avoid errors and other problems, Modernizr let’s us create a conditional statement so that we can tell our application what to do if in fact the feature is not available. Moderizr is 100% free.
2# Adobe Edge Animate
HTML5 brings us the ability to create interactive animations fairly easily. Adobe offers a software suite called “Adobe Edge” that is dedicated to enhancing the capabilities of their other applications such as Dreamweaver. Adobe Edge Animate is part of that suite. Edge is based on HTML5, CSS3 & Javascript. Applications built with Edge are also compatible with iOS and Windows Phone. Like most Adobe applications, Edge products are not free. Adobe Edge Animate standalone version is $10 per month, or you can get the “Creative Cloud Suite” which includes Edge Animate and is $50 per month.
3# HTML Kickstart
Kickstart is another fantastic tool for HTML5 development. Kickstart offers a large set of building blocks for HTML5 websites. It is similar to the Twitter Bootstrap application. There are buttons, icons, color sets, styles, menus, typography, tooltips and the list goes on and on. Kickstart is extremely easy to setup. Just download the files and add this block of code into your template/site’s area.
Visit HTML Kickstart
4# HTML5 Reset
HTML5 Reset can be used as a project starter or boiler plate, but it also gives us the ability to take applications and sites that you already built and actually “reset” them and include the latest best practices and the latest HTML5 and CSS3 features. The zip includes a rudimentary HTML file with the everyday stuff like the title, header and footer, it includes a few javascript files and tools such as modernizr and it includes a style.css file which is designed to reduce the default output from the browser, so that you get the same base styling on all of the different browsers.
5# CSS3, please!
CSS3, Please! Is an online CSS3 cross browser rule generator that was created by developers, Paul Irish and Jonathan Neal. It offers very helpful snippets that correctly implement the new features of CSS3. The best part about this is the box that is outputted to the screen which shows the styling in real-time. You can toggle the on and off state of every style rule. Rules include border-radius, gradients and other new CSS3 styling and features.
6# CSS3 Gradient Button Generator
CSS3 has given us some fantastic features that allow us to create great designs without the use of background images. The days of needing to use small precise images to give a rounded look to an element are over. Now we can even add pure CSS3 gradients to buttons and other elements. The Gradient Button Generator let’s us do this easily and allows us to view the different colors for the gradient and generate the code in just seconds.
Visit Gradient Button Generator
7# HTML5 & CSS3 Support
We can use Modernizr and other tools to test for HTML5 and CSS3 features, but we can also get the answer very quickly by using the HTML5 and CSS3 Support chart at fmbip.com. This is an updated table which displays the latest features along with which browser supports or does not support them. Need to know if IE8 supports a certain feature, such as border-radius or CSS3 transitions? You can find out in seconds.
Visit HTML5 & CSS3 Support
8# CSS3 Cheat Sheet
Smashingmagazine.com has a really helpful cheat sheet with all of the CSS3 features and code. I as a developer, have many of these types of cheat sheets and I will say that this is one of the best ones. There is a massive amount of information squeezed on to one page. There is a GIF preview version as well as a pdf version of the CSS3 Cheat Sheet.
9# Video.js
Video.js is a video player that is based on HTML5/Javascript. It allows developers to add videos that match and integrate seamlessly with the website. It is a more professional looking solution than an embedded video from Youtube. The documentation is well written and will have your site setup with video capabilities in just minutes. Videos support responsive designs, retina displays and customized CSS styling for the player.
10# Spritebox
A “sprite” is an image which we can use to give the effect of multiple images by using the “background-position” property. Sprites are usually used to change an image when hovered over. Sprites perform much better and faster than actually having multiple images. Spritebox is an online WYSIWYG tool which quickly creates CSS ids and classes from a sprite image and correctly align areas of the sprit into block elements on a page. Spritebox is based on HTML5, CSS3 and JQuery and is completely free to use.
11# Patternizer
Patternizer is another online generator tool that allows us to create really nice complicated patterns using the HTML5 “Canvas” feature. Patterns are great for backgrounds in headers, footers and other website elements. The canvas feature has better performance than if we were to use a background image. You can create and generate the code for your website in seconds. The patterns that you create can easily be saved and shared with anybody.
12# Font Dragr
I actually just found this tool today. Font Dragr allows you to test different fonts right on their website. It does this by using the CSS @font-face rule. You can drag any font from your computer into the select list at the top of their web page and it will transform all of the text on the page automatically without editing of any HTML or CSS. This is extremely helpful to be able to try out different sets of fonts for a website. You can find all the fonts on your Windows PC by going to “Control Panel->Appearance->Fonts”. You can then drag them to Font Dragr.
Visit Font Dragr
Brad Traversy is a web developer and tech writer at Tech Guy Web Solutions. Tech Guy specializes in affordable web design and open source website development as well as technologies such as PHP, MySQL and Ruby on Rails.
December 11, 2021
September 27, 2019
