28172 sujets

CSS et mise en forme, CSS3

Mon Framework HTML 5 / CSS - Aidez-moi à l'améliorer :)

Bonjour!

Il n'y a pas très longtemps j'ai décidé de créer mon propre Framework de développement.

J'avais un peu essayé 960.gs, blueprint, et d'autres... tous basés sur des grilles. Mais je dois dire que je me sentais un peu restreint dans ma créativité! lol.
Bref, j'ai voulu faire un petit quelque chose qui me fournisse rapidement une base de travail décente.

Pour l'instant 2 copié-collés suffisent à choisir entre 1600 design différents, et un autre copié-collé permet de choisir entre plusieurs styles de typographie.

Mais, c'est qu'une alpha-version. Et j'ai besoin d'aide pour débugguer un peu et améliorer l'ensemble.


- Le framework est disponible ici : www.woobzine.com/msf (il m'a fallu moins d'1h pour coder ce site en me servant de mon framework)

- Un autre exemple de site que je suis entrain de faire en me servant de mon framework : http://woobzine.com/pointcoeur/ (par contre il n'est pas fini car j'attends le feu-vert de la personne pour qui je le fait pour continuer à travailler dessus)


Si vous pouvez télécharger mon framework et m'aider à l'améliorer, je vous en serait très reconnaissant.

MERCI ^^
Hello, j'ai testé ton framework et je le trouve clair et assez complet. Il ne manque juste que la mise en forme des images.
Hum, y a déjà quelques styles prédéfinis pour la mise en forme des images. 




/* Gets rid of IE's blue borders */
a img {
    border:none
}

p img.left {
    float: left;
    margin: 1.5em 1.5em 1.5em 0;
    padding: 0.5em;
}

p img.right {
    float: right;
    margin: 1.5em 0 1.5em 1.5em;
	padding: 0.5em;
}

.img-left, img.alignleft {
    float:left;
    margin:0 20px 18px 0;
}

.img-right, img.alignright {
    float:right;
    margin:0 0 18px 20px;
}



Dans la liste de snippets livrée avec le Framework y a aussi quelques styles pour les images:


/* Image opacity change on hover
--------------------------------------------------------------*/
/* CSS */
.opacity img{ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.4; }
.opacity:hover img{ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity: 1; }
/* HTML */
<a href="http://www.woobzine.com" class="opacity"><img src="image.gif" /></a>


/* Image preloader
--------------------------------------------------------------*/
img { background: url(../images/loading.gif) no-repeat center center; }




Mais, bon d'accord, ça en fait pas beaucoup et peut-être qu'il faudrait que je rajoute quelques styles plus élaborés. Je fais ça pour la prochaine release ^^

Merci pour les conseils Smiley smile
Hé hé!

Ben c'est une bonne nouvelle alors. Si tu trouve des bugs (y en a plein, c'est sûr) ou des choses à améliorer, fais moi signe.

Là je poste un gros gros article sur mon blog (concernant le processus de création de site web) et après je me remet à bosser sur mon framework.

Merci encore !


Ps: c'est sympa de m'envoyer des mails de soutien (ça me fait même très plaisir), mais si ce projet vous plait, vous pouvez aussi le montrer ici ^^ Merci
Modifié par tsedaka (11 Oct 2009 - 17:59)
Salut,

c'est sympa de jouer avec html5 mais on est encore loin de pouvoir l'utiliser "pour de vrai" tu ne crois pas ? Smiley smile
Bonjour,

oui vraiment sympas , en regardant rapidement je vois pas la petite astuce pas forcement connue ou bien comprise Smiley smile (le couple padding/margin negatif pour les fausses colonnes) , mais manque le display:inline a joindre au float qui evite le double-margin dans IE par exemple .

Le pré-machage CSS pour les formulaire est peut-etre manquant a mon avis , je pense a l'alignement des elements par exemple peut-etre quelques selecteur comme input Smiley submit . (approche -> gabarits basique sans partir dans un reset Smiley smile )

Dommage aussi que ce ne soit que compatible html5 Smiley smile , mais sans aucun reproche de ma part (je fais aussi mumuse avec html 5 et ça me demange pas mal de publier en ligne en html 5 malgré IE ... )

En gros , beau travail , pour une fois pas d'approche d'un 'reset CSS ' revisitée , mais dommage que le framework dependent directement de html 5 .
Cette collection de gabarits pré-stylés est interessante !

ça faisait un moment que je n'avais pas vu quelque chose dans ce genre qui attire mon attention .

GC , avis personel bien sur Smiley smile .
a écrit :
c'est sympa de jouer avec html5 mais on est encore loin de pouvoir l'utiliser "pour de vrai" tu ne crois pas ?


Hum, avec le fichier .js lié qui émule plus ou moins le HTML 5 pour IE, ça tient la route je trouve. Il y a parfois quelques problèmes quand ça entre en conflit avec des scripts jquery, mais dans ce cas, il suffit de remettre des balises de type (X)HTML classique et c'est bon.

J'ai cessé de me prendre la tête avec IE6. Et à partir d'IE7, mon framework se comporte plutôt bien (enfin pour les sites que j'ai fait avec jusqu'à présent).


a écrit :
oui vraiment sympas , en regardant rapidement je vois pas la petite astuce pas forcement connue ou bien comprise smile (le couple padding/margin negatif pour les fausses colonnes)


Si, si, elle y est sous une version minimum dans la liste des snippets:

/* Overflow trick for equal-height columns
--------------------------------------------------------------*/
#container { padding-bottom: 10020px; margin-bottom: -10000px; }


Avant je m'en servait souvent, mais elle pose parfois des problèmes d'overflow dans les pages complexes. Donc je l'utilise de moins en moins.

a écrit :

mais manque le display:inline a joindre au float qui evite le double-margin dans IE par exemple .


Faudra que je vérifie si j'ai pas ça dans la feuille IE.css, mais de toute façon c'est pris en charge via javascript (cf. IE8.js):

... {return"."+this.className+"{display:inline}"}}


a écrit :
Le pré-machage CSS pour les formulaire est peut-etre manquant a mon avis , je pense a l'alignement des elements par exemple peut-etre quelques selecteur comme input submit


Il est présent dans element.css. C'est basé sous le framework "formy" que j'ai adapté.

Lance la page typography.php dans firefox et regarde en bas. Il y a 2 formulaires stylisés : un horizontal et un vertical. Si les styles ne sont pas bons, ou si tu veux des styles supplémentaires, fais-moi signe, je ferais de mon mieux!


a écrit :
Dommage aussi que ce ne soit que compatible html5


Oui, je sais, c'est un parti-pris qui peut géner. Mais si tu veux repasser sous XHTML 1.0 strict, c'est très facile.

Une fois ton layout choisi, il te suffit de faire une recherche et de remplacer les balises HTML 5 par des DIVs dans le fichier index et dans les fichiers CSS. Y en a pour 2 minutes.

Au début, j'avais pensé à proposer le choix, mais... avec 1600 layout.css différents proposés, c'est un peu galère de tout rechanger. Mais, vu ton avis, je vais proposer le choix entre (X)HTML et HTML 5 pour la prochaine release !!!



Merci BEAUCOUP pour vos commentaires et avis! Je vais en tenir compte pour la prochaine version Smiley smile
Sujet clos
Aller à