IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Grid-kiss
Un plugin PostCSS pour faire des layouts en grille ultra-simplement

Le , par SylvainPV

39PARTAGES

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
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:


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 ?

Une erreur dans cette actualité ? Signalez-nous-la !