Mailing List Archive: Zope: CMF

Pure CSS for main template

Index | Next | Previous | View Threaded

charlie at begeistert

Oct 5, 2008, 11:06 AM

Post #1 of 6 (636 views)
Permalink

Pure CSS for main template

Hi,

now that I've got my own branch I've finally made a start on a pure
CSS version of main_template.pr for CMFDefault. The idea is not to do
a redesign but to implement the existing one using CSS now that pretty
much all of the browsers in use have at least adequate support.
Customers will hopefully still want to have a different design but it
should be easier to do.

I'm using an "em" based elastic approach where the layout will "grow"
with the chosen text size. I know that most browsers have now caught
up with Opera and offer proper zooming but there are still lots of IE6
installs out there. I'm working on a baseline of 1024 x 768. Does
anyone have objections to this?

A couple of notes: currently I've ripped out a couple of the
containing divs to make my life a bit easier. Particularly the content
area seems to have one or two more than necessary. All the changes to
existing styles have been done in a new stylesheet.

The layout uses a "trick" to put content actions box to the left of
the content area. This is best way for multi-browser compatibility as
IE has a couple of famous bugs with nested containers. The only
drawback I know about this is that the content area appears before the
content actions box in the HTML.

I've setup a blueprint https://blueprints.launchpad.net/zope-cmf/+spec/pure-css-main-template

Feedback very welcome.

Charlie
--
Charlie Clark
Helmholtzstr. 20
Düsseldorf
D- 40215
Tel: +49-211-938-5360
GSM: +49-178-782-6226

_______________________________________________
Zope-CMF maillist - Zope-CMF[at]lists.zope.org
http://mail.zope.org/mailman/listinfo/zope-cmf

See https://bugs.launchpad.net/zope-cmf/ for bug reports and feature requests

jens at dataflake

Oct 5, 2008, 5:00 PM

Post #2 of 6 (589 views)
Permalink

Re: Pure CSS for main template [In reply to]

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

On Oct 5, 2008, at 20:06 , Charlie Clark wrote:
> now that I've got my own branch I've finally made a start on a pure
> CSS version of main_template.pr for CMFDefault.

Please make sure you stick to one functionality/change per branch to
make it easier for others to make a diff and understand all the
changes. I thought you wanted to use the branch for the
folder_contents work only ;-)

> The idea is not to do
> a redesign but to implement the existing one using CSS now that pretty
> much all of the browsers in use have at least adequate support.
> Customers will hopefully still want to have a different design but it
> should be easier to do.

CMFDefault represents a simple sample application for the CMF. It
doesn't have to be pretty by itself, but any changes should have these
goals:

- make it easier for people to customize the look-and-feel using CSS
only, or...

- make it easier to take the current main_template as a guideline
for a new main_template by making it as simple and understandable as
possible.

> I'm using an "em" based elastic approach where the layout will "grow"
> with the chosen text size. I know that most browsers have now caught
> up with Opera and offer proper zooming but there are still lots of IE6
> installs out there. I'm working on a baseline of 1024 x 768. Does
> anyone have objections to this?

I'd be opposed to any template that uses fixed widths and which does
not degrade gracefully with less or more width.

jens

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.8 (Darwin)

iEYEARECAAYFAkjpVRAACgkQRAx5nvEhZLKTNQCgs3pmw9BO48mfjL7mm/Qwr/ut
CZMAoLf+cGMThVL78uyftDpAA+QLMCRc
=n+t3
-----END PGP SIGNATURE-----
_______________________________________________
Zope-CMF maillist - Zope-CMF[at]lists.zope.org
http://mail.zope.org/mailman/listinfo/zope-cmf

See https://bugs.launchpad.net/zope-cmf/ for bug reports and feature requests

charlie at begeistert

Oct 6, 2008, 12:21 AM

Post #3 of 6 (588 views)
Permalink

Re: Pure CSS for main template [In reply to]

Am 06.10.2008 um 02:00 schrieb Jens Vagelpohl:

> Please make sure you stick to one functionality/change per branch to
> make it easier for others to make a diff and understand all the
> changes. I thought you wanted to use the branch for the
> folder_contents work only ;-)

