1485 sujets

Web Mobile et responsive web design

bonjour
Combien existe t il réellement de façons de concevoir une page web ( "statique" ) et a partir desqelles les autres type de pages peuvent s 'appuyer .Je n'en distingue que 3 : fixed fluid flexbox .
Les autres s appuyant sur l'une de ses 3 techniques ( MQ , image a 2 couleurs verticales..., toogle menu ).
Y a t il un article de synthèse sur d'autres techniques ou adaptations/variantes ( toogle menu..... ) ?

upload/48731-alsagridfl.jpg

Cordialement
Modifié par 75lionel (16 Dec 2015 - 23:37)
connecté
Bonjour,

Display table n'est pas à négliger, car compatible à partir de IE8. Avant lui on faisait des display block + float left. Les flex vont (bientôt) prendre la succession, en attendant grid layout...

Les articles de synthèse... le problème c'est que ça bouge tout le temps ! Il faut sans cesse veiller...
Bonjour ; après lecture de certaines information ...j'essaie de comprendre les nouveautés et de synthétiser tout ça d'un point de vue code css final ( générer pas less ou sass stylus). Il semble que la propriété css display: sert a définir les layouts table et flexbox .

0) display:table remplace t' il <table> ou peu t on encore utiliser la syntax table au lieu d'une table écris en utilisant une hiéarchie d' élément div associés à de nombreux sélecteurs différents ?


1) La documentation de knacss dit utilisé flexbox en ajoutant entre parenthèse le mot "positionnement" . Ma question aurrait du être quelles sont les modes de positionnement en CSS/HTML . Est ce que flexbox peut utiliser la propriété css position: ? .

2) si on regarde d'autres alternative css comme bootstrap, susy . Quelles sont les technologies CSS ( grid : positionnement alignement , taille) qui caractérise ces alternatives ? A part que l'un est un framework et possède de nombreux sélecteurs prédéfinis et l autre un outil qui n'impose pas les noms des sélecteurs ( sass mixins ) . Je ne vois pas de réel différence au niveau du code .... !!

bootstrap ?
beaucoups de selecteurs contenant une seule propriété avec valeur en %
display: table-cell pour <li>
beaucoups d'élément déja pré stylé et fonctionnel avec javascript
une seule technique "floating" ? : "float" ( laquelle ?)

susy ?
beaucoups de float ( left/right) et margin-right|left avec valeur en % ( responsive)
pas de style , pas de javascript
plusieurs techniques "floating" ? : "float" et “isolate”

3) Je ne sais pas trop la différence entre les différentes techniques float !! Peut être est une technique générale appliqué à un grid float ?


4) quelles sont les technologies alternatives ( anciennes) à flexbox ?

5) contexte et layout . Comme rien n'est simple quand on va dans les détails . Y a t il des règles d'utilisations des layouts : utiliser tel layout dans tel contexte ( footer , table , menu ...)

6) Y a t il quelque chose qui empêche d'utiliser plusieurs grid au sein d'une page web ?
En gros un moyen de désactiver un élément flex comme la technique clear pour float ?
J'espère que clear etait un hack et que rien de tel n' existe dans flexbox ..

Bon mes questions se préciseront avec le temps .

Merci
Modifié par 75lionel (01 Jan 2016 - 19:04)
Voila un résumé sur la façon de construire un layout selon différentes techniques . (javascript detection ) . Une comparaison sur les layouts identiques en utilisant le framework compass susy (float isolate technique ) et flexbox ( w3c spec) .

framework css utilisant flexbox
- flexboxgrid
-polymer
-flexboxgrid ( utilise sélecteur de bootstrap )
- juiced
- knacss


framework commencant à utiliser flexbox
-bootstrap 4
-foundation 6
-

framework sass utilisant flexbox
-stylusgrid
-

framework utilisant gridbox
-compatible que Internet Explorer !!!!
-
-
Modifié par 75lionel (20 Feb 2016 - 00:20)