+ Répondre à la discussion Actualité déjà publiée
  1. #1
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    novembre 2012
    Messages
    3 148
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : novembre 2012
    Messages : 3 148
    Points : 9 202
    Points
    9 202

    Par défaut Grid-kiss, un plugin PostCSS pour faire des layouts en grille ultra-simplement

    Amis développeurs, je tenais à vous présenter mon dernier projet open source sorti la semaine dernière et qui a fait beaucoup réagir sur Twitter depuis.

    Certains vont adorer, d'autres détester, toujours est-il qu'il est là :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     
    body {
        grid-kiss:
            "+-------------------------------+      "
            "|           header ^            | 120px"
            "+-------------------------------+      "
            "                                       "
            "+-- 30% ---+  +--- auto --------+      "
            "| .sidebar |  |       main      | auto "
            "+----------+  +-----------------+      "
            "                                       "
            "+-------------------------------+      "
            "|              v                | 60px "
            "|         > footer <            |      "
            "+-------------------------------+      "
    }

    Résultat:
    Nom : example-result.png
Affichages : 2891
Taille : 7,1 Ko

    Pour ceux qui ne connaissent pas PostCSS, il s'agit d'un parseur et d'un processeur de CSS, à la manière des préprocesseurs SASS/Less/Stylus, mais en beaucoup plus modulaire. C'est un peu l'équivalent de Babel en CSS.

    Ce plugin de PostCSS vous permet de "dessiner" en ASCII-Art les layouts que vous souhaitez pour vos éléments, et convertira cela en un ensemble de règles CSS standard équivalentes. Il utilise de base la spécification Grid Layout, en cours d'implémentation dans les navigateurs et ne fonctionnant actuellement que sur Chrome Canary et Firefox Nightly. Mais il dispose d'une option fallback utilisant position:absolute et calc() pour amener le support à la majorité des navigateurs, y compris Internet Explorer 9 et +.

    La syntaxe est aussi puissante que permissive et vous permettra de réaliser très simplement des layouts complexes, mélangeant des dimensions fixes et relatives.

    Vous pouvez tester le plugin directement sur votre navigateur ici

    Pour la documentation, le suivi du projet et pour mettre une 🌟, cela se passe sur Github: https://github.com/sylvainpolletvill...tcss-grid-kiss

    J'attends avec impatience vos réactions, qui ont été jusqu'ici très partagées, entre les super-enthousiastes et les sceptiques.

    Que pensez-vous de cette approche visuelle ?
    Avez-vous des suggestions d'amélioration ?
    One Web to rule them all

  2. #2
    Membre éclairé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    juillet 2007
    Messages
    518
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : juillet 2007
    Messages : 518
    Points : 849
    Points
    849

    Par défaut C'est incroyablement génial.

    Bien sur d'un point de vue performances c'est surement pas génial mais les performances seront certainement améliorer quand cela se développera.

    D'autres crieront que l'on ne saura plus rien faire si c'est caché automatique, que cela produit du code moche et non maitriser.... Certes mais ce n'est pas si grave si cela gagne en stabilité, puissance et performances. Aujourd'hui l'assembleur reste réservé à des cas extrème, même le C++ est jugé bas niveau par beaucoup.

    L'idée est vraiment génial et mérite d'être développée et approfondi et après cela restera confidentiel ou pas.
    Tout ce que j'écris est libre de droits (Licence CC0) et je vous incite à faire de même.

  3. #3
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    novembre 2012
    Messages
    3 148
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : novembre 2012
    Messages : 3 148
    Points : 9 202
    Points
    9 202

    Par défaut

    Qu'est-ce qui te laisse à penser que les performances ne sont pas géniales ? D'une part la transpilation est faite au moment du build donc non ressentie par l'utilisateur final, et d'autre part PostCSS est extrêmement rapide, comme tu peux le voir dans la playground en ligne où chaque modification entraîne une mise à jour complète et se fait en quelques millisecondes.
    One Web to rule them all

  4. #4
    Membre régulier
    Homme Profil pro
    Inscrit en
    juillet 2013
    Messages
    42
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : juillet 2013
    Messages : 42
    Points : 88
    Points
    88

    Par défaut Belle initiative

    Vraiment intéressant comme projet!
    Un condensé de bonnes idées. J'approuve.
    Çà peut sensiblement ridiculiser les grilles de projets tel que Bootstrap.

Discussions similaires

  1. [SWT] Api pour faire des graph ?
    Par bawan dans le forum SWT/JFace
    Réponses: 1
    Dernier message: 05/09/2005, 13h13
  2. Réponses: 7
    Dernier message: 16/04/2005, 08h55
  3. [Graphes] Pour faire des graphiques ?
    Par Kyti dans le forum 2D
    Réponses: 3
    Dernier message: 29/03/2005, 15h55
  4. [audio] logiciel pour faire des .au ?
    Par Seiya dans le forum Multimédia
    Réponses: 7
    Dernier message: 05/01/2005, 00h41
  5. problème pour faire des blocs
    Par tinkye_winkye dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 04/01/2005, 14h13

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo