Web boilerplate stack (HTML5, CSS3, jQuery, and PHP). G5Framework provides some rock-solid code and functionality for you to start with, however it leaves all the remaining development and styling up to the developer.

K License: Must leave reference to humans.txt

D Download: ZIP, Source on GitHub

# 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

CSS

jQuery/JavaScript

PHP

  • GZIP
  • Canonical URL
  • Include

# OOCSS Grid

Further explanation can be found here.

1/2

Lorem ipsum dolor sit amet…

1/2

Lorem ipsum dolor sit amet…

1/5

Lorem ipsum dolor sit amet…

Lorem ipsum dolor sit amet…

Lorem ipsum dolor sit amet…

1/2

Lorem ipsum dolor sit amet…

1/2

Lorem ipsum dolor sit amet…

1/3

Lorem ipsum dolor sit amet…

Lorem ipsum dolor sit amet…

1/2

Lorem ipsum dolor sit amet…

1/2

Lorem ipsum dolor sit amet…

1

Lorem ipsum dolor sit amet…

1/5

Lorem ipsum dolor sit amet…

Lorem ipsum dolor sit amet…

Lorem ipsum dolor sit amet…

# Buttons

# Simple Modals

# Simple Tabs

Tab One Content

Lorem ipsum dolor sit amet…

Tab Two Content

Tab Two Lorem ipsum dolor sit amet…

Tab Three Content

Tab Three Lorem ipsum dolor sit amet…

# Form Example

Thank You

Sample AJAX-type thank you message, see the console to take a look at the serialized data.

# CSS Classes

Class Description
.wrap-max Wrapper which spans 100%
.wrap Wrapper which declares min and max width and provides main gutters.
.line Groups units on one horizontal line. Note: for mobile layout units may be stacked to avoid horizontal scrolling.
.unit Base class which divides a line into sections (columns).
.sizeXofY Extends unit. Indicates the fractional width of the unit, for example size3of4 would take up three quarters, or 75%, of the horizontal space. The following fractions are supported: 1, 1/2, 1/3, 2/3, 1/4, 3/4, 1/5, 2/5, 3/5, 4/5
.lastUnit Extends unit. Applied to the last child of every line.
.none Sets elements display to none
.hidden Hide element from page, moves element from viewport
.invisible Makes element invisible
.block Makes element a block
.in-block Makes element an inline-block and applies fix for IE7
.first Removes margin-left from element
.last Removes margin-right from element
.left Float element left
.right Float element right
.clear Clear both left and right floats
.t-icon Modern pictograms icon font class
.form-validation Attaches error styling to form
.focus-increase Increase input width on focus
.custom-checkbox Custom checkbox replacement
.custom-radio Custom radio replacement
.error Apply red text to element
.success, .valid Apply green text to element
.btmspc Add 2em margin bottom to the element
.btmspc-dbl Add 4em margin bottom to the element
.topspc Add 2em margin top to the element
.topspc-dbl Add 4em margin top to the element
.cntrtxt Align text to center
.imgtxt If applied to element next to image, allows text to flow next to image and not below.
.loading Add loading indicator to element
.sprite Sets display to block and hides overflow
.button Declares element as a button, makes inline block and attached pointer cursor
.smooth Adds transition to element
.brdr Border radius fix and CSS3Pie fallback
.brdr-primary Applies 5px border radius
.shdw Applies box shadow and provides CSS3Pie fallback
.opct Changes opacity to 50%
.opct-full Changes opacity to 100%
.navigation-object Style for standard primary navigation
.list-object Removes list-styling from element
.island Identifies element as a container block
.primary Identifies primary navigation
.modal Identifies modal and provide modal style
.overlay Overlay container
.overlay-bg Provides cross-browser opaque backdrop for modal
.tabs Primary tabs container, attaches base style
.tabs-content Individual .tab container

# JS Hooks

Selector Information
.overlay If element present, loads modal.js file and attaches events. Can be enabled/disabled via WebApp.init(obj);
To launch a modal, rel="modal" attribute and modal_content data attribute are required. To launch an exit ramp, rel="external" and the external href is required.
All modals live in parts/modals.php, data-modal_content is the id of the element to be loaded.
                                                
                                                    rel="modal" data-modal_content="example"
href="http://google.com" rel="external"
.form-validation If element present, loads jquery.validate.min.js, validation.js, and attaches form validation events to all forms with the class .form-validation. Can be enabled/disabled via WebApp.init(obj);
validation.js provides additional regex methods, overall validation pattern, and AJAX example.
.replace-input If element present, loads jquery.customInput.js and replaces any checkbox or radio input that has the class .replace-input. Can be enabled/disabled via WebApp.init(obj);
.tabs Selector ursed for main styling, tabs JavaScript is automatically loaded unless removed from load order in (app.js). A new instance of tabs can then be made via new g5Tabs();
                                            
                                            var simpleTabs = new g5Tabs();
    simpleTabs.init({
    el: $('.simple-tabs')
});
.scroll-to On click smoothly scrolls to 70px before element with id thats equals to the anchor href value
                                            
                                            $document.find('.scroll-to').on('click', function(){
    var scrollDestination = $(this).attr('href');
    $(scrollDestination).smoothScroll();
    return false;
});
.print On click dispatches print event

# Principles

# 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

# Favorites