Auteur
Grafikart

51 Commentaires

905326ebceb9cce7d84da6cadae3bb0d?s=200&r=pg&d=mm
yannick, 06-05-2013 22:36:35 - Répondre

Bonsoir et merci pour ce tutoriel, clair, net et précis !
Pour les magentistes, un lien concernant l'intégration d'une grille, bluffant de simplicité :

http://www.demacmedia.com/ecommerce/mini-tutorial-responsive-design-magento/

Une question au webmaster : quel logiciel html utilisez vous ? Je trouve génial le fait que div.qqch se transforme en tag ...
Merci d'avance

72ba92572dd38e2301ab6b91b8577530?s=200&r=pg&d=mm
Dimiweb, 28-04-2013 17:07:41 - Répondre

Merci beaucoup c'est très instructif

6330
Couss, 14-09-2012 12:05:34 - Répondre

Très bonne explication, voila qui va me faire gagner pas mal de temps

4a97ba1f24cddd8bc14c17a31da86ae9?s=200&r=pg&d=mm
marcus wright, 20-08-2012 13:47:06 - Répondre

Merci à toi pour cet enseignement très utile.

948acdf4fcd5d03059ba22a4d8370429?s=200&r=pg&d=mm
Moham3d, 20-06-2012 01:03:09 - Répondre

Lorsque je mets le CSS de la grid cela ne fonctionne pas il reste toujours à 13 grid je comprend rien.

948acdf4fcd5d03059ba22a4d8370429?s=200&r=pg&d=mm
Moham3d, 20-06-2012 00:49:27 - Répondre

Je suis perplexe, je reproduis le même code HTML, mais je n'obtiens pas la même chose. Est ce que je dois mettre du CSS, comme par exemple du float, des marge etc. Je ne comprends pas.

2d5b3ad70bbe6755415cb287613c5830?s=200&r=pg&d=mm
tutospace, 13-06-2012 20:22:55 - Répondre

Génial j'ai jamais utilisé ce systeme de Grid, mais Aujourd'hui c'est sur que je vais commencer a les utiliser, Merci Grafikart pour vos tutos vraiment TOP :)

0d6fd40b9032d1180cf3747081fc8611?s=200&r=pg&d=mm
Noodlz, 21-05-2012 13:36:14 - Répondre

Merci beaucoup pour cette découverte que je ne connaissais pas, étant plus ou moins débutant dans le monde du multimédia et notamment de la programmation orientée Web !

NB : Les classes push et pull sont plus ou moins des substituts à prefix et suffix, de ce que j'ai cru comprendre dans le CSS, après je me trompe peut-être. ^^'

0d6fd40b9032d1180cf3747081fc8611?s=200&r=pg&d=mm
Noodlz, 21-05-2012 14:14:11 - Répondre

Edit: Les classes prefix et suffix jouent sur le padding alors que push et pull jouent sur la position en left ou right (pas sur le margin). On s'en rend compte en mettant un background avec une couleur quelconque sur les éléments de notre grille, avec prefix et suffix, c'est en fait la dimension de l'élément qui change en quelque sorte, alors qu'avec du push et pull, l'élément est juste déplacé par rapport à son point de référence (défini selon le grid_X en fonction du nombre de colonnes de la grille utilisée).

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
fadi, 03-05-2012 19:31:01 - Répondre

merccccccccci

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
bdaboah, 29-02-2012 18:47:20 - Répondre

Très bonne approche des framework css qui m'étaient inconnus jusqu'à maintenant

721044c667209849e8ae00357a7cbd5b?s=200&r=pg&d=mm
ludo31, 07-02-2012 17:00:30 - Répondre

moi ma question est comment réduire la petite espace entre les grilles ??
si possible

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
gopo, 20-01-2012 13:07:39 - Répondre

Merci beaucoup pour ce travail très utile. Le ton est sympathique, généreux et honnête. Et le pédagogiquement irréprochable. Grande classe !

F574f9a654a53d1e29ef5eef01ddee38?s=200&r=pg&d=mm
pierrot, 17-01-2012 17:04:34 - Répondre

Moi qui négligeais souvent le design... Merci beaucoup pour le tuto!

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
mody, 11-11-2011 06:57:43 - Répondre

je veux dire plutôt comment avoir l'outil gridder pour afficher la grid

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
mody, 11-11-2011 06:41:50 - Répondre

Super tuto.

