What’s in the box?

Let's go over in what's included in the framework. All the nuts and bolts of the files you need to be familiar with so you can use the framework.

index.html - The the index file is the demo page. This page includes all of the elements this framework offers. This page can be emptied from content and used as a base for your new website. It includes examples of the elements HTML5 offers, and the elements the stylesheets add special styling to. This page is not required what so ever.

grid_demo.html - The grid_demo is a page filled with all the possibilities for our grid. It is a great place to start if you have never used a grid before. It is very straight forward as it's based on a column/row system.

html5.js - this javascript file is what allows us to use the HTML5 elements today. It basically goes to the dom and generates all the elements HTML5 has to offer us. Header, footer, and so forth. This file is not required for HTML5 compliant browsers, but it will not ruin your display it degrades nicely.

general.css - this file includes all the general styles. The common classes we use like .left to float an element left. Styles for all your header elements and form elements. This stylesheet is not necessary for you to use the framework. You might want to edit it to fit your websites styles.

grid.css - the grid stylesheet contains your grid styling. The grid system is loosely based on the 1kb grid and 960.gs. Read the documentation on using the grid below. You do not need to use this.

reset.css - based on the Eric Meyers reset this reset stylesheet has been modified by me to include the HTML5 elements the framework uses. You do not need this, but it suggested for easier cross-browser consistency.

code.jpg, code.psd - the code image is used for the <code> tag. It adds line numbers to pasted code. This is not a perfect solution as there are good javascript solutions out there, but it is a fun approach.The photoshop file is for your editing, if you want to change the style of it. The line height is very delicate so try to keep them the way they are.

grid.jpg, grid.psd - the grid.jpg is being deprecated in the next version, it was for preview purposes but now it is not necessary. The grid.psd is a good start point for designing your websites and then easily transferring them onto the 52framework. It has guides at all the column sizes.

Posted By: agrublev