[SPIP Zone] [Spip-zone-commit] r29942 - in /_themes_/tripoli: ./ plugins/

Archives Zone
1

Super . Ça fait doublons

Mathieu Drouet / take a sip

mathieu.drouet@takeasip.net

Envoyé de mon iPhone car je travaille souvent dehors.

Le 17 juil. 2009 à 15:17, cedric@yterium.com a écrit :

Author: cedric@yterium.com
Date: Fri Jul 17 15:17:39 2009
New Revision: 29942

Log:
un theme qui n'est pas un habillage pret a l'emploi,
mais juste un framework css pour construire un site
tire de Loading...

Added:
   _themes_/tripoli/
   _themes_/tripoli/body-layout.html
   _themes_/tripoli/habillage.css
   _themes_/tripoli/inc-theme-head.html
   _themes_/tripoli/plugin.xml
   _themes_/tripoli/plugins/
   _themes_/tripoli/plugins/tripoli.layout.css
   _themes_/tripoli/plugins/tripoli.negative.css
   _themes_/tripoli/plugins/tripoli.type.css
   _themes_/tripoli/plugins/tripoli.visual.css
   _themes_/tripoli/tripoli.base.css
   _themes_/tripoli/tripoli.base.ie.css
   _themes_/tripoli/tripoli.css
   _themes_/tripoli/tripoli.ie.css
   _themes_/tripoli/tripoli.simple.css
   _themes_/tripoli/tripoli.simple.ie.css
   _themes_/tripoli/vignette.jpg (with props)

Added: _themes_/tripoli/body-layout.html

=====================================================================
--- _themes_/tripoli/body-layout.html (added)
+++ _themes_/tripoli/body-layout.html Fri Jul 17 15:17:39 2009
@@ -0,0 +1,79 @@
+[(#REM)
+ *
+ * @name layout
+ * @type tripoli plugin
+ *
+ * @desc Quick and ready-to-use CSS layout templates.
+ * Full browser support from IE5/WIN and IE5/OSX.
+ * Content first - same HTML markup in all layouts.
+ * Two fixed widths using em (normal or wide).
+ * Equal columns option (experimental - ignored by IE5/osx and Opera < 9. Buggy in IE5/win).
+ *
+ * @author David Hellsing
+ * @version 1.0
+ * @cat plugins
+ *
+ * @example layout: <div class="body l2">
+ * @desc creates a layout with two columns (33%-66%)
+ *
+ * @example layout: <div class="body l4 wide equal">
+ * @desc creates a wide layout with three equal height columns (33%-33%-33%)
+ *
+ * @documentation layout body classes:
+ *
+ * .l1: 2-column 66% - 33%
+ * .l2: 2-column 33% - 66%
+ * .l3: 2-column 50% - 50%
+ * .l4: 3-column 33% - 33% - 33%
+ * .l5: 3-column 16% - 66% - 16%
+ * .l6: 3-column 25% - 50% - 25%
+ * .l7: 3-column 66% - 16% - 16%
+ * .l8: 3-column 50% - 25% - 25%
+ * .l9: 3-column 25% - 25% - 50%
+ *
+ * .wide: 125% width
+ * .equal: equal columns
+ *
+ * @documentation html structure:
+ *
+]
+<div class="body l5">
+<div id="container">
+ <div id="header">
+ <div class="content">
+ [(#REM) HEADER / ENTETE ]
+ #INCLURE{fond=inclure/entete,env}
+ </div>
+ <div class="nav">
+ [(#REM) MAIN NAVIGATION / NAVIGATION PRINCIPALE ]
+ #INCLURE{fond=inclure/barre-nav,env}
+ </div>
+ </div>
+ <div id="primary">
+ <div class="content">
+ [(#REM) CONTENT / CONTENU ]
+ #INCLURE{fond=contenu/#ENV{type},env}
+ </div>
+ </div>
+ <div id="secondary">
+ <div class="content">
+ [(#REM) SECONDARY NAVIGATION SIDEBAR / Navigation laterale secondaire ]
+ #INCLURE{fond=navigation/#ENV{type},env}
+ </div>
+ </div>
+ <div id="tertiary">
+ <div class="content">
+ [(#REM) EXTRA INFORMATIONS / Informations complementaires
+ Also in "sidebar" as this template has only two columns]
+ #INCLURE{fond=extra/#ENV{type},env}
+ </div>
+ </div>
+ <div id="footer">
+ <div class="content">
+ [(#REM) FOOTER / Pied de page ]
+ #INCLURE{fond=inclure/pied,env}
+ </div>
+ </div>
+</div>
\ No newline at end of file

Added: _themes_/tripoli/habillage.css

--- _themes_/tripoli/habillage.css (added)
+++ _themes_/tripoli/habillage.css Fri Jul 17 15:17:39 2009
@@ -0,0 +1,6 @@
+/* --------------------------------------------------------- */
+/* Feuille de style des squelettes par defaut pour SPIP 2.0 */
+/* --------------------------------------------------------- */
+/* ----------------------------------------------
+personalisations
+------------------------------------------------ */

Added: _themes_/tripoli/inc-theme-head.html

--- _themes_/tripoli/inc-theme-head.html (added)
+++ _themes_/tripoli/inc-theme-head.html Fri Jul 17 15:17:39 2009
@@ -0,0 +1,17 @@
+[(#REM)
+
+ Squelette
+ (c) xxx
+ Distribue sous licence GPL
+
+]
+<link rel="stylesheet" type="text/css" media="all" href="#CHEMIN{tripoli.base.css}" />
+<link rel="stylesheet" type="text/css" media="all" href="#CHEMIN{tripoli.simple.css}" />
+<link rel="stylesheet" type="text/css" media="all" href="#CHEMIN{plugins/tripoli.layout.css}" />
+<link rel="stylesheet" type="text/css" media="all" href="#CHEMIN{plugins/tripoli.visual.css}" />
+<link rel="stylesheet" type="text/css" media="all" href="#CHEMIN{plugins/tripoli.type.css}" />
+
+<!--[if IE]>
+<link rel="stylesheet" type="text/css" media="all" href="#CHEMIN{tripoli.base.ie.css}">
+<link rel="stylesheet" type="text/css" media="all" href="#CHEMIN{tripoli.simple.ie.css}">
+<![endif]-->
\ No newline at end of file

Added: _themes_/tripoli/plugin.xml

--- _themes_/tripoli/plugin.xml (added)
+++ _themes_/tripoli/plugin.xml Fri Jul 17 15:17:39 2009
@@ -0,0 +1,18 @@
+<plugin>
+ <nom><multi>
+ [en]Tripoli
+ </multi></nom>
+ <auteur>[DevKick->Loading...] adapt&eacute; pour Zpip par C&eacute;dric Morin [yterium.com->http://www.yterium.com]</auteur>
+ <licence>BSD</a></licence>
+ <version>1.0.0beta</version>
+ <description><multi>
+ [fr]Un th&egrave;me de base fond&eacute; sur [Tripoli->Loading...] pour d&eacute;velopper un site.
+_ Ce th&egrave;me n'est pas pr&ecirc;t à &ecirc;tre utilis&eacute; en l'&eacute;tat, mais pose les &eacute;l&eacute;ments de base pour construire un habillage complet.
+ [en]Theme based on [ooCSS->http://wiki.github.com/stubbornella/oocss\] to use as a foundation for website development
+_ This theme is not ready to use, but it settles basic elements in order to build a skin on.
+ </multi>
+ </description>
+ <icon>vignette.jpg</icon>
+ <etat>stable</etat>
+ <prefix>theme</prefix>
+</plugin>
\ No newline at end of file

Added: _themes_/tripoli/plugins/tripoli.layout.css

--- _themes_/tripoli/plugins/tripoli.layout.css (added)
+++ _themes_/tripoli/plugins/tripoli.layout.css Fri Jul 17 15:17:39 2009
@@ -0,0 +1,302 @@
+/*
+ * @name layout
+ * @type tripoli plugin
+ *
+ * @desc Quick and ready-to-use CSS layout templates.
+ * Full browser support from IE5/WIN and IE5/OSX.
+ * Content first - same HTML markup in all layouts.
+ * Two fixed widths using em (normal or wide).
+ * Equal columns option (experimental - ignored by IE5/osx and Opera < 9. Buggy in IE5/win).
+ *
+ * @author David Hellsing
+ * @version 1.0
+ * @cat plugins
+ *
+ * @example layout: <body class="l2">
+ * @desc creates a layout with two columns (33%-66%)
+ *
+ * @example layout: <body class="l4 wide equal">
+ * @desc creates a wide layout with three equal height columns (33%-33%-33%)
+ *
+ * @documentation layout body classes:
+ *
+ * .l1: 2-column 66% - 33%
+ * .l2: 2-column 33% - 66%
+ * .l3: 2-column 50% - 50%
+ * .l4: 3-column 33% - 33% - 33%
+ * .l5: 3-column 16% - 66% - 16%
+ * .l6: 3-column 25% - 50% - 25%
+ * .l7: 3-column 66% - 16% - 16%
+ * .l8: 3-column 50% - 25% - 25%
+ * .l9: 3-column 25% - 25% - 50%
+ *
+ * .wide: 125% width
+ * .equal: equal columns
+ *
+ * @documentation html structure:
+ *
+
+<body class="[layout classes]">
+<div id="container">
+ <div id="header">
+ <div class="content"><!-- header content --></div>
+ </div>
+ <div id="primary">
+ <div class="content"><!-- primary content --></div>
+ </div>
+ <div id="secondary">
+ <div class="content"><!-- secondary content --></div>
+ </div>
+ <div id="tertiary">
+ <div class="content"><!-- tertiary content --></div>
+ </div>
+ <div id="footer">
+ <div class="content"><!-- footer content --></div>
+ </div>
+</div>
+</body>
+
+**/
+
+* html body
+{
+ text-align:center;
+}
+
+#container
+{
+ position:relative;
+ width:76em;
+ text-align:left;
+ margin:0 auto;
+}
+
+#header
+{
+ position:relative;
+}
+
+#primary,#secondary,#tertiary
+{
+ position:relative;
+ float:left;
+}
+
+* html #primary,* html #secondary,* html #tertiary
+{
+ display:inline;
+}
+
+#footer
+{
+ clear:both;
+ float:left;
+ width:100%;
+ position:relative;
+}
+
+div.body.l1 #tertiary,div.body.l2 #tertiary,div.body.l3 #tertiary
+{
+ display:none;
+}
+
+div.body.l1 #primary
+{
+ width:49.5em;
+}
+
+div.body.l1 #secondary
+{
+ width:24.5em;
+ float:right;
+}
+
+div.body.l2 #primary
+{
+ width:49.5em;
+ margin-left:26.5em;;
+}
+
+div.body.l2 #secondary
+{
+ width:24.5em;
+ margin-left:-76em;
+}
+
+div.body.l3 #primary
+{
+ width:37em;
+}
+
+div.body.l3 #secondary
+{
+ width:37em;
+ float:right;
+}
+
+div.body.l4 #primary
+{
+ width:24em;
+ margin-left:26em;
+}
+
+div.body.l4 #secondary
+{
+ width:24em;
+ margin-left:-50em;
+}
+
+div.body.l4 #tertiary
+{
+ float:right;
+ width:24em;
+}
+
+div.body.l5 #primary
+{
+ width:48em;
+ margin-left:14em;
+}
+
+div.body.l5 #secondary
+{
+ width:12em;
+ margin-left:-62em;
+}
+
+div.body.l6 #primary
+{
+ width:36em;
+ margin-left:20em;
+}
+
+div.body.l6 #secondary
+{
+ width:18em;
+ margin-left:-56em;
+}
+
+div.body.l7 #primary
+{
+ width:48em;
+ margin-right:2em;
+}
+
+div.body.l7 #secondary
+{
+ width:12em;
+}
+
+div.body.l8 #primary
+{
+ width:36em;
+ margin-right:2em;
+}
+
+div.body.l8 #secondary
+{
+ width:18em;
+ margin-left:0;
+}
+
+div.body.l9 #primary
+{
+ width:36em;
+ float:right;
+}
+
+div.body.l9 #secondary
+{
+ width:18em;
+}
+
+div.body.l9 #tertiary
+{
+ float:right;
+ width:18em;
+ margin-right:2em;
+}
+
+div.body.wide #container
+{
+ font-size:125%;
+}
+
+div.body.wide #header
+{
+ font-size:80%;
+}
+
+div.body.wide #footer
+{

[... 1072 lines stripped ...]
_______________________________________________
Spip-zone-commit@rezo.net - http://listes.rezo.net/mailman/listinfo/spip-zone-commit

2

Le 17 juil. 09 à 15:36, Mathieu Drouet a écrit :

Super . Ça fait doublons

Mathieu Drouet / take a sip

sans doute, oui.

est un squelettes type dist construit avec le framework css tripoli.
Mais comme squelettes-dist, il melange le fonctionnel avec le layout.

Ce qu'on essaye de construire là, ce sont des themes et des squelettes que l'on pourra combiner entre eux independamment.
Autrement dit séparer la partie habillage+layout de la partie fonctionnelle.

A titre d'exemple, ce

peut s'appliquer aussi bien a
Connexion · GitLab (qui doublonne la dist)
qu'à d'autres construit sur le modèle du layout unique.

Et le même squelette peut utiliser au choix

ou

ou d'autres encore à venir (y compris, et surtout, des thèmes complet prêt à l'emploi, à venir).

On pose donc dans _themes_ les bases de ce travail, en même temps que la doc qui est en train de s'écrire.

Le but, à la fin, et de ne pas avoir à ecrire (s*t) squelettes (ou s est le nombre de variantes fonctionnelles et t le nombre d'habillage), mais s squelettes+t themes.

Cédric