Pourrions nous disposez de votre grille que vous utilisez comme fond d'image ?

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
boardingow, 18-09-2011 21:15:40 - Répondre

merci pr ce tuto

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Identity, 11-09-2011 18:42:53 - Répondre

Très bon le système de grille, cependant mettre des div class clear, c'est vraiment bof.
Ce pourquoi j'ai ajouté dans le fichier grid.css :

clear:after{content:'';display:table;clear:both}

Ainsi il suffit d'ajouter la class clear au dernier élément flottant.

1bd705a275e18737d68ca44b019358a4?s=200&r=pg&d=mm
net, 05-09-2011 17:52:57 - Répondre

merci pour cet excellent tuto et aussi pour le générateur d'image http://placekitten.com/

E760394ab0d22f75aca4fde070d93b21?s=200&r=pg&d=mm
Gloubi, 29-08-2011 13:41:09 - Répondre

Génial merci beaucoup!

4f18719bf3b39d747f93beada8ad980d?s=200&r=pg&d=mm
member67, 13-08-2011 23:35:11 - Répondre

Salut,
Je viens de découvrir le site et je me suis inscrit en premium ... eh ben, c'est génial ! Super bien expliqué ! J'ai 15 ans de web, des centaines de bouquins tous azimuths, de l'expérience, et très peu de temps et un grand ras le bol de m'adapter aux dernières nouveautés, mais là grâce aux tutos, je découvre des techniques de façon simple et exactement au niveau souhaité. Bref, je suis venu pour le tuto AS3 pour faire du panorama 3D ... je profite avec bonheur des autres qui m'ouvrent des pistes que je vais concrètement utilisé. Donc merci à vous, très efficace !

Je suis content.

9cda18d8ac5dda07ce95355e7da14e05?s=200&r=pg&d=mm
tomtomtom, 12-08-2011 17:39:58 - Répondre

Quel est le plugin chrome utilisé pour editer en temps réel le CSS ??

04b739c4d3139f8a500e1e27f1dabde3?s=200&r=pg&d=mm
creataddict, 11-07-2011 00:29:10 - Répondre

Pour celui qui veux superposer les grid960 sous google chrome et qui ne veux pas traîner le code js pour , voici un plugin sympa :https://chrome.google.com/webstore/detail/jdnodfldgiopfogbkfnfeohnfcjlabdm?hl=fr

1462bd5b938a8543b8a6696c682f31d8?s=200&r=pg&d=mm
Deus Ex Machina, 06-07-2011 21:24:11 - Répondre

Merci! J'adore ton site => FAV!

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Tobu, 05-07-2011 00:31:32 - Répondre

Merci pour ce tuto, et ta clarté.

71524682b792f629c7fe0ffeaa98f43e?s=200&r=pg&d=mm
Tsukasa, 03-07-2011 16:42:26 - Répondre

j'avoue que ce systeme est fabuleux dans le sens ou une très grande partie du travail est en quelque sorte machée.

j'imagine bien aussi la limite de ce genre de procédé. pour ma part, je vais essayer d'adapter un style phpboost sur ce systeme de grille.

encore merci pour la vidéo, tres instructive comme d'habitude

8657
zvetlania, 03-07-2011 15:14:56 - Répondre

Wahouu merci ça va m'être très utile !

66cf4af32f67d161feb0f8e6d0adbf33?s=200&r=pg&d=mm
pcyassine, 02-07-2011 18:14:53 - Répondre

c'est génial ce tutoriel !!!

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
jquery, 02-07-2011 17:41:21 - Répondre

Bonjours,

Super tuto.

Pourrions nous disposez de votre grille que vous utilisez comme fond d'image ?

4ff53c483e2236995b93f7c36300a302?s=200&r=pg&d=mm
musicalitymaker, 29-06-2011 19:26:54 - Répondre

Très bon tutoriel, j'ai un petite problème ma div qui à la classe "grid_9" et ma div qui à la classe "gril_3" sont inversé. la grille 3 et est posé d'être à gauche et mon menu à droit. C'est quoi le problème de cette inversion?

96eb87091b4d1331a20a72a80162d950?s=200&r=pg&d=mm
stivaugoin, 29-06-2011 17:58:54 - Répondre

Super tuto encore une fois!! Je connaissais et utilisais déjà mais il y a quelque petit truc que je ne savais pas!! :)

D514f73d7382739d67507fbda150326f?s=200&r=pg&d=mm
seezer, 29-06-2011 17:46:41 - Répondre

