1350 Grid-ENSTEIN Demo

Decide your number of columns. Use consistent widths and margins 60px + 10px + 10px for example. 

60

Confirm your math will work in a 1366px width. A minimum of 1200px width is required for your Prototype.

Remember 10+60+10

Calculate the new .grid_x dimensions for 13, 14, 15, 16, & 17. OR for you new 12 in the space allotted.

Start the Base HTML Modifications

Change the h1 Headline Content. Change the h2 Headline Content. Change the <title> content.

Change the 960_12_col.css

File Save As...1360_17_col.css for example. RELINK the html file to the new stylesheet.  

Next, do the Base CSS Modifications   

.container_12 becomes .container_17 in CSS.  THEN apply .container_17 to <div>

AAAAUGH. it breaks all the .container_12 inheritances. 

Make Duplicate of Site. Then Site Manage the new site.

In the new site 

Find > Find and Replace in Files... and change in...Current Doc vs. Local Site. AWOOGA, cannot be undone!     

Fix the background grid size & image   

Apply width to .container and demo.css needs to change the grid image's background-repeat: repeat_y to repeat: repeat;

Begin Grid Updates for dimensions

For example., Add .grid_13, 14, 15, 16, 17 Then Add .container_17 .grid_13 etc with proper widths.

The .grid_17 must use float to work. Update Grid Globals with 13-17

Make your example use the new .grid_13, 14, 15, 16, & 17 to prove it is working.

Now you get it.!!

You just have to keep making the other updates.

My new grid

grid

grid

grid

grid

grid

grid