#65 ✓resolved

Discrepancies between screen.css and grid.css

Reported by garethjmsaunders | February 26th, 2009 @ 06:38 PM

Looking at both versions 0.7.1 and 0.8 I've noticed that there are three discrepancies between the code in the screen.css file and the /src/grid.css file.

I am assuming that the code within screen.css and the component source files (e.g. reset.css, grid.css, typography.css, etc.) should be in sync with one another, which would make sense.


In the file /blueprint/screen.css there are 24 .push-x and .pull-x classes; but in /blueprint/src/grid.css there are only five. This appears to be a hangover from Blueprint CSS v.0.6.

In screen.css there are 24 classes:

.push-1 {margin:0 -40px 1.5em 40px;} .push-2 {margin:0 -80px 1.5em 80px;} .push-3 {margin:0 -120px 1.5em 120px;} .push-4 {margin:0 -160px 1.5em 160px;} .push-5 {margin:0 -200px 1.5em 200px;} .push-6 {margin:0 -240px 1.5em 240px;} .push-7 {margin:0 -280px 1.5em 280px;} .push-8 {margin:0 -320px 1.5em 320px;} .push-9 {margin:0 -360px 1.5em 360px;} .push-10 {margin:0 -400px 1.5em 400px;} .push-11 {margin:0 -440px 1.5em 440px;} .push-12 {margin:0 -480px 1.5em 480px;} .push-13 {margin:0 -520px 1.5em 520px;} .push-14 {margin:0 -560px 1.5em 560px;} .push-15 {margin:0 -600px 1.5em 600px;} .push-16 {margin:0 -640px 1.5em 640px;} .push-17 {margin:0 -680px 1.5em 680px;} .push-18 {margin:0 -720px 1.5em 720px;} .push-19 {margin:0 -760px 1.5em 760px;} .push-20 {margin:0 -800px 1.5em 800px;} .push-21 {margin:0 -840px 1.5em 840px;} .push-22 {margin:0 -880px 1.5em 880px;} .push-23 {margin:0 -920px 1.5em 920px;} .push-24 {margin:0 -960px 1.5em 960px;}

while in /src/grid.css there are only five:

.push-1 { margin: 0 -40px 1.5em 40px; } .push-2 { margin: 0 -80px 1.5em 80px; } .push-3 { margin: 0 -120px 1.5em 120px; } .push-4 { margin: 0 -160px 1.5em 160px; } .push-5 { margin: 0 -200px 1.5em 200px; }

It's a similar matter for .pull-x classes.

(2) SPAN-24 CLASS screen.css has

 .span-24, div.span-24 {width:950px;margin:0;}

/src/grid.css has

 .span-24 {width:950px;margin:0;}

In other words the declaration for div.span-24 is missing in the component file.

(3) INPUT.SPAN, TEXTAREA-SPAN, SELECT-SPAN screen.css has 24 classes for input.span, textarea-span, select-span

input.span-1, textarea.span-1, select.span-1 {width:30px!important;} input.span-2, textarea.span-2, select.span-2 {width:50px!important;} etc.

However, these are missing in the /src/grid.css file.

I'm assuming that these differences are not intentional. So I hope that helps. I'm attaching the diff file that I created when discovering this.



Gareth J M Saunders Anstruther, UK

Comments and changes to this ticket

  • Christian Montoya

    Christian Montoya August 20th, 2009 @ 03:51 PM

    • State changed from “new” to “hold”

    This is an interesting conundrum. The compressed screen.css file reads from reset.css, typography.css, forms.css, and GRID.CSS.ERB, not grid.css. So the one that usually gets maintained is grid.css.erb, while grid.css might fall by the wayside. I think 0.9 fixed this problem, so let me know if you see any differences in 0.9+.

  • Christian Montoya

    Christian Montoya August 20th, 2009 @ 03:51 PM

    • Assigned user set to “Josh Clayton”
  • Josh Clayton

    Josh Clayton August 20th, 2009 @ 04:34 PM

    • State changed from “hold” to “resolved”

    This shouldn't be an issue anymore, as the compressor is run to generate the grid.

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

The Blueprint CSS framework

People watching this ticket