Where is "The Quick Guide To Blueprint" ?

[Michael108]

The link to the Quick Guide is 404. Is there a new link or replacement
tutorial anywhere?

This page: https://github.com/joshuaclayton/blueprint-css/wiki/Tutorials

lists:

The Quick Guide To Blueprint
by Jason Swartz
http://www.blackrocksoftware.com/blog/quick_blueprint_guide

which gives 404 error. Any updates?

thanks!
Michael

[David Michael Pennington]

If you have a basic understanding of CSS and Blueprint's concepts,
Gareth Saunders' PDF cheatsheet is the best bang for your buck...
actually much better than the other hand-holding I've seen on
Blueprint.

http://www.garethjmsaunders.co.uk/blueprint

> --
> You received this message because you are subscribed to the Google Groups "Blueprint CSS" group.
> To post to this group, send email to bluepr...@googlegroups.com.
> To unsubscribe from this group, send email to blueprintcss...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/blueprintcss?hl=en.
>
>

[Bob Jones]

The cheatsheet is an excellent resource, but I'm flummoxed by the line-
height table at lower left on Page 2.

I understand the Blueprint line-height is 1.5. So, you would multiply
any type size by 1.5 to determine the line-height.

Can anyone explain the significance of the three columns of numbers in
Gareth's line-height chart?

Thanks.


On Mar 27, 2:58 pm, David Michael Pennington

[Michael108]

Hi David MP,

Thanks for the link. I am looking at the cheatsheet, and am wondering
if I need to include reset.css, since screen.css already has a number
of resets in it.

Is there some document that outlines the structure of the library so I
can start to figure out how what connects to what and what I need to
do to use all the parts?

thanks!
Michael

On Mar 27, 12:58 pm, David Michael Pennington

<penningtonth...@gmail.com> wrote:
> If you have a basic understanding of CSS and Blueprint's concepts,
> Gareth Saunders' PDF cheatsheet is the best bang for your buck...
> actually much better than the other hand-holding I've seen on
> Blueprint.
>
> http://www.garethjmsaunders.co.uk/blueprint
>

[Franz Josef Kaiser]

Hi list,

glad that you mentioned the outdated link. I already removed it.

First i wanted to push you at the nettuts link, but after roughly
reading over it, i realized that a lot of the stuff recommended is
against blueprints best practice (noted at the wiki now). I also saw,
that the wiki quick start guide is an empty page.

Due to the fact that Christian & myself are already (slowly) working
on blueprint 1.1 - which will bring some nice additions - we ain't got
too much time at the moment for writing tutorials.

My recommendation is the following:
+ Load our dev environment [1] ,which contains
-- a test page with some explanation
-- our debug plugin that will highlight every wrong useage of
blueprint classes
+ Grap the cheat sheet
+ take a look at our main site [2] and inspect the source of the live
demos [3] with firebug or similar
+ If you got questions left, post them here at the list and you'll
find a lot of people who can push you in the right direction

Looking at the time i got left over the next weeks i might be able to
wright a new quick start with the end of the coming week. Anyway i'll
announce it here on the list, so keep reading :)

Kaiser.

__dev environment will be part of bp 1.1., so don't miss it__
[1] https://github.com/franz-josef-kaiser/blueprint-dev---debug
[2] http://blueprintcss.org/
[3] http://blueprintcss.org/tests/

[garethjmsaunders]

> The cheatsheet is an excellent resource, but I'm flummoxed by the line-
> height table at lower left on Page 2.
>
> I understand the Blueprint line-height is 1.5. So, you would multiply
> any type size by 1.5 to determine the line-height.
>
> Can anyone explain the significance of the three columns of numbers in
> Gareth's line-height chart?

Hi Bob,

sorry for the delay in replying -- I've got 2.5 year old twins and a
16 week old baby too. I'm getting about 4-5 hours sleep a night and am
struggling to fit everything into my days (or nights, for that
matter!), so I hope this explanation makes sense.

If you add the "showgrid" class to the container (or any other
element) you'll see that it adds a background image outlining both
vertical columns and the horizontal lines. If you were to measure the
distance between the horizontal lines you'll find that they are 18px
apart (including the line). This is because of the following
calculation based on these CSS rules in screen.css:

Line 18: body {line-height:1.5 [...]}
Line 29: body {font-size:75% [...]}

You are right in saying that the line-height is 1.5 -- but 1.5 of
what? Line 29 sets the font-size to be 75% of the default, which in
most browsers is 16px. So,

16px * 75% = 12px

Then multiply that by 1.5 to get the line-height in pixels:

12px * 1.5 = 18px

So the green LINE-HEIGHT box on page 2 of my cheatsheet is something I
use quite a lot. It gives me a quick ready-reckoner to tell me that if
I want to create any images and ensure that they maintain the vertical
rhythm created by the line-height that's the height I need to make
them. An image that takes up 5 lines of text will be 90px high; an
image that takes up 10 lines of text (fills 10 rows on the showgrid
background) needs to be 180px high, etc.

Does that make sense?

Sincerely,

Gareth J M Saunders
Anstruther, Scotland, UK

[Christian Montoya]

On Mon, Mar 28, 2011 at 11:20 PM, Michael108 <michael...@gmail.com> wrote:
> Hi David MP,
>
> Thanks for the link. I am looking at the cheatsheet, and am wondering
> if I need to include reset.css, since screen.css already has a number
> of resets in it.

Screen.css is a compressed version of reset.css, grid.css,
typography.css and forms.css. If you include screen.css, you have all
4 of those files in 1. You just need to reference screen.css for
screen, print.css for print, and ie.css for the IE conditional
comment, and that's the Blueprint core.

--
--
Christian Montoya // Decktonic
thisisdecktonic.com :: christianmontoya.net

[Bob Jones]

Thank you, Gareth!

I actually misread the line-height chart. Looking at it now, I can see
it's two separate columns, side by side, adding increments of 18.

Now, when a user places an image that is wrapped in text, does it
matter if the image follows the depth chart in 18px increments? Or
will the line-height of the text accommodate?

Thanks.

[Christian Montoya]

If you want to put an image in-line, it should be a multiple of 18px.
If you want to put one that will take its own line, it should still be
a multiple of 18px, or be contained in a box that is padded
accordingly. If you want to float an image within text, then I don't
think it matters.

[Bob Jones]

Will do. Thanks for the explanation.