28172 sujets

CSS et mise en forme, CSS3

KNACSS et les marges

Salut à tous,

J'ai une petite question concernant le framework KNACSS (qui est génial au passage),

J'ai vu qu'il y a eu pas mal de mise à jour dernièrement, notamment l'utilisation de l'unité rem, c'est chouette Smiley smile

Au sujet de la "relativité" je ne comprend pas pourquoi il n'est pas proposé dans la partie "Spacing helpers" des valeurs de marges en EM ? Puisque on parle de respect du rythme vertical il me semble que ce genre de helper aurait toute sa place non ? Ou bien j'ai rien compris ?

http://knacss.com/knacss.html

Autre question, mais en restant sur le même sujet, concernant les médias queries me conseillez vous de passer les valeurs des points de ruptures en EM au lieu des PX qui sont proposés par défaut ?

Merci d'avance pour vos conseils !
Administrateur
Salut,

où vois-tu des rem dans KNACSS ? La version SASS d'Hugo Giraudel peut-être (pas vérifié) ?

Pour les marges, de mémoire, oui il vaudrait mieux des em pour respecter un rythme vertical.
Horizontalement, pour la grille (ou pas), tout est exprimé en pixels en général et ça ferait bizarre de faire cohabiter les 2. Bien sûr rien n'interdit de convertir l'un en l'autre (avec un préprocesseur, 0 effort).
Le souci c'est que les maquettes qu'on reçoit (d'agences ou clients extérieurs) ne respectent pas de rythme vertical et que du coup travailler en pixel est bien plus "naturel" (=habituel) et rapide...
Et également, on a plutôt affaire à des blocs de largeur fixe entre 2 points de rupture.

Si tes contraintes ou ton souhait, c'est de respecter le rythme vertical et d'avoir un maximum de blocs en largeur plutôt fluide (préférable si tes contraintes te le permettent), n'hésite pas à adapter KNACSS à ta sauce, c'est autorisé, recommandé, fait pour ça Smiley smile (licence CC-BY).
Ou commence par tester le petit frère RÖCSSTI qui a des marges en em et pour le reste j'ai pas (encore) regardé en détail.


EDIT: la conf' de N. Hoizey sur le sujet : Un petit pas pour l'em, un grand pas pour le web - Paris Web 2013 (la vidéo de tout le jeudi après-midi était dispo sur livestream mais là ça demande une inscription... ça reviendra peut-être ou bien inscris-toi à tes risques et périls ^^ - faut chercher "veodem paris web" et atterrir sur LiveStream)
Modifié par Felipe (08 Nov 2013 - 18:40)
Salut Smiley smile

Merci pour ta réponse pertinente !

J'ai vu les "rem" dans la version less : http://knacss.com/builder/

// LESS mixins : don't touch or you'll be banned [cligne]
// px to em/rem 
.rem(@size, @bf: @basefont){
	@em: round((@size / @bf),4);
	font-size: unit(@em, em);
	@rem: round((@size / 10),4);
	font-size: unit(@rem, rem);
}


Je te rejoins sur la complexité et la bizarrerie de faire cohabiter les 2... J'utilise "less" la plupart du temps donc je pourrai facilement convertir l'un en l'autre.

Je te rejoins aussi sur le problème des maquettes en agence, il faudrait que le webdesigner pense également en "design fluide" dès le départ. Je demandais cette information plus par envie personnelle pour apprendre à faire un design totalement fluide car je pense que c'est l'idéal ergonomiquement parlant Smiley smile

Et pour la conf' de N. Hoizey j'ai de la chance car j'ai pu récuperer la version pdf il y a 2, 3 jours donc je vais pouvoir lire ça tranquillement Smiley lol
Merci bien ! Par contre il y a que le son sur la vidéo, je ne vois pas l'image c'est normal ?
Gyzm0 a écrit :
Merci bien ! Par contre il y a que le son sur la vidéo, je ne vois pas l'image c'est normal ?

Nope Smiley cligne
(Sur les principaux navigateurs, sous mac, tout fonctionne parfaitement bien Smiley cligne )
Sujet clos
Aller à