G5 Framework: HTML5 Web Development Framework

Design Inspiration Blog
Design Inspiration Blog -

G5 Framework started as a personal project. In an attempt to speed up workflow, reuse the best coding practices & similar coding techniques, the framework serves as a starter file for new websites.

Being an active member of the web design community, this framework is a result of a ton of reading and research. For over a year the framework was constantly changed, simplified, and updated with current best practices. The framework is very lightweight and only includes what I believe are the essentials.

The framework is free for personal & commercial use as long as humans.txt remains unchanged & in the index head. Don’t worry, you can add your team information in there also.

G5 Framework Details

Search Engine Optimization

1. robots.txt / robots meta for the search engines
2. canonical tag + 301 via htaccess to ensure all content is indexed under one domain
3. hidden CSS class – the SEO friendly way (negative margin instead of display none)
4. GZip for faster page load (speed affects rankings)

CSS

1. Prevent CSS caching
2. Cross browser border radius, box shadow, and opacity classes
3. Shorthand CSS / some basic reusable classes
4. Sticky footer (footer always stays on bottom of page – read: section.content must have a bottom padding equal or greater than the height of the footer)

CSS // Via Reset

1. Eric Meyer’s Reset Reloaded + HTML5 Baseline
2. Font normalisation
3. Webkit font smoothing
4. Force scrollbar
5. Formatting quoted code
6. Aligning Labels
7. Clickable inputs
8. Screenreader access
9. IE7 image resizing
10. Print styles

X(HTML) / Content

1. Clean code structure
2. 940px total content width
3. Initial design based on a F Layout
4. Remove image toolbar from old versions of IE
5. Always force latest IE rendering engine (even in intranet) & Chrome Frame

jQuery

1. jQuery 1.5.2 with fall-back (1.4.4 also included if needed)
2. Smooth scroll to top
3. HTML5 placeholder fallback
4. Navigation – remove margin from last item
5. Remove bottom padding from last paragraph

PHP

1. Add active class to navigation item based on page
2. GZip page (optional alternative to htaccess)

Packaged With

1. Modernizr 1.6
2. CSS3 PIE (to support cross browser CSS3 effects)
3. CSS3 Buttons (awesome reusable buttons)
4. Easy Grid (2-6 columns)
5. IE6 PNG Fix (if you need IE6 compatibility)
6. IE6 Update (if you want to show a update message to IE6 users)
7. Tipsy Tool Tips (Facebook like tool-tips)
8. Reveal Modals (great simple modals)
9. Orbit Image Slider (awesome image slider with 3 different animations, html captions, bullets, possibility for thumbnail bullets, etc…)

Demo
Download Now

G5 Framework: HTML5 Web Development Framework
Maan