Changing "p img" to "p img.left"

33 views
Skip to first unread message

Christian Montoya

unread,
Nov 6, 2008, 8:01:55 PM11/6/08
to bluepr...@googlegroups.com
Hello all,

There's one line of Blueprint that I always delete or change. It's
this, from typography.css:

p img { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }

Beginners have trouble with it, because it's not what they expect to
be a default setting when they start putting images in their
paragraphs. I would like to propose changing this to:

p img.left { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }

And, possibly, moving both "p img.left" and "p img.right" to the fancy
type plugin, since for most projects, they are not needed at all. But
before I commit these changes, I'd like to hear everyone's thoughts.
Agree? Disagree?

--
--
Christian Montoya
christianmontoya.net

chris thatcher

unread,
Nov 6, 2008, 9:25:54 PM11/6/08
to bluepr...@googlegroups.com
I like it though it would obviously not be backwards compatible.  If you get enough thumbs up I'd definitely advertise it loudly on the list and site.  It definitely something that trips me up as well though once I was aware of it I do the same thing too.

+1

thatcher
--
Christopher Thatcher

chris thatcher

unread,
Nov 6, 2008, 9:27:09 PM11/6/08
to bluepr...@googlegroups.com
oh, oops, though I'd vote for it to stay in the core.
--
Christopher Thatcher

Chris Eppstein

unread,
Nov 6, 2008, 11:27:41 PM11/6/08
to bluepr...@googlegroups.com
In my Sass port of blueprint, I have a stylesheet called "scaffolding". It's a collection of styles that make for good defaults, but are recommended that you remove them once you start doing any serious styling. I think it would be great if blueprint adopted this approach of encouraging people to remove a link to a stylesheet instead of removing styles from blueprint stylesheets. The latter approach makes it very hard to upgrade. I would fully endorse moving these styles out of core and especially to a "scaffold" stylesheet.

Here's my scaffolding.sass file:

Chris

chris thatcher

unread,
Nov 6, 2008, 11:38:45 PM11/6/08
to bluepr...@googlegroups.com
that a very interesting idea and I think very useful to future development in blueprint as a true framework.  scaffolding in most 'railable' frameworks though doesn't imply something that would be removed later in development, but rather something that saves the effort of hand writing a common pattern.  I would encourage thinking along the lines of utilities to provide scaffolding but reserve it for custom style names that translate to simplify blueprint patterns.  This end goal should be to never touch the core but override it with additional css files included later.

Thatcher
--
Christopher Thatcher

Thibaut Barrère

unread,
Nov 7, 2008, 2:19:21 AM11/7/08
to bluepr...@googlegroups.com
Hello Christian,


> There's one line of Blueprint that I always delete or change. It's
> this, from typography.css:

> p img       { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }

+1. I prefer having a specific left and right, and keep the default non floating.

cheers,

Thibaut Barrère
--
[blog] http://evolvingworker.com - tools for a better day
[blog] http://blog.logeek.fr - about writing software


On Fri, Nov 7, 2008 at 2:01 AM, Christian Montoya <sir...@gmail.com> wrote:

Hello all,

Graham Evans

unread,
Nov 7, 2008, 8:47:01 AM11/7/08
to bluepr...@googlegroups.com
Thibaut Barrère wrote:
> Hello Christian,
>
> > There's one line of Blueprint that I always delete or change. It's
> > this, from typography.css:
>
> > p img { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
>
> +1. I prefer having a specific left and right, and keep the default
> non floating.
>
+1 for me too. "Backwards compatibility" can be obtained by leaving the
old stylesheet in place on your site. Why upgrade a stylesheet on a
site with a finished design. Obviously redesigns could be an issue but
until blueprint reaches the level 100% common sense it needs to keep
evolving and not get stuck up on backwards compatability (let the
browser makers worry about that).

Graham
>

pg...@cix.co.uk

unread,
Nov 7, 2008, 2:42:10 PM11/7/08
to Blueprint CSS
+1 for me. I found that the treatment of images was a surprise, and I
think explicit left and right clearer.
But I'm a comparative newbie here...

pgbw

Bluenewbie

unread,
Nov 8, 2008, 12:26:52 PM11/8/08
to Blueprint CSS
Interesting.. I do exactly the same thing - add .left to the img

Jay

Christian Montoya

unread,
Nov 8, 2008, 4:46:27 PM11/8/08
to bluepr...@googlegroups.com
On Sat, Nov 8, 2008 at 12:26 PM, Bluenewbie <acug...@gmail.com> wrote:
>
> Interesting.. I do exactly the same thing - add .left to the img
>
> Jay

OK everyone, let this be an official announcement that

p img { ... }

is now

p img.left { ... }

That's one less thing you'll have to mess with when you add Blueprint
to a new project!

iro...@googlemail.com

unread,
Nov 9, 2008, 5:32:07 PM11/9/08
to Blueprint CSS
Excuse me! This was a default that made sense to me. I always thought
the "float: left" is intended to keep the baseline grid intact.

If I place an an image within a paragraph and don't float it (take it
out of the regular document "flow"), the following lines will be glued
to the images' bottom, right?
Do i get HTML/CSS wrong or are you aiming to destroy this awesome
feature?
In case i got things right, you guys get a major big minus 1 from me.

-1

Christian Montoya

unread,
Nov 9, 2008, 7:00:26 PM11/9/08
to bluepr...@googlegroups.com

iroybot, I think I can give you a reason why some images would belong
in the normal document flow. One example of such would be sparklines,
and another would be emoticons.

Sparklines:
http://code.google.com/apis/chart/types.html#sparkline
http://omnipotent.net/jquery.sparkline/

Emoticons:
http://codex.wordpress.org/Using_Smilies

The only reason you want to "pull" an image out of the normal flow is
if it does not belong in the flow to begin with. If you put an IMG
inside a P, then it makes more sense semantically for that IMG to be
an inline bit of content (like a sparkline or an emoticon) than a
picture of a dog (as in the example page). Blueprint started out with
a focus on making webpages pretty by default, but in order to make it
into a framework that is widely used and flexible, it needs to be
developed with a "big picture view" of how many pages on the web would
be coded semantically.

I hope you'll understand this decision, as it has already been
committed into version 0.8.

iro...@googlemail.com

unread,
Nov 10, 2008, 7:56:06 AM11/10/08
to Blueprint CSS
touché :)
Reply all
Reply to author
Forward
0 new messages