Si je prend l'exemple de ce template de panneau d'administration. le passage de l'état fluid à fixe ce fait sans à avoir besoin de tous recalculer mais juste en remplaçant le fichier grid.css

Fb84c9c730ca0f34788d92c0a22d80bb?s=200&r=pg&d=mm
vonghesj, 29-06-2011 12:56:46 - Répondre

Bon tuto...
juste pour te dire que l'utilisation des grilles peuvent aller beaucoup plus loin. Vois les "media query"...

lien vers alsacreation : http://www.alsacreations.com/article/lire/930-css3-media-queries.html

lien vers un site 1140px grid (amuse toi à redimensionner ta fenêtre): http://cssgrid.net/

4e672ea1015102ad8bb3651be4edde0f?s=200&r=pg&d=mm
rom07, 29-06-2011 13:08:14 - Répondre

Merci pour les liens... Très très utile ;)

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
studiopix, 29-06-2011 12:24:15 - Répondre

Vraiment parfait!! Merci

E8e18af5adde8ffc717610ea5f7b3bd1?s=200&r=pg&d=mm
Etix, 29-06-2011 11:55:59 - Répondre

Tu as finalement réussi à me décider à utiliser ces grilles !

C'est tout simplement, génial !

Merci.

B39eadb4a69b301084298f8ef913c628?s=200&r=pg&d=mm
kalagan, 29-06-2011 02:07:10 - Répondre

Super tuto merci ;)

B0fa028cc65593b0e59ae2533f43d9fe?s=200&r=pg&d=mm
ParadisePx, 29-06-2011 01:40:30 - Répondre

c'est un plug-in qui s'appelle zencoding

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Bat, 29-06-2011 00:59:18 - Répondre

Les raccourcis du genre div.pouet qui donne <div class="pouet"></div> c'est un plugin ou bien un code templates perso ?

Super tuto, merci ;)

Fb84c9c730ca0f34788d92c0a22d80bb?s=200&r=pg&d=mm
vonghesj, 29-06-2011 12:50:29 - Répondre

regardes le tuto sur netbeans... ;)

Fb84c9c730ca0f34788d92c0a22d80bb?s=200&r=pg&d=mm
vonghesj, 29-06-2011 12:59:28 - Répondre

Tuto "Truc et astuce"

Ce009ffffb0f2f76a2d0914168dc699d?s=200&r=pg&d=mm
Mitch, 28-06-2011 22:31:19 - Répondre

Excellent tuto :)

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Mikachu, 28-06-2011 21:46:40 - Répondre

Excellent comme toujours.

Ca va me servir je suis en plein développement d'un site

93e8cc7953151e6a47adb88a1a6589c8?s=200&r=pg&d=mm
Tiorte, 28-06-2011 21:10:28 - Répondre

Très, très bon tuto!

04b739c4d3139f8a500e1e27f1dabde3?s=200&r=pg&d=mm
creataddict, 28-06-2011 21:01:03 - Répondre

Super tuto, pour ceux qui comme moi sont accroc à compass, il est possible d'utiliser les grilles 960 ==> http://theled.co.uk/blog/archive/2010/06/18/semantic-960-gs-using-sass-and-compass/

Librement.

04b739c4d3139f8a500e1e27f1dabde3?s=200&r=pg&d=mm
creataddict, 29-06-2011 01:03:45 - Répondre

Lien plus à jour https://github.com/nextmat/compass-960-plugin
Bon dev :)

E8cdbc4891bd5f0062887851187a3017?s=200&r=pg&d=mm
nanodemars, 28-06-2011 20:57:11 - Répondre

C'est magique ! Merci

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
jmStudio, 28-06-2011 20:24:37 - Répondre

Super, j'avais pas trop saisi l'intérêt des grilles dans le tuto sur toshop, mais là c'est clairement cool.

D6feee2b36cace4a5a0fe1c5ef03bf45?s=200&r=pg&d=mm
kerfam, 28-06-2011 18:15:55 - Répondre

super tuto
merci

63a91d763a1eae9b3789dc5d52784eef?s=200&r=pg&d=mm
PaulB319, 28-06-2011 17:23:21 - Répondre

Génial, un nouveau tutoriel !

82eadb6d2f84a2f70cfbeeb2ac55e3bc?s=200&r=pg&d=mm
fantoche, 28-06-2011 17:11:19 - Répondre

Excellent Merci !!