[Zope3-checkins] SVN: Zope3/trunk/src/zope/app/css/ CSS test skin:
Roger Ineichen
roger at projekt01.ch
Thu Feb 17 15:38:43 EST 2005
Log message for revision 29178:
CSS test skin:
Add package css with a skin called ++skin++CSS for testing new CSS styles.
This package will probably removed later. We need it for testing propose and
define a CSS style guide. Don't build other skins base on this package.
The skin is base
Changed:
A Zope3/trunk/src/zope/app/css/PROPOSAL.txt
A Zope3/trunk/src/zope/app/css/README.txt
A Zope3/trunk/src/zope/app/css/TODO.txt
A Zope3/trunk/src/zope/app/css/__init__.py
A Zope3/trunk/src/zope/app/css/configure.zcml
A Zope3/trunk/src/zope/app/css/skin.css
A Zope3/trunk/src/zope/app/css/zope3.css
-=-
Added: Zope3/trunk/src/zope/app/css/PROPOSAL.txt
===================================================================
--- Zope3/trunk/src/zope/app/css/PROPOSAL.txt 2005-02-17 20:38:00 UTC (rev 29177)
+++ Zope3/trunk/src/zope/app/css/PROPOSAL.txt 2005-02-17 20:38:41 UTC (rev 29178)
@@ -0,0 +1,156 @@
+Cascading Style Sheet - Style Guide
+
+ Status
+
+ IsProposal
+
+ Author
+
+ Roger Ineichen
+
+ Problem/Proposal
+
+ First, it's important to understand what's the target of this style guide.
+ Zope3 has a form machinery and uses widgets for rendering fields to HTML.
+ The fields are defined in a interface. A object instance provides this
+ interface and has to define attributes/properties for the interface fields.
+
+ We have different directive for register pages, add and edit forms, views
+ etc. You don't have to write a single line of HTML for rendering interface
+ fields to HTML if you use the default registered page templates offered by
+ a directive.
+
+ If you register a page or view with such directive, a default page
+ template is used and a python view. The python view normaly calls
+ widgets for rendering the interface fields.
+
+ Both the page template and the widgets contains HTML. The page template
+ can be often easy replaced in the directive with the template="" attribute.
+ So we can use own page template with a page/view directive.
+
+ The widgets are written in Python.
+ This means a widget is implicit called and depends on the registration
+ to interface fields. It's not common to replace widgets, except you
+ need a real funny widget and there is no such widget in Zope3. A widget is
+ registred for a interface field. The widget renders most the time a HTML
+ form field like <input name="xy" id="xy" value="xxx" /> input fields.
+ You can define own widgets in most of the directive with the <widget>
+ sub directive.
+
+ Widgets has many attributes in the directive where you can use. Like
+ the width and height of a <textarea> tag. This includes also CSS styles
+ with the attribute styles="".
+
+ You see there is all implemented for useing own styles. You can write
+ own page tempalte use in forms, you can define own stlyes in widgets
+ and you develop a own skin. I'm pretty sure you can customize Zope with
+ this components and you will never see a CSS tag except your owns.
+
+ Ok, it looks like we don't need a Style Guide? Every thing which defines
+ styles can be replaced?
+
+ Right but that's not what you whana to do in each project.
+
+ The target in the CSS Style Guide is to define minimal styles. We only
+ need real base level styles for widgets and generic forms. We also have
+ to make sure Zope3 forms and widgets use the same style for the same
+ component (component = title, header in forms).
+
+ It's not the target to write nice and funny styles where presenting a
+ skin in a special way. The target is to use less styles as possible
+ and add only styles if there is no other way.
+
+ Our work will be to find ways where we can offere a real generic base
+ for graphic people. To define nice CSS styles/skins is the job of
+ graphic people's.
+
+ HTML Style Guide?
+
+ Perhaps we have also write some rules for writting HTML. A good example
+ for this is how we use the form fields::
+
+ <div class="row">
+ <div class="label">
+ <label for="yx" title="xy">Label text</label>
+ </div>
+ <div class="field">
+ <input type=text" ...>
+ </div>
+ </div>
+
+ I propose not adding a own Style Guide for HTML. I think it's a part of
+ the CSS Style Guide. Or not?
+
+ Goals
+
+ - Define standard styles for Zope3 forms and widgets.
+
+ - Minimize the use of styles in Zope3's base packages. Or if not possible
+ make sure we use a way which allows grafic people to customize the
+ default styles in a easy way.
+
+ - Less is often more.
+
+ Proposed Solution
+
+ 1. Split form, widget and skin styles in different CSS files.
+
+ Split all styles used in page templates used in directives to a own css
+ file. Let's call it form.css
+
+
+ 2. Define default styles for HTML form fields.
+
+ HTML form fields has some restriction in CSS. CSS can't define styles
+ for form fields correct. The reason why is, they use the same tag name
+ and define it's type in the type attribute.
+ like <input type="text" ..>, or <input type="file" ..>
+
+ I propose to add class names for this fields (some of them use allready
+ this class names in widgets). The type attribute itself whould be the
+ simpliest name::
+
+ text input --> <input type="text" class="text" ..>
+
+ checkbox input --> <input type="checkbox" class="checkbox" ..>
+
+ 3. Replace H1, H2, ... tags in forms.
+
+ H1, H2, etc tags should not be used in edit forms or generic pages.
+ If we use H1, H2 tags in generic pages there is now way to handle this
+ in custom skins. A example, if a page use H1 for the header and
+ H2 for subtitles etc. and we use a body field with HTML text, there is
+ no way to redefine H1 and H2 Tags in the body field area.
+
+ Replace H1, H2 Tags with div Tags and a class name like::
+
+ H1 --> <div class="header">Header</div>
+
+ H2 --> <div class="title">Title</div>
+
+ 4. Add classes for elements like error messages and important parts::
+
+ <div class="error">Some error occure</div>
+
+ 5. Add a styleguide page which presents the used styles.
+
+ This whould be "THE" style guide for developer. Every Zope3 developer
+ has to follow this style guide if he is checkin a page template.
+ The style guide can be used from graphic poeple for implement their
+ own CSS definitions.
+
+ 6. Make use the real attribute names in widgets
+
+ This isn't the right place here, but some widgets use curiose names
+ in the widgets directive. See TextAreaWidget. The textarea widget use
+ the names width and height for rendering the cols and rows attributes
+ in the textarea tag. Make sure we use te standard names of the HTML tag's.
+
+ Location
+
+ More information, this proposal's source or the implementation can be
+ found in the package zope.app.css.
+
+ Risks
+
+ We will break some skins based on the old CSS styles.
Property changes on: Zope3/trunk/src/zope/app/css/PROPOSAL.txt
___________________________________________________________________
Name: svn:eol-style
+ native
Added: Zope3/trunk/src/zope/app/css/README.txt
===================================================================
--- Zope3/trunk/src/zope/app/css/README.txt 2005-02-17 20:38:00 UTC (rev 29177)
+++ Zope3/trunk/src/zope/app/css/README.txt 2005-02-17 20:38:41 UTC (rev 29178)
@@ -0,0 +1,14 @@
+======
+README
+======
+
+There is a test skin based on rotterdam for testing the new zope3.css
+file located in this package. You can access the skin with:
+
+::
+
+ http://localhost:8080/++skin++CSS
+
+The test skin "CSS" will be removed after defining all styles.
+The default skin (actually rotterdam) should use the default
+css file zope3.css after clean up this package.
Property changes on: Zope3/trunk/src/zope/app/css/README.txt
___________________________________________________________________
Name: svn:eol-style
+ native
Added: Zope3/trunk/src/zope/app/css/TODO.txt
===================================================================
--- Zope3/trunk/src/zope/app/css/TODO.txt 2005-02-17 20:38:00 UTC (rev 29177)
+++ Zope3/trunk/src/zope/app/css/TODO.txt 2005-02-17 20:38:41 UTC (rev 29178)
@@ -0,0 +1,45 @@
+====
+TODO
+====
+
+- Decide where we should place the style guide. I think the source zope.app
+ is the right place, because we can include it in the onlinehelp.
+
+- Chechout if the online help works and include it in a own section
+ like 'skins.???'
+
+- Remove CSS test skin
+
+ Test skin "CSS" (just for prototyping) is located in src.css.browser
+ You can call it like::
+
+ http://localhost:8080/++skin++CSS
+
+ I've added a temporary test skin "CSS" in ./skin. We will remove it
+ after defining the style sheet. The new style sheet will be used in the
+ Rotterdam skin or the replacement of the Rotterdam later.
+
+ The default (Rotterdam) skin should use the zope3.css file in this
+ package. This way we can support one place where we have to update.
+
+ That's also the reason why this pakage is here and not in the
+ zope.doc.
+
+- Search for used styles and add it to the following files:
+
+ o samples.html
+ o zope3.css
+
+ We can copy paste it form the rotterdam skin. But check each
+ css tag. Perhaps we have obsolate tags in the rotterdam css
+ since we never did take care on it
+
+- Review text and correct Roger's swiss-german-english typos
+
+Bugs (seen in Rotterdam skin)
+-----------------------------
+
+- Fix resizing of left navigation, the navigation cuts long words
+
+- Fix long menues (zmi_actions), they get lost on the white background if
+ they get rendered in a second line below the blue bar
Property changes on: Zope3/trunk/src/zope/app/css/TODO.txt
___________________________________________________________________
Name: svn:eol-style
+ native
Added: Zope3/trunk/src/zope/app/css/__init__.py
===================================================================
--- Zope3/trunk/src/zope/app/css/__init__.py 2005-02-17 20:38:00 UTC (rev 29177)
+++ Zope3/trunk/src/zope/app/css/__init__.py 2005-02-17 20:38:41 UTC (rev 29178)
@@ -0,0 +1,33 @@
+##############################################################################
+#
+# Copyright (c) 2002 - 2005 Zope Corporation and Contributors.
+# All Rights Reserved.
+#
+# This software is subject to the provisions of the Zope Public License,
+# Version 2.1 (ZPL). A copy of the ZPL should accompany this distribution.
+# THIS SOFTWARE IS PROVIDED "AS IS" AND ANY AND ALL EXPRESS OR IMPLIED
+# WARRANTIES ARE DISCLAIMED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+# WARRANTIES OF TITLE, MERCHANTABILITY, AGAINST INFRINGEMENT, AND FITNESS
+# FOR A PARTICULAR PURPOSE.
+#
+##############################################################################
+"""Prototyping skin called `CSS`
+
+$Id$
+"""
+
+from zope.publisher.interfaces.browser import ILayer
+from zope.app.rotterdam import Rotterdam
+
+
+
+class layer(ILayer):
+ """A clean ILayer called `zope.app.css.layer` used in `CSS` skin."""
+
+
+class CSS(layer, Rotterdam):
+ """The `CSS` skin based on the Rotterdam skin.
+
+ It is available via `++skin++zope.app.css.CSS`
+ or via `++skin++CSS`.
+ """
Property changes on: Zope3/trunk/src/zope/app/css/__init__.py
___________________________________________________________________
Name: svn:eol-style
+ native
Added: Zope3/trunk/src/zope/app/css/configure.zcml
===================================================================
--- Zope3/trunk/src/zope/app/css/configure.zcml 2005-02-17 20:38:00 UTC (rev 29177)
+++ Zope3/trunk/src/zope/app/css/configure.zcml 2005-02-17 20:38:41 UTC (rev 29178)
@@ -0,0 +1,23 @@
+<configure
+ xmlns="http://namespaces.zope.org/zope"
+ xmlns:browser="http://namespaces.zope.org/browser">
+
+ <browser:layer
+ name="css"
+ interface="zope.app.css.layer" />
+
+ <browser:skin
+ name="CSS"
+ interface="zope.app.css.CSS" />
+
+ <browser:resource
+ name="zope3.css"
+ file="zope3.css"
+ layer="zope.app.css.layer" />
+
+ <browser:resource
+ name="skin.css"
+ file="skin.css"
+ layer="zope.app.css.layer" />
+
+</configure>
Property changes on: Zope3/trunk/src/zope/app/css/configure.zcml
___________________________________________________________________
Name: svn:eol-style
+ native
Added: Zope3/trunk/src/zope/app/css/skin.css
===================================================================
--- Zope3/trunk/src/zope/app/css/skin.css 2005-02-17 20:38:00 UTC (rev 29177)
+++ Zope3/trunk/src/zope/app/css/skin.css 2005-02-17 20:38:41 UTC (rev 29178)
@@ -0,0 +1,37 @@
+/* Zope3 skin style sheet for CSS2-capable browsers.
+*/
+
+
+/* HTML elements
+*/
+
+body {
+ font: 85% Helvetica, Arial, sans-serif;
+ background: White;
+ color: Black;
+ margin: 0;
+ padding: 0;
+}
+
+a {
+ text-decoration: none;
+ color: #369;
+ background-color: transparent;
+}
+
+a:active {
+ text-decoration: underline;
+}
+
+p {
+ margin: 0.5em 0em 1em 0em;
+ line-height: 1.5em;
+}
+
+
+/* Form elements
+*/
+
+
+/* List elements
+*/
Property changes on: Zope3/trunk/src/zope/app/css/skin.css
___________________________________________________________________
Name: svn:eol-style
+ native
Added: Zope3/trunk/src/zope/app/css/zope3.css
===================================================================
--- Zope3/trunk/src/zope/app/css/zope3.css 2005-02-17 20:38:00 UTC (rev 29177)
+++ Zope3/trunk/src/zope/app/css/zope3.css 2005-02-17 20:38:41 UTC (rev 29178)
@@ -0,0 +1,15 @@
+/* Zope3 from and widget style sheet for CSS2-capable browsers.
+*/
+
+
+/* Z3 form elements
+*/
+
+#input.text {
+}
+
+#input.textarea {
+}
+
+#input.file {
+}
Property changes on: Zope3/trunk/src/zope/app/css/zope3.css
___________________________________________________________________
Name: svn:eol-style
+ native
More information about the Zope3-Checkins
mailing list