[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 &lt;textarea&gt; 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 &lt;input type="text" ..&gt;, or &lt;input type="file" ..&gt;
+
+        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