28122 sujets

CSS et mise en forme, CSS3

Grille css

Il y a environ 1 heure
Bonjour, j'ai découvert les systèmes de grilles avec bootstrap mais j'aimerais maintenant créer moi même mon site en utilisant juste une grille.

j'ai donc trouvé sur internet des grilles avec css puis avec flexbox et avec grid qui est plus récent.

j'aimerais donc savoir qu'est ce qui est le mieu pour le moment à utilier, quels sont les meilleurs grille actuel ?

j'ai pu trouver http://flexboxgrid.comqui utilise flexbox et qui m'a l'air pas mal

merci pour vos avis car ca me prend la tête et je vais avoir un site pro à faire bientôt.
Administrateur
Hello,

La réponse est compliquée car chaque système de grille est différent et dispose d'avantages et d'inconvénients.

Voici une liste non exhaustive :
• o-grid du Financial Times : http://registry.origami.ft.com/components/o-grid
• GridLex : http://gridlex.devlint.fr/
• Batch : https://martskin.github.io/batch
• Core : http://splintercode.github.io/core-flex-grid/
• Lost Grid : https://github.com/corysimmons/lost
• Chewing Grid : https://github.com/tzi/chewing-grid.css
• flexgrid : http://ptb2.me/flexgrid/
• griddleCSS : http://studio51.github.io/gridlecss/
• Levity : https://github.com/w-jerome/levity
• unGrid : http://sherbrow.github.io/ungrid/flex.html
• FlexSassCandy : https://github.com/meerita/flexsasscandy
• Topcoat Grid : https://github.com/topcoat/grid
• Flex Grid Framework : http://flexgridframework.com/
• Grillade : https://github.com/alsacreations/KNACSS#juste-une-grille--grillade-

Comme tu le vois, difficile de faire son choix Smiley ohwell
Modifié par Raphael (23 Feb 2016 - 18:15)
J'utilise celle-ci gridle tout simplement car j'aime bien faire ma grille directement en css (et donc ne pas avoir à coller des classes partout).
en regardant gridle la syntax pour css utilise un fallback jacvascript pour mediaquery avec une syntaxe particulière pour min-width . 2 min-width avec 2 sens utilisatin différentes selon le contexte !!!


1-syntax propriété css : p { min-width : 150px; }
2-syntax media : @media only screen and ( min-width : 480px) { .....}
3-syntaxe gridle : selectorName [ min-width ~="400px"] { ..........}

la syntaxe 3 [ .. ] est elle permise en CSS ! depuis quelle version ? est ce un shortcut ? une syntax ignorer par parseur css ? ou interpreter comme un commentaire !!!

Merci
Modifié par 75lionel (08 Mar 2016 - 01:38)
Il s'agit des sélecteurs d'attributs, compatibles depuis IE7.

Je pense qu'ils sont sous utilisés, par méconnaissance sans doute, mais aussi peut être en raison de leur complexité d'utilisation. En effet, dans ton exemple on cible TOUTES les boites de 400px, alors gare aux comportements d'affichage non désirés sur les sites importants.

Perso j'utilise ce sélecteur sur des liens très spécifiques, ce qui m'évite de poser une classe sur cet élément lien.

Exemple si je cherche à donner un style "lien de téléchargement" à tous mes liens pointant vers un fichier ZIP ou PDF, avec une classe ".download-link" pour les autres cas de figure :
[href$=".pdf"],
[href$=".zip"],
.download-link {
    padding: .5em;
    border: .2em solid Orange;
    border-radius: .5em;
}

Voir l'exemple dans son contexte.

Le symbole $ c'est pour l'aspect regex du truc : il permet de ne parser les caractères demandés qu'en fin de chaîne. Si j'avais voulu cibler une chaine de caractère en début de chaîne j'aurais mis un ^.

On aurait pu ajouter des .doc, .docx et bien d'autres encore...
Modifié par Olivier C (08 Mar 2016 - 08:15)
Sujet clos
Aller à