Bootstrap have just released a new tool which lints your Bootstrap based websites and automatically advises you if you’re making any of many common Bootstrap usage mistakes. If you want to try this out straight away then read on.
UPDATE #2: The Bootlint team have incorporated my idea into the project as an official way to use their tool. In the process some of the code was changed (eg auto-lint-on-load was disabled) so my original bookmarklet no longer works. Please visit the official Bootlint documentation for more information about how you can now use the bookmarklet.
I’ve always been a big fan of validators. In the early days all of my websites achieved 100% validation with the trusty w3c validator but as time went on standards marched forwards, validators lot left behind with the old standard code and if anyone wanted to use a social media widget you could forget that green pass mark.
So when I heard that the makers of Bootstrap had released a new validator tool I immediately clicked through to find out more.
It turned out that they had released it on Github but when I visited I couldn’t see an online demo.
The “in your browser” option meant downloading the file and manually including it in your mark-up.
My first thought was this should be a bookmarket but when I tried to include the file from raw.githubusercontent.com it complained that the mime type was incorrect.
One further search and I found out that this had happened many times before and geeks had already solved this with github mirror sites such as rawgithub.com.
Update: I have now changed the link in the bookmarklet to use the latest copy from bootstrapcdn.com which is the recommended way to include bootstrap and co into your sites so it should be more stable in the long run.
Visit the Bootlint documentation page here for the official bookmarklet:
UPDATE: Chrome extension created!
I have now converted this over to a Chrome extension which is available in the Chrome Web Store.
It offers the same functionality as this bookmarklet but doesn’t require you to have your bookmark bar on show, it just sits in the corner as a single icon button:
Get more info over at the official project page.
How to use this
- Drag the button above over to your bookmarks toolbar
- Visit one of your Bootstrap powered websites
- Press F12 to open developer tools
- Click on to the Console tab
- Click the bookmarketlet that you added to the toolbar
You will then see the errors that it has found with your site such as:
If you run it on an older Bootstrap v2 website then it will also detect this and warn you:
I can’t see the bookmarks toolbar!
If you’re using a minimal hud browser such as Chrome you will have to enable the browser bar by:
- Clicking the settings button which has three horizontal lines for its icon
- Select Bookmarks
- Choose Show bookmarks bar
You will now see the bookmark bar along the top of all of your tabs. Follow the instructions in the “How to use this” section above.