removing CSS classes

47 views
Skip to first unread message

Bryan Larsen

unread,
Oct 18, 2012, 2:14:36 PM10/18/12
to hob...@googlegroups.com
One feature of Hobo is that classes are merged, but other attributes
are replaced when overlapping attributes are merged. For example:

<def tag="foo">
<form id="form-foo" class="c" param/>
</def>

<foo>
<form: id="f17" class="d"/>
</foo>

results in <form id="f17" class="c d"/>

This simple rule has served us fairly well. In hobo 2.0, I added
special behaviour for the data-rapid attribute, which does a JSON
merge rather than replacement.

However, hobo_bootstrap may want to remove classes during an extend.
We haven't found a conflict yet, but one is certainly possible.

However, we do have one conflict within hobo_bootstrap itself.
Bootstrap supports 4 types of forms: default, search, inline &
horizontal. hobo_bootstrap chooses horizontal as the default through:

<extend tag="form">
<old-form: class="form-horizontal" merge>
<actions: class="form-actions"/>
</old-form:>
</extend>

and a replacement for field-list.

The problem is that this then prevents us from properly supporting the
other 3 types. Ignacio added a 'one-line-form' tag to hobo_bootstrap,
but that actually gets the styling subtly wrong because the form ends
up with both the form-horizontal and form-inline tags. The default
form would be impacted to a larger degree.

There's no doubt that horizontal is the right default.

So it would be nice to add support for removing classes when merging.
Anybody have a good suggestion for the syntax?

My first thought was

<form class="inline-form well -form-horizontal" merge>

But that syntax would prevent you from adding the -moz-foo class.
I'm sure we could come up with some sort of similar syntax that's much
less likely to cause problems

another suggestion:

<form class="inline-form well" remove-class="form-horizontal" merge>

thoughts?

Bryan

kevinpfromnm

unread,
Oct 18, 2012, 4:36:11 PM10/18/12
to hob...@googlegroups.com
I'd think the remove-class attribute would be the way to go since it's explicit and easy to understand what's happening.  My first thought as I read that (before I got to the remove-class section) was without-class but might be confusing/problem with the without-parameter shortcut syntax.

Ignacio Huerta

unread,
Oct 19, 2012, 11:11:36 AM10/19/12
to hob...@googlegroups.com, kevinpfromnm
-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

I agree. Being able to remove classes is going to simplify a lot of
work with dryml, and "remove-class" is clear and explicit.

Regards,
Ignacio

El 18/10/12 22:36, kevinpfromnm escribi�:
> -- You received this message because you are subscribed to the
> Google Groups "Hobo Dev" group. To view this discussion on the web
> visit https://groups.google.com/d/msg/hobodev/-/AFrIoLr5dJkJ. To
> post to this group, send email to hob...@googlegroups.com. To
> unsubscribe from this group, send email to
> hobodev+u...@googlegroups.com. For more options, visit this
> group at http://groups.google.com/group/hobodev?hl=en.

- --
Ignacio Huerta Arteche
http://www.ihuerta.net
Tel�fono: 0034 645 70 77 35
Email realizado con software libre
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.11 (GNU/Linux)
Comment: Using GnuPG with Mozilla - http://www.enigmail.net/

iEYEARECAAYFAlCBRgUACgkQBPlUJ6RHaOTIDgCg7mTX2TyoAAC3CPZjBmmzuqzV
d04AoLT+u9ELqGhMtuDY6Tn6jT2n/2iv
=dOrk
-----END PGP SIGNATURE-----

tonym

unread,
Dec 6, 2012, 5:02:37 PM12/6/12
to hob...@googlegroups.com
Hi Bryan,
not sure which release this came in, but it's certainly useful.  However, I think there's a fault...

<def tag="card" for="MyEvent">
  <card class="my-event" param="default" class="viewdiv" remove-class="well" merge>
    <header: param>
      <h4 param="heading"><a><name/></a></h4>
    </header:>
    <body: param>
    </body:>
  </card>
</def>

Causes error: 

#<REXML::ParseException: Duplicate attribute "class"

Regards, Anthony

Matt Jones

unread,
Dec 6, 2012, 5:07:08 PM12/6/12
to hob...@googlegroups.com

On Dec 6, 2012, at 5:02 PM, tonym wrote:

> Hi Bryan,
> not sure which release this came in, but it's certainly useful. However, I think there's a fault...
>
> <def tag="card" for="MyEvent">
> <card class="my-event" param="default" class="viewdiv" remove-class="well" merge>
[snip]
> Causes error:
>
> #<REXML::ParseException: Duplicate attribute "class"

You've got two "class" attributes in this (class="my-event" and class="viewdiv"); the underlying XML parser doesn't know what to do with them.

--Matt Jones

Bryan Larsen

unread,
Dec 7, 2012, 8:37:50 AM12/7/12
to hob...@googlegroups.com
You can add more than one class to an element by space separating:

<card class="my-event viewdiv" ...

Bryan
> --
> You received this message because you are subscribed to the Google Groups "Hobo Dev" group.

tonym

unread,
Dec 11, 2012, 8:18:01 AM12/11/12
to hob...@googlegroups.com
sorry guys, just didn't spot it - too much coding time :/
Reply all
Reply to author
Forward
0 new messages