# FAQ

Q: What is the main objective?

To increase the speed of development while maintaining code quality, structure, consistency, and promoting standards and good principles.

Q: How is G5Framework different from Bootstrap and/or HTML5BP

The main purpose is the same, to provide a solid start point for web projects. However the overall product is different and assumes many different web developent principles. Also unlike Bootstrap, G5Framework leaves the UI development up to you (the developer).

Q: What browsers are supported?

IE7+, Chrome, Firefox, Safari, Opera

Q: Is it a framework?

No, G5Framework is a website starter boilerplate.

Q: Why do you call it "G5Framework"?

Because it's much different than your usual boilerplate.

Q: What style guide does the boilerplate use?

G5Framework uses Google's HTML/CSS/JS style guides.

Q: Can I use G5Framework for commercial projects?

Use it for anything you need, however you are required to leave a reference to the humans.txt file.

Q: I don't like PHP, whats the deal?

PHP use is pretty minimal, and it will only take a few minutes to strip out all the PHP from the project, so if you want to use the other stuff you still can with minial effort.

Q: I don't want to use jQuery and/or I want to handle my JS differently.

Open up app.js and adjust whatever you need, besides Modernizr which always needs to live in the head, all JS is referenced from app.js (which lives before the closing body tag).

Q: Who created G5Framework?

The project is managed by Greg Babula, see humans.txt for the full list of authors.

# Breakdown

HTML

• POSH (Plain Old Semantic HTML)
• Microformats
• Accessibility
• SEO
• Favicons for everyone

CSS

• Reset + HTML5 Baseline + Normalize + Print Base
• CSS3 Pie 2
• OOCSS
• OOCSS Grid
• OOCSS Buttons
• Responsive (Under 480px gets 1 col layout)
• Responsive Tables
• Reusable cross-browser classes
• @font-face Icon font

jQuery/JavaScript

• Modernizr 2.6.2
• iOS Orientation Fix
• jQuery 1.9.0
  • Simple Tabs
  • Simple Modals (Example, Exit Ramp)
  • Form Example
    • jQuery Metadata
    • jQuery Custom Input (Radio/Checkbox replacement)
    • jQuery Placeholder Fallback
    • jQuery Validation
  • Strict Mode
  • Console.log fallback
  • jQuery from CDN with local fallback
  • Asset loading via YepNope
  • Cache main elements
  • Cache location
  • Smooth scroll
  • Print

PHP

• GZIP
• Canonical URL
• Include

# OOCSS Grid

Further explanation can be found here.

# Buttons

# Simple Modals

# Simple Tabs

# Form Example

# CSS Classes

# JS Hooks

                                                
                                                    rel="modal" data-modal_content="example"

                                                    href="http://google.com" rel="external"
                                                
                                            

                                            
                                            var simpleTabs = new g5Tabs();

                                                simpleTabs.init({

                                                el: $('.simple-tabs')

                                            });
                                            
                                        

                                            
                                            $document.find('.scroll-to').on('click', function(){

                                                var scrollDestination = $(this).attr('href');

                                                $(scrollDestination).smoothScroll();

                                                return false;

                                            });
                                            
                                        

# Principles

• Mobile First
• Graceful Degradation / Progressive Enhancement
• Feature Detection
• Single Responsibility Principle

# Notes

• Before moving to production, remember to make a fresh build of Modernizr, concatenate, minify, and GZip all CSS & JS assets
• Consider switching to CSS3 Pie 1 as it's more stable than Pie 2 beta 1 (your testing needs to justify this)
• Refer to this checklist to make sure the website is accessible.
• Only keep what you need from the boilerplate, don't load assets that are not going to be used

# Related Style Guides

• Google HTML/CSS Style Guide
• Google JS Style Guide
• Isobar Code Standards

# Related Reading

• OOCSS Grid
• Microformats
• Accessibility Checklist
• Strict Mode
• Responsive Tables
• $.browser Property
• Understand the Favicon
• The many faces of mobile first
• About HTML semantics and front-end architecture

# Favorites

• MDN
• HTML5 Please
• CSS3 Please
• The Accessibility Project
• Web Platform