7 Boilerplates & Frameworks That Rock Big Time

“The website opens fine on Safari but it’s kind of messed up on Internet Explorer.”

Creating a website nowadays isn’t as straightforward as it used to be. There are many considerations to ponder over, one of them being compatibility across various browser types – Chrome, Firefox, Safari, Internet Explorer (don’t get us started…). Imagine the nightmares web developers have to go through when they start punching in their codes – the 1001 things to take into account. In short, coding a website from scratch is ammunition enough to shoot one’s brains out. But there are a few lifesavers: Boilerplates and Frameworks

Think about them as a foundational base which lays out all the coding fundamentals before you even start; stuff which you would have taken hours to code from scratch. All you need to do is add on and minus off specific codes according to your customised needs.

The Shortlisted of Our Top 7 Boilerplates & Frameworks for You.

Genesis Framework

The Genesis Framework is the core of any smart WordPress design, and the base framework that we use for 90% of our client sites. Key benefits include:

• Search engine optimised
• Offers sleek and professional turn-key designs with an array of beautiful frames for your content
• One low price entitles you to unlimited support, updates, and domains you can build on
• Built in line with WordPress best security practices to prevent malicious hacking
• Updates are tested beforehand so you don’t get any bugging problems
• Easily customisable with widgets, themes etc.

HTML5 Boilerplate

With the combined input of more than 100 developers, HTML5 Boilerplate helps you build fast, robust, and adaptable web applications and websites. Credibility wise, you’ll be pleased to know that Google, Microsoft, NASA, Nike and even Barack Obama are among its many users. Key benefits include:

• Lean, mobile-friendly HTML template
• Optimised Google Analytics snippet
• Placeholder touch-device icons
• Docs covering dozens of extra tips and tricks
• Includes Normalize.css v1, a modern HTML5-ready alternative to CSS resets that furthers base styles, helpers, media queries and print styles
• Includes two latest best-of-breed libraries: iQuery and Modernizr
• Apache settings to help deliver excellent site performance
• Independently maintains server configurations, a node build script and an ant build script

Bootstrap

Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is built on responsive 12 column grids, layouts and components. Key benefits include:

• Scaffolding global styles for the body to reset type and background, link styles, grid system and simple layouts
• Base CSS styles for common HTML elements like typography, code, tables, forms and buttons; also includes glyphicons, a little icon set
• Basic styles for common interface components like tabs and pills, navbar, alerts, page headers and more
• JavaScript plugins for interactive components of things like tooltips, popovers, modals, and more

960 Grid System

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. Key benefits include:

• Ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment
• Printable sketch sheets, design layouts, and a CSS file that have identical measurements
• Elements can be rearranged, independent of the order in which they appear in the mark-up; keeps more pertinent info higher in the HTML, without sacrificing precision in your page layout
• Alternative 24-column grid version with 10 pixel gutters and 5 pixel buffer on each container side, which keeps text from touching browser chrome; helpful for devices like the iPhone where a lower-case “I” or “I” might be easily missed

Unsemantic

As a CSS Framework, Unsemantic is a fluid grid system that is the successor to the 960 Grid System. It works in a similar way, but instead of being a set number of columns, it’s entirely based on percentages. Key benefits include:

• Built with extensibility in mind, using Sass and Compass
• Supports all major browsers: Chrome, Firefox, Internet Explorer (7+), Opera, and Safari
• Helps search engines determine the most relevant content on a page

Antwort

If you are one that’s looking for responsive email layouts which fit and adapt to your desired widths, Antwort’s for you. Key benefits include:

• Bulletproof layout made for transactional emails with dynamic content; layouts are thoroughly tested in live environments with real data and edge cases
• Experiential single column layout that works seamlessly across mobile and desktop platforms
• Universal compatibility across all devices
• Supports all email clients such as Apple Mail, Gmail, Android Mail, Outlook, Outlook.com, Hotmail, Yahoo! Mail and AOL Mail

HTML Email Boilerplate

The HTML E-mail Boilerplate creates a template of sorts, absent of design or layout, that will help you avoid some of the major rendering problems with the most common email clients out there — Gmail, Outlook, Yahoo Mail, etc.