Developpez.com

Le Club des Développeurs et IT Pro

GSS est né : la programmation par contrainte à la rescousse de la mise en page CSS

Un framework web basé sur Cassowary

Le 2014-03-04 09:34:34, par Arsene Newman, Expert éminent sénior
Développeurs web souriez, vos problèmes de mise en page CSS seront bientôt réglés ! Voici d'une manière générale, le slogan du nouveau framework GSS (Grid Steel Sheet) lancé par l'entreprise The Grid.

GSS est un framework de développement web (HTML5/CSS/JavaScript) open source, proposé comme une alternative au Framework Famo.us, il modifie le préprocesseur CSS, plus spécifiquement certaines fonctionnalités comme celles relatives à la mise en page, pour les remplacer par d'autres plus intuitives, plus simple à utiliser. Selon Dan Tocchini développeur et CEO de The Grid "GSS se propose de régler certains problèmes fondamentaux rencontrés par les développeurs lors de l'utilisation du CSS, particulièrement les fonctionnalités de mise en page" avant de rajouter "certaines tâches comme le centrage d'un élément peuvent s'avérer rude en CSS, ce qui pousse les entreprises à faire appel à des personnes qui se sont familiarisés avec ce genre de situation et qui sont en mesure de contourner ces problèmes, tout cela est assez frustrant pour les développeurs web et donne au final des sites web calqués les uns sur les autres".

A titre d'exemple, avec GSS il devient très simple de centrer un élément par rapport à un autre, en une seule ligne, ce qui donne une mesure de la puissance de GSS :
Code :
#any[center] == #anyother[center];
Pour ce faire GSS, repose sur le portage sous JavaScript (Cassowary.js) de l'outil Cassowary, utilisé entre autre par Cocoa Autolayout d'Apple pour ces deux catégories d'OS (iOS et OS X.). Cassowary est un outil de résolution de problème par contrainte, basé sur une nouvelle approche dite de programmation par contraintes où le développeur spécifie ce qu'il veut faire (What to do), un solveur mathématique se charge alors de donner le procédé, c'est-à-dire ce qu'il faut faire (How to do it).

En plus du CSS natif qui a été revu, GSS inclut certaines alternatives connues au CSS, comme le CCSS (Constraint CSS) développé par Greg Badros lui-même membre de l'équipe de The Grid, ainsi que l'alternative VFL développé par Apple.

Avec autant d'atouts et de puissances, GSS pourrait faire les beaux jours des développeurs et écrire une belle page dans le développement web, surtout si l'équipe de GSS reste à l'écoute de sa communauté, il est donc naturel de conclure par "GSS, un framework à suivre de près".

Installer GSS

Télécharger son code source sur GitHub

Source : Page officiel de GSS

Et vous ?

Qu’en pensez-vous ?

Pensez-vous que GSS peut s'imposer comme un framework web incontournable ?
  Discussion forum
17 commentaires
  • Jarodd
    Membre expérimenté
    Développeurs web souriez, vos problèmes de mise en page CSS seront bientôt réglés !
    [...]
    GSS est un framework de développement web (HTML5/CSS/JavaScript) open source, proposé comme une alternative au Framework Famo.us
  • Jaujon
    Membre régulier
    Le vrai problème avec CSS, c'est que peu de développeurs ou d'intégrateurs maîtrisent réellement les fondamentaux du langage.

    Comment un élément en position:absolute se positionne-t-il? Comment se comporte un élément flottant? A quoi correspond la largeur d'un élément selon le box-sizing?

    Utiliser une autre technologie parce qu'on tâtonne dans une autre est-ce vraiment la bonne solution?
  • une nouvelle approche dite de programmation par contraintes où le développeur spécifie ce qu'il veut faire (What to do), un solveur mathématique se charge alors de donner le procédé, c'est-à-dire ce qu'il faut faire (How to do it).
    La programmation par contrainte ça n'est pas nouveaux, ça existe depuis très longtemps.
    Et un solveur de contrainte n'est pas du tout mathématique, c'est purement algorithmique.

    Vous faites confusion avec la programmation linéaire qui est basée sur un solveur mathématique.
  • 4sStylZ
    Membre éprouvé
    Et les perfs? Faire du css en js...
  • eomer212
    Membre confirmé
    he, lisez le sujet, c'est un préprocesseur..
    donc pas de charge javascript sur le client,
    peut être une sur le serveur (node.js sans doute.. à vérifier.).
    si c'est différent, je peux dire que c'est idiot.

    si ca permet de traiter en plus tous les cas foireux ou le css doit etre adapté en fonction du navigateur, pour obtenir le résultat visé, pourquoi ne pas l'utiliser..?
    c'est un outil de productivité, pas un nouveau standard..
    en tout cas, je vais voir ca de plus prés, css me casse souvent les cou....

    d'où l'utilisation salvatrices des thèmes. faire un bon css, ca tourne à l'art, et faut savoir le faire.. alors, un outil pour arréter de se torturer le cerveau.? oui, je prends.
  • Ah_Kin
    Membre averti
    où est le tuto pour apprendre à l'utiliser?
  • macumba
    Membre averti
    Sur Firefox, sur IE10 et IE9 la page d'accueil de GSS apparait vierge sur mon navigateur.
    Il n'y a qu'en compatibilité IE8 et IE7 que je vois apparaitre une partie de la page.
    Et la page n'est réellement lisible que sur Chrome...

    Pour un langage qui cherche à régler les pbs css, il y a encore un peu de boulot...
  • Bonjour,
    Je sais que tu vas hurler, mais voir arriver un nouveau framework dont le site web officiel
    chevauche ces élément sur des écrans de 400 pixels, on comprends vite le manque de savoir faire
    et donc l'échec annoncé par cette nouvelle usine à gaz.
    Tu as visité leur site avec un portable ?

    Bien Amicalement
  • rodolphebrd
    Expert confirmé
    Ça passe nickel chez moi (sur Iphone 4).
  • Oui c'est rétabli, ça doit-étre fragile,
    j'irais voir le code de la page mais cela parait courant comme méthode.
    Pourquoi un tel outil ?
    En tout CSS sans JS ni rien on obtient le même résultat. Pourquoi cette usine à gaz ?