oops, sorry! It's just I'd been planning to work on this for about a
year and yesterday was a good time to start. Should I create a
separate branch just for this?

>> The idea is not to do
>> a redesign but to implement the existing one using CSS now that
>> pretty
>> much all of the browsers in use have at least adequate support.
>> Customers will hopefully still want to have a different design but it
>> should be easier to do.
>
> CMFDefault represents a simple sample application for the CMF. It
> doesn't have to be pretty by itself, but any changes should have these
> goals:
>
> - make it easier for people to customize the look-and-feel using CSS
> only, or...
>
> - make it easier to take the current main_template as a guideline
> for a new main_template by making it as simple and understandable as
> possible.

I hope to achieve both of those.

>> I'm using an "em" based elastic approach where the layout will "grow"
>> with the chosen text size. I know that most browsers have now caught
>> up with Opera and offer proper zooming but there are still lots of
>> IE6
>> installs out there. I'm working on a baseline of 1024 x 768. Does
>> anyone have objections to this?
>
> I'd be opposed to any template that uses fixed widths and which does
> not degrade gracefully with less or more width.

hm, the current layout is fixed-width. The new one is not per se fixed-
width is driven by the size of the font that a user has. The argument
about growing and shrinking gracefully is important but it is also
important to maintain usability and particularly readability: having a
site expand to fit 100% can mean either extremely long lines or ugly
gaps between columns or conversely columns with line-breaks every
word. The following article covers the main issues concisely: http://www.htmldog.com/articles/elasticdesign/

What I am to do is to maintain the current design but make it much
easier to adapt through CSS, ie. swap between font-size based and
percentages. So good documentation of how the layout works is essential.

Charlie
--
Charlie Clark
Helmholtzstr. 20
Düsseldorf
D- 40215
Tel: +49-211-938-5360
GSM: +49-178-782-6226

_______________________________________________
Zope-CMF maillist - Zope-CMF[at]lists.zope.org
http://mail.zope.org/mailman/listinfo/zope-cmf

See https://bugs.launchpad.net/zope-cmf/ for bug reports and feature requests

jens at dataflake

Oct 6, 2008, 12:47 AM

Post #4 of 6 (592 views)
Permalink

Re: Pure CSS for main template [In reply to]

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

On Oct 6, 2008, at 09:21 , Charlie Clark wrote:

>
> Am 06.10.2008 um 02:00 schrieb Jens Vagelpohl:
>
>> Please make sure you stick to one functionality/change per branch to
>> make it easier for others to make a diff and understand all the
>> changes. I thought you wanted to use the branch for the
>> folder_contents work only ;-)
>
> oops, sorry! It's just I'd been planning to work on this for about a
> year and yesterday was a good time to start. Should I create a
> separate branch just for this?

If all you want to do is tweak the main_template then a branch is
overkill. I'd work directly on the trunk for that.

>>> What I am to do is to maintain the current design but make it much
> easier to adapt through CSS, ie. swap between font-size based and
> percentages. So good documentation of how the layout works is
> essential.

No worries, you've obviously done your homework. And thanks for taking
this up, the current template has indeed aged a lot.

jens

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.8 (Darwin)

iEYEARECAAYFAkjpwq0ACgkQRAx5nvEhZLL4zQCfRAYaFeglskxTGSrCmMGEWWOY
KhsAn1XneYNjThMRi9RFpJTApeTF2RhF
=wvkC
-----END PGP SIGNATURE-----
_______________________________________________
Zope-CMF maillist - Zope-CMF[at]lists.zope.org
http://mail.zope.org/mailman/listinfo/zope-cmf

See https://bugs.launchpad.net/zope-cmf/ for bug reports and feature requests

charlie at begeistert

Oct 6, 2008, 1:09 AM

Post #5 of 6 (591 views)
Permalink

Re: Pure CSS for main template [In reply to]

Am 06.10.2008 um 09:47 schrieb Jens Vagelpohl:

> If all you want to do is tweak the main_template then a branch is
> overkill. I'd work directly on the trunk for that.

Easy enough, I guess.

>>>> What I am to do is to maintain the current design but make it much
>> easier to adapt through CSS, ie. swap between font-size based and
>> percentages. So good documentation of how the layout works is
>> essential.
>
> No worries, you've obviously done your homework. And thanks for taking
> this up, the current template has indeed aged a lot.

I'm probably better at HTML and CSS than I am at Python, although that
said some of the newer stuff is pretty heavy. And having done a couple
of sites that borrow heavily from CMFDefault over the last couple of
years I've got an appreciation for what would make that easier.

Charlie
--
Charlie Clark
Helmholtzstr. 20
Düsseldorf
D- 40215
Tel: +49-211-938-5360
GSM: +49-178-782-6226

_______________________________________________
Zope-CMF maillist - Zope-CMF[at]lists.zope.org
http://mail.zope.org/mailman/listinfo/zope-cmf

See https://bugs.launchpad.net/zope-cmf/ for bug reports and feature requests

tseaver at palladion

Oct 6, 2008, 4:52 AM

Post #6 of 6 (591 views)
Permalink

Re: Pure CSS for main template [In reply to]

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Charlie Clark wrote:
> Am 06.10.2008 um 02:00 schrieb Jens Vagelpohl:
>
>> Please make sure you stick to one functionality/change per branch to
>> make it easier for others to make a diff and understand all the
>> changes. I thought you wanted to use the branch for the
>> folder_contents work only ;-)
>
> oops, sorry! It's just I'd been planning to work on this for about a
> year and yesterday was a good time to start. Should I create a
> separate branch just for this?
>
>>> The idea is not to do
>>> a redesign but to implement the existing one using CSS now that
>>> pretty
>>> much all of the browsers in use have at least adequate support.
>>> Customers will hopefully still want to have a different design but it
>>> should be easier to do.
>> CMFDefault represents a simple sample application for the CMF. It
>> doesn't have to be pretty by itself, but any changes should have these
>> goals:
>>
>> - make it easier for people to customize the look-and-feel using CSS
>> only, or...
>>
>> - make it easier to take the current main_template as a guideline
>> for a new main_template by making it as simple and understandable as
>> possible.
>
> I hope to achieve both of those.
>
>>> I'm using an "em" based elastic approach where the layout will "grow"
>>> with the chosen text size. I know that most browsers have now caught
>>> up with Opera and offer proper zooming but there are still lots of
>>> IE6
>>> installs out there. I'm working on a baseline of 1024 x 768. Does
>>> anyone have objections to this?
>> I'd be opposed to any template that uses fixed widths and which does
>> not degrade gracefully with less or more width.
>
>
> hm, the current layout is fixed-width. The new one is not per se fixed-
> width is driven by the size of the font that a user has. The argument
> about growing and shrinking gracefully is important but it is also
> important to maintain usability and particularly readability: having a
> site expand to fit 100% can mean either extremely long lines or ugly
> gaps between columns or conversely columns with line-breaks every
> word. The following article covers the main issues concisely: http://www.htmldog.com/articles/elasticdesign/
>
> What I am to do is to maintain the current design but make it much
> easier to adapt through CSS, ie. swap between font-size based and
> percentages. So good documentation of how the layout works is essential.

+1.

Tres.
- --
===================================================================
Tres Seaver +1 540-429-0999 tseaver[at]palladion.com
Palladion Software "Excellence by Design" http://palladion.com
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.6 (GNU/Linux)
Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org

iD8DBQFI6fv7+gerLs4ltQ4RAhMVAJ45Q/F8bULeypNSh4xtOs8i6fxFHACgmWG+
hvH/zoRSbG9AeLbajEpA3GU=
=T1ks
-----END PGP SIGNATURE-----

_______________________________________________
Zope-CMF maillist - Zope-CMF[at]lists.zope.org
http://mail.zope.org/mailman/listinfo/zope-cmf

See https://bugs.launchpad.net/zope-cmf/ for bug reports and feature requests

Index | Next | Previous | View Threaded

Interested in having your list archived? Contact lists@gossamer-threads.com