Blueprint Css Framework Doesn't Errata

#1 DarelJ

New Member

Group: Members
Posts: 5
Joined: 20-August 07
Location:Atlanta, GA

Posted 26 March 2009 - 07:04 PM

I want to show the Blueprint grid over index.html, but the code on page 142 doesn't work. How can I do it?

#2 jsiarto

Active Member

Group: O'Reilly Author
Posts: 61
Joined: 05-January 09
Gender:Male
Location:Chicago

Posted 16 April 2009 - 06:57 AM

@rassclatt

You have to do a few things for this to work (and you may still get mixed results given the layering of the CSS).

1. In the index.html file of the RPM site you need to add the class "showgrid" to the container <div>. It should look like this:

CODE

<div id="wrap" class="container showgrid">

2. You're now going to get a page error because the browser is looking for grid.png.
3. This file is located in the blueprint/src directory. You can either move this to stylesheets/src or modify the screen.css file to point to the original location.

This should get the grid displaying, but you may need to mess with the CSS file in order to get things looking right.

If you're on a Mac, I'd suggest you take a look at Slammer (http://site.ringce.c...er/slammer.html). It's a standalone app that puts a flexible grid on your screen and can be used with any application, including the browser.

Hope this helps!

-Jeff

#3 DarelJ

New Member

Group: Members
Posts: 5
Joined: 20-August 07
Location:Atlanta, GA

Posted 22 April 2009 - 07:38 AM

QUOTE (jsiarto @ Apr 16 2009, 09:57 AM) <{POST_SNAPBACK}>

CODE

<div id="wrap" class="container showgrid">

Thanks.

#4 Abhishek Mishra

New Member

Group: Members
Posts: 1
Joined: 12-November 09

Posted 12 November 2009 - 06:25 PM

First of all, U have to generate the Blue Print CSS file (Grid.css) code from www.blueprintcss.org website. Then reference this file in your html page.

<html>
<head>
<body>
<div id="container" class="span-29 customCssClass">
Your content goes here........
</div>

</body></head>
</html>

Here above (span-29 customCssClass), Span-29 is the css class which determines the container width and by using ur customCssClass you may override this width to achieve extra margin, if at all required for ur page.
As far as possible we need to maintain the container's width using span's, so that ur design will be similar in all the browsers.

Happy coding,
Abhishek.Mishra

#5 clickpencil

New Member

Group: Members
Posts: 7
Joined: 21-February 13
Gender:Male
Location:uk

Posted 21 February 2013 - 05:58 AM

jsiarto you explain very well about index html and easily understanding.

Cool Landing Page Design

#6 morgan martel

New Member

Group: Members
Posts: 2
Joined: 25-March 13

Posted 25 March 2013 - 06:56 AM

You might had added incorrect CSS codes, removing or changing those value may fix the problem. That was also I encountered when I first work design Superbuzz.ca, a cheap web design in vancouver, canada. It is very much simple.