[Zope3-checkins] SVN: Zope3/trunk/src/zope/app/styleguide/css/
Added content of css package
Roger Ineichen
roger at projekt01.ch
Sun Feb 27 18:54:38 EST 2005
Log message for revision 29334:
Added content of css package
Changed:
A Zope3/trunk/src/zope/app/styleguide/css/__init__.py
A Zope3/trunk/src/zope/app/styleguide/css/configure.zcml
A Zope3/trunk/src/zope/app/styleguide/css/index.html
-=-
Added: Zope3/trunk/src/zope/app/styleguide/css/__init__.py
===================================================================
--- Zope3/trunk/src/zope/app/styleguide/css/__init__.py 2005-02-27 23:51:38 UTC (rev 29333)
+++ Zope3/trunk/src/zope/app/styleguide/css/__init__.py 2005-02-27 23:54:38 UTC (rev 29334)
@@ -0,0 +1,17 @@
+##############################################################################
+#
+# 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.
+#
+##############################################################################
+"""Zope3 CSS styleguide
+
+$Id$
+"""
Property changes on: Zope3/trunk/src/zope/app/styleguide/css/__init__.py
___________________________________________________________________
Name: svn:eol-style
+ native
Added: Zope3/trunk/src/zope/app/styleguide/css/configure.zcml
===================================================================
--- Zope3/trunk/src/zope/app/styleguide/css/configure.zcml 2005-02-27 23:51:38 UTC (rev 29333)
+++ Zope3/trunk/src/zope/app/styleguide/css/configure.zcml 2005-02-27 23:54:38 UTC (rev 29334)
@@ -0,0 +1,14 @@
+<configure
+ xmlns="http://namespaces.zope.org/zope"
+ xmlns:help="http://namespaces.zope.org/help"
+ i18n_domain="zope">
+
+ <help:register
+ id="css"
+ parent="styleguide"
+ title="CSS"
+ doc_path="index.html"
+ class="zope.app.onlinehelp.onlinehelptopic.ZPTOnlineHelpTopic"
+ />
+
+</configure>
Property changes on: Zope3/trunk/src/zope/app/styleguide/css/configure.zcml
___________________________________________________________________
Name: svn:eol-style
+ native
Added: Zope3/trunk/src/zope/app/styleguide/css/index.html
===================================================================
--- Zope3/trunk/src/zope/app/styleguide/css/index.html 2005-02-27 23:51:38 UTC (rev 29333)
+++ Zope3/trunk/src/zope/app/styleguide/css/index.html 2005-02-27 23:54:38 UTC (rev 29334)
@@ -0,0 +1,245 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
+ metal:use-macro="views/onlinehelp_macros/page">
+
+<head>
+<title metal:fill-slot="title"
+ i18n:translate="">Z3 CSS: Styles</title>
+
+<!-- load styles in onlinehelp -->
+<metal:block fill-slot="style_slot">
+<style type="text/css" media="all"
+ tal:content="string:@import url(${context/++resource++zope3.css});">
+ @import url(../../css/zope3.css);
+</style>
+<style type="text/css" media="all"
+ tal:content="string:@import url(${context/++resource++styleguide.css});">
+ @import url("../styleguide.css");
+</style>
+</metal:block>
+
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+</head>
+<body metal:fill-slot="body" tal:omit-tag="">
+<!-- we have to define the styles here because the get lost in the header in online help -->
+
+
+<h1>Zope3 - Cascading Style Sheets - Style Guide</h1>
+<h2>Introduction</h2>
+<p>
+See the proposal at: <a href="http://dev.zope.org/Wikis/DevSite/Projects/ComponentArchitecture/CascadingStyleSheetStyleGuide" target="_blank"><br />
+ http://dev.zope.org/Wikis/DevSite/Projects/ComponentArchitecture/CascadingStyleSheetStyleGuide</a></p>
+<h2> Used styles in forms and widgets</h2>
+<table class="samples" border="0" cellspacing="0" cellpadding="0">
+ <tr>
+ <th class="number">No.</th>
+ <th>Tag</th>
+ <th>Class</th>
+ <th>Description</th>
+ <th>Sample HTM code</th>
+ <th>Rendered result</th>
+ </tr>
+ <tr>
+ <td colspan="6" class="header">HTML elements</td>
+ </tr>
+ <tr>
+ <td colspan="6" class="abstract">This elements are declared for useing in standard page templates used in ZCML directives. Schema widgets useing also this styles.</td>
+ </tr>
+ <tr valign="top">
+ <td class="number">1</td>
+ <td class="tag">a</td>
+ <td class="class">--</td>
+ <td class="description">Link</td>
+ <td nowrap="nowrap" class="sample"><a href="#">a link</a></td>
+ <td class="code"><a href="#">a link</a></td>
+ </tr>
+ <tr valign="top">
+ <td class="number">2</td>
+ <td class="tag">p</td>
+ <td class="class">--</td>
+ <td class="description">Block text</td>
+ <td nowrap="nowrap" class="sample"><p>block text</p></td>
+ <td class="code">
+ <p>block text</p>
+ </td>
+ </tr>
+ <tr>
+ <td colspan="6" class="header">Form elements</td>
+ </tr>
+ <tr valign="top">
+ <td class="number">1</td>
+ <td class="tag">form</td>
+ <td class="class">--</td>
+ <td class="description">form</td>
+ <td nowrap="nowrap" class="sample"><form>some text</form></td>
+ <td class="code">
+ <form>
+ some text
+ </form>
+ </td>
+ </tr>
+ <tr valign="top">
+ <td class="number">2</td>
+ <td class="tag">div</td>
+ <td class="class">row</td>
+ <td class="description">Contains a input field with label</td>
+ <td nowrap="nowrap" class="sample">
+ <div class="row"><br />
+ label and input field<br />
+ </div>
+ </td>
+ <td class="code">
+ <div class="row">
+ label and input field</div>
+ </td>
+ </tr>
+ <tr valign="top">
+ <td class="number">2.1</td>
+ <td class="tag">div</td>
+ <td class="class">row div.label</td>
+ <td class="description">Contains a input field with label</td>
+ <td nowrap="nowrap" class="sample">
+ <div class="row"><br />
+ <div class="label"><br />
+ <label for="yx" title="xy"><br />
+ Label text<br />
+ </label><br />
+ </div><br />
+ </div>
+ </td>
+ <td class="code">
+ <div class="row">
+ <div class="label">
+ <label for="yx" title="xy">
+ Label text
+ </label>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <tr valign="top">
+ <td class="number">2.2</td>
+ <td class="tag">div</td>
+ <td class="class">row div.field</td>
+ <td class="description">Contains a input field with label</td>
+ <td nowrap="nowrap" class="sample">
+ <div class="row"><br />
+ <div class="field"><br />
+ <input type=text" id="xy"><br />
+ </div><br />
+ </div>
+ </td>
+ <td class="code">
+ <div class="row">
+ <div class="field">
+ <input type="text" id="xy" />
+ </div>
+ </div>
+ </td>
+ </tr>
+ <tr valign="top">
+ <td class="number">2.3</td>
+ <td class="tag">div</td>
+ <td class="class">row div.label div.field</td>
+ <td class="description">Contains a input field with label</td>
+ <td nowrap="nowrap" class="sample">
+ <div class="row"><br />
+ <div class="field"><br />
+ <label for="yx" title="xy"><br />
+ Label text<br />
+ </label><br />
+ <input type=text" id="xy"><br />
+ </div><br />
+ </div>
+ </td>
+ <td class="code">
+ <div class="row">
+ <div class="label">
+ <label for="yx" title="xy">
+ Label text
+ </label>
+ </div>
+ <div class="field">
+ <input type="text" id="xy" />
+ </div>
+ </div>
+ </td>
+ </tr>
+ <tr valign="top">
+ <td class="number"> </td>
+ <td class="tag"> </td>
+ <td class="class"> </td>
+ <td class="description"> </td>
+ <td nowrap="nowrap" class="sample"> </td>
+ <td class="code"> </td>
+ </tr>
+
+</table>
+<h2>Formating rules</h2>
+<table class="samples" border="0" cellspacing="0" cellpadding="0">
+ <tr>
+ <th class="number">No.</th>
+ <th>Description</th>
+ <th>Sample HTML code</th>
+ </tr>
+ <tr>
+ <td colspan="3" class="header">Form rules</td>
+ </tr>
+ <tr>
+ <td colspan="3" class="abstract">Form fields</td>
+ </tr>
+ <tr valign="top">
+ <td class="number">1</td>
+ <td class="description">
+ <p>Use the following coding style to define form fields and labels.</p>
+ </td>
+ <td nowrap="nowrap" class="sample">
+ <div class="row"><br />
+ <div class="label"><br />
+ <label for="yx" title="xy"><br />
+ Label text<br />
+ </label><br />
+ </div><br />
+ <div class="field"><br />
+ <input type=text" id="xy"...><br />
+ </div><br />
+ </div><br />
+ </td>
+ </tr>
+ <tr>
+ <td colspan="3" class="abstract">Associate labels explicitly with their controls</td>
+ </tr>
+ <tr valign="top">
+ <td class="number">3</td>
+ <td class="description">
+ <p><br />
+ In other words it means: use <label> along with your <input type="text"/>,
+ your <input type="checkbox"/> and your <input type="radio"/> elements.</p>
+ <p>
+ Using labels makes it possible to use the pointer on the label
+ (clicking on the label) to active the input, so that it is easier to select a
+ text input, a check box or a radio box, just like it is in heavy client
+ applications such as Firefox.
+ </p>
+ <p>Mor information about "Labeling form controls":<br />
+ <a href="http://www.w3.org/tr/wcag10-html-techs/#forms-labels" target="_blank">http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-labels</a></p>
+ <p> </p>
+ </td>
+ <td nowrap="nowrap" class="sample">
+ <p><div class="row"><br />
+ <div class="label"><br />
+ <label for="yx" title="xy"><br />
+ Label text<br />
+ </label><br />
+ </div><br />
+ <div class="field"><br />
+ <input type=text" id="xy"...><br />
+ </div><br />
+ </div></p>
+ </td>
+ </tr>
+
+</table>
+</body>
+</html>
Property changes on: Zope3/trunk/src/zope/app/styleguide/css/index.html
___________________________________________________________________
Name: svn:eol-style
+ native
More information about the Zope3-Checkins
mailing list