Changer thème par défaut pour la prochaine version de PluXML

Jos · novembre 2012

Bonjour,

Ce sujet a déjà été abordé mais j'ai pas retrouvé le fil, et pourtant çà me semble important. Quand je regarde le thème par défaut, je me dis qu'il devrait évoluer pour qu'il soit plus moderne et plus attractif. Pour cela, je propose aux admin d'intégrer un nouveau thème pour la prochaine version de PluXML.

Pour cela, les contributeurs (dont moi-même) pourraient faire des suggestions de thème à l'équipe, et ils feraient leurs choix pour la prochaine version. L'équipe devrait définir certains éléments à prendre en compte :
- HTML5 ou XHTML Strict,
- CSS 2.1 ou CSS3,
- jQuery (oui ou non),
- Responsive (oui ou non),
- prise en charge pour les anciens IE (jusqu'à IE8, IE7, ou IE6),
- éventuellement, d'autres éléments particuliers et des consignes pour la charte graphique.

Personnellement je partirai sur du HTML5, un peu de CSS3; quelques effet jQuery, responsive, et prise en charge jusqu'à IE7 (globalement).

Qu'en pensez-vous?

Jerry Wham · novembre 2012

Je suis assez d'accord avec toi Jos. Comme base de travail, je vous propose le code suivant (trouvé sur http://webdesignerwall.com/ en licence libre) qui permet d'avoir un site "responsive" (Yeah, ouane again !), même avec des navigateurs anciens (ie compris) :

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta charset="utf-8">

<!-- viewport meta to reset iPhone inital scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Demo: Responsive Design in 3 Steps</title>

<!-- css3-mediaqueries.js for IE8 or older -->
<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->



<link rel="stylesheet" type="text/css" href="index.css" media="all">
</head>
<body>

<div id="pagewrap">

	<div id="header">
		<h1>Header</h1>
		<p>Tutorial by <a href="http://webdesignerwall.com/">Web Designer Wall</a> (read <a href="http://webdesignerwall.com/tutorials/responsive-design-in-3-steps">related article</a>)</p>
	</div>

	<div id="content">
		<h2>Content</h2>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
	</div>

	<div id="sidebar">
		<h3>Sidebar</h3>
		<p>text</p>
		<p>text</p>
	</div>
	
	<div id="footer">
		<h4>Footer</h4>
	</div>

</div>



</body>
</html>

Je l'utilise régulièrement et il est facilement modifiable.

Edit : avec la css, c'est mieux !

body { font: 1em/150% Arial,Helvetica,sans-serif; }
a { color: rgb(102, 102, 153); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font: bold 36px/100% Arial,Helvetica,sans-serif; }
#pagewrap { padding: 5px; width: 960px; margin: 20px auto; }
#header { height: 180px; }
#content { width: 600px; float: left; }
#sidebar { width: 300px; float: right; }
#footer { clear: both; }
@media screen and (max-width: 980px) {
	#pagewrap { width: 94%; }
	#content { width: 65%; }
	#sidebar { width: 30%; }
}
@media screen and (max-width: 700px) {
	#content { width: auto; float: none; }
	#sidebar { width: auto; float: none; }
}
@media screen and (max-width: 480px) {
	#header { height: auto; }
	h1 { font-size: 24px; }
	#sidebar { display: none; }
}
#content { background: none repeat scroll 0% 0% rgb(248, 248, 248); }
#sidebar { background: none repeat scroll 0% 0% rgb(240, 239, 239); }
#header, #content, #sidebar { margin-bottom: 5px; }
#pagewrap, #header, #content, #sidebar, #footer { border: 1px solid rgb(204, 204, 204); }

Jos · novembre 2012

Depuis quelques temps, je boss sur un thème pour PluXML qui correspond il me semble à ce que tu me montre, avec quelques truc en plus. Parcontre je ne me suis pas appuyé sur un framework pour le faire, je suis partie presque de zéro à partir du thème PluXML de base. Il est HTML5, CSS3, Responsive, et jQuery, et mis à part le design il est presque finit.

ComputingFroggy · novembre 2012

Je suis d'accord pour dire que le thème par défaut n'est pas du tout beau ... voire moche ! !

Par contre, il est très bien comme modèle : il est très bien structuré et clair. Il est facile de le modifier pour obtenir un autre thème. Si le prochain ne l'est pas autant, il serait peut-être judicieux d'avoir deux thèmes : un facile à modifier et un sexy.

Jerry Wham · novembre 2012

ComputingFroggy a écrit:

Je suis d'accord pour dire que le thème par défaut n'est pas du tout beau ... voire moche ! !

Par contre, il est très bien comme modèle : il est très bien structuré et clair. Il est facile de le modifier pour obtenir un autre thème.

C'est pas faux.

ComputingFroggy a écrit:

Si le prochain ne l'est pas autant, il serait peut-être judicieux d'avoir deux thèmes : un facile à modifier et un sexy.

Deux thèmes par défaut, c'est un thème de trop. Vu qu'en plus, il y a le thème mobile, ça fait beaucoup du coup.
L'intérêt d'un thème responsive est que l'on peut se passer du thème mobile. Un seul thème a maintenir, ça fait gagner du temps à tout le monde.

Le défaut dans la cuirasse de celui que j'ai proposé est qu'il dépend de la librairie mediaqueries.js pour fonctionner sur de vieux navigateurs.
Par contre, il est facilement adaptable tout comme le thème actuel.

Stéphane · novembre 2012

Jerry Wham a écrit:

L'intérêt d'un thème responsive est que l'on peut se passer du thème mobile. Un seul thème a maintenir, ça fait gagner du temps à tout le monde.

+1

ti_pierre · novembre 2012

La refonte de la structure est finie, le thème passe en HTML5, il sera livré sur les forums avec plusieurs structures, afin d'avoir plus de choix, les couleurs ont été regroupées dans des class similaires afin de pouvoir changer la palette de couleur selon vos souhaits en un minimum de modification.

Je travaille actuellement avec http://www.knacss.com/ de Raphaël Goetter, ce sera surement ma base pour le futur thème par défaut de pluxml, en ce qui concerne la partie "sexy" je ne pourrais pas répondre aux attentes de tous, car chacun à ses goûts

Le principe sera donc de réaliser un thème minimaliste avec une structure propre afin d'avoir une base de travail.

Plus d'infos dans le week-end !

petitchevalroux · novembre 2012

Je vote pour le responsive.

Je viens justement de lancer un pluxml basé sur bootstrap pour testé le bouzin et je dis adieu aux versions mobiles (que je n'ai jamais voulu faire).

Pour le sexy, un peu de shadow quelques bordures et ça devrait le faire : KISS

ti_pierre · novembre 2012

Pour le concept KISS je plussoi mille fois, après je verrais, vous aurez plusieurs propositions au pire et vous choisirez

Jerry Wham · novembre 2012

A voir absolument : toutes les failles engendrées par l'utilisation de html5. Assez hallucinant.

ti_pierre · novembre 2012

Attention Jerry, ton message me fait penser à un début de troll sans fin

Un balisage sémantique (x)HTML5 correct ne permet pas l'exploitation de failles, ce sont des cas précis, auxquels il faut prêter attention.

Jos · novembre 2012

Le thème que je prépare s'inspire de knacss qui est un bon framework simple et léger. Je m'inspire également du thème responsive pour Wordpress.

Jerry Wham · novembre 2012

@ti_pierre : je ne voulais pas lancer de troll (le lancer de nains est interdit depuis des années). J'ai juste découvert ça hier soir en navigant sur le net. Je voulais le partager, c'est tout et vous alerter sur ce point. Je n'ai rien contre le html5, au contraire.

Jos · novembre 2012

Je pense que l'on peut passer sans trop de soucis en HTML5, si l'on se contente de fonction très basiques, afin de faciliter l'accessibilité et éviter les bugs et certaines failles. Moi je trouve le lien de Jerry instructif, et çà me conforte dans mon idée qu'il faut utiliser le HTML5 à petite doses, juste pour ce faciliter certains points, tout en restant accessible et pas trop expérimental.

ti_pierre · novembre 2012

@Jerry: Tu peux nous donner la source du texte de loi contre le lancé de nain ? Pas cool...

@Jos: Tout à fait d'accord avec toi, il faudra que l'on discute un de ces 4

Jos · novembre 2012

Je vous propose de jeter un oeil au thème que je prépare dont voici quelques caractéristiques :
- HTML5, en y insérant les principales balises de type <header>, <section>, <article>, ... et le script html5shiv pour assurer la compatibilité de ces quelques balises avec les ancien IE (script hébergé chez google).
- CSS3 : utilisation de la fonction box-sizing (très pratique), et feuille de style pour corriger quelques bug sous IE7.
- Responsive design : taille élastique en dessous de 980px (largeur maxi du site), et remplacement de menu de navigation horizontal par un menu en liste déroulante de type <select> en dessous de 640px.
- jQuery : utilisation de la librairie jQuery pour faire fonctionner deux script (pour assurer la compatibilité du responsive avec les ancien IE, et le menu de navigation déroulant en version responsive).
- deux option d'affichage des pages statiques (en pleine largeur, ou pardéfaut avec la sidebar à droite)
- thème compatible jusqu'à IE7, valide W3C HTML et CSS.
- niveau design, étant donné que les goûts et les couleurs sont propres à chacun, je me suis basé sur l'apparence, les couleurs, et les polices de l'admin.

ATTENTION : testez ce thème mais ne le mettez pas en production car il n'est pas finalisé. N'hésitez pas à me faire part de vos idées et souhaits pour améliorer ce thème.

@ti_pierre : oui si tu veux

Jerry Wham · novembre 2012

@ti_pierre : Le texte l'interdisant depuis 1991 (en fait c'est pas vraiment une interdiction : "Le Conseil d'État a décidé qu'une autorité locale pouvait interdire ce genre de manifestation en public.").

Si vous voulez vous adonner à ce genre de sport, il faut traverser l'atlantique ou partir en Australie.

Le lancer de troll ne se fait pas que sur les forum

Jos · novembre 2012

Suites à vos remontées, j'ai fais une petite mise à jour. N'hésitez pas à tester sous différents navigateurs.

Den · novembre 2012

Salut Jos,

J'ai fait un test avec ton thème et il fonctionne et s'affiche à merveille.
Mon navigateur est Chrome.

Au plaisir et merci!

Den

Jos · novembre 2012

Je te remercie pour avoir testé. Je viens de faire une nouvelle mise à jour concernant l'envoi des commentaires : en gros, le capcha ne se validait pas. Je viens de le corriger, normalement, çà devrait marcher.

k610i · novembre 2012

Houlààà, j'ai pas trop erré par ici dernièrement, je vais tester !

Merci Jos

Jos · novembre 2012

Si tu trouves des bugs, n'hésite pas à me faire signe.

danielsan · novembre 2012

à part le menu qui galère quand on passe sur plusieurs lignes c'est une base intéressante

Jos · novembre 2012

danielsan a écrit:

à part le menu qui galère quand on passe sur plusieurs lignes c'est une base intéressante

Je te remercie pour ton test, je viens d'améliorer un peu ce point en ajoutant un peu d'espace entre les lignes lorsque le menu est plus long et qu'il déborde sur deux lignes.

J'ai effectué d'autres mises à jour, notamment concernant l'affichage des tags.

k610i · novembre 2012

Hop,

Mes retours

(voici mon site de test pour ceux qui veulent voir le thème http://feukya.free.fr/dev/)

-> Pourquoi 1000px de large ? Est-ce que ça ne va pas créer des ascenseurs pour les écrans à 1024px de large ? Pourquoi pas 960px comme utilisé sur beaucoup de framework css ?
-> Sur la partie formulaire, j'enleverai ça :

input:hover, select:hover, textarea:hover {
background-color: #DDF0F8;}

je trouve que ça fait un peu trop.
Comme tu utilises du HTML5, pourquoi ne pas rajouter quelques petits choses cools pour le formulaire (notamment le "required" pour les champs obligatoires et le placeholder, plus d'info ici)

-> pas d'image favicon ?
-> l'image user est hyper pixelisé.

Sinon très bon boulot, le responsive marche bien chez moi et le thème est clean.

(edit: j'ai la version du thème d'hier)

Mounik · novembre 2012

Changer le Thème par défaut est une bonne idée en soi, bonne chance a vous tous qui mettez les mains dans le cambouis pour faire quelque chose d'homogène et facilement modifiable.

Juste une petite Question, mais là il s'agit plus du Core de PluXml que de design, serais t'il possible de réussir un jour a créer des sous-catégorie ? Un peu comme le Système de WordPress.

J'avoue que c'est une des chose qui me manque le plus sur PluXml.

Jos · novembre 2012

Je vous remercie pour vos réactions.
- modification de l'image de user qui était pixiélisé (qui était carement horrible),
- ajout du favicone PluXML (que j'avais oublié lol)

Au niveau du design, je l'ai créé pour qu'il ressemble à l'admin, en mettant de coté mes goûts. L'essentiel est que le thème soit dans l'esprit de PluXML, dont le design ressemble à celui de l'admin, et qu'il reste simple et léger. C'est pour cela que les effets sur les inputs sont comme cela

Quand aux balises sur les inputs, je ne les aies pas mis en place car au niveau d'Internet Explorer, ils ne fonctionnent qu'à partir de la version 10 il me semble. J'ai évité de mettre des choses trop expérimentales, histoire d'éviter au plus possible les problèmes pour ceux qui se construiront un thème ç partir de celui là.

Pour la largeur de 1000px, il est vrai que les framework ont une largeur de 960px souvent. J'ai testé avec une résolution de 1024 et je n'ai pas d'ascenseur, d'autant plus qu'à 980px de large, le site à une largeur élastique du au responsive.

Pour les sous-catégories, çà ne se gère pas dans le thème, donc je ne saurais te répondre

En tout cas, je vous remercie pour ces remontées.

Stéphane · novembre 2012

Mounik a écrit:

Juste une petite Question, mais là il s'agit plus du Core de PluXml que de design, serais t'il possible de réussir un jour a créer des sous-catégorie ? Un peu comme le Système de WordPress.

J'avoue que c'est une des chose qui me manque le plus sur PluXml.

Il n'est pas prévu de gérer les sous catégories.

Jos · novembre 2012

J'ai apporté mes dernières modifications sur le thème. Mis à part de gros bug signalé, je ne pense plus y toucher, vu qu'apparament le thème convient à Stéphane. Si vous le testez, n'hésitez pas à me faire part de vos bugs.

Den · novembre 2012

Salut Jos,

J'ai testé le thème béta 8. Dans sidebar les mots clés s'affichent, à l'horizontale, c'est, normal?
Pour le reste, tout fonctionne.

Merci! Den

bdube30 · novembre 2012

Super beau ton thème beta jos ! Ça donne le goût de l'utiliser !

Changer thème par défaut pour la prochaine version de PluXML

Réponses