Typographisme - Macro-typographie sur le Web – Une grille dynamique - Commentaires

Macro-typographie sur le Web – Une grille dynamique - Yulaan

Yulaan — Wed, 19 Mar 2014 00:35:03 +0100

Bonjour,

Je viens de télécharger votre version blueprint.less et c’est brillant. C’est en plus une superbe démonstration et je vois parfaitement la puissance du duo.

Afin de l’intégrer sur mon propre projet, j’aimerais que la grille soit également flexible en largeur également, c’est à dire que les colonnes soient non pas exprimées en px mais en %. Les gouttières peuvent éventuellement rester en px.

J’ai testé seulement en modifiant quelques variables dans le 0-config.less et… résultat catastrophique.

Il doit pourtant bien y avoir un moyen de rendre la grille verticale flexible, non?

À moins que ça ne soit une limitation de Blueprint?

Bien cordialement,
Yulaan

Macro-typographie sur le Web – Une grille dynamique - gcopin

gcopin — Thu, 14 Jun 2012 20:09:51 +0200

Bonjour.
Bravo pour cette article. C’est très intéressant.

Je peux me tromper mais je pense que passer les variables en paramètres offrirait plus de flexibilité. (il serait alors possible de changer la taille du texte parent, le ratio, …

.font-size(@after, @before: 12, @line-height: 1.5em, @ratio: 3 / 2)
{
font-size: @line-height / @ratio * @after / @before;
line-height: @line-height * (@before * @ratio) / (@after * @ratio);
margin-bottom: @line-height * (@before * @ratio) / (@after * @ratio);
}

Macro-typographie sur le Web – Une grille dynamique - Kaelig

Kaelig — Mon, 02 May 2011 10:19:42 +0200

@Vincent : Sass & Less proposent la même chose dans leur globalité. J’utilise uniquement sass parce que dans un environnement ruby ça s’intègre très bien, et que une fois associé à Compass, il devient un peu plus étendu que Less.

Je t’encourage en effet à faire un tour de ce côté, si tu aimes Less, tu adoreras le combo Compass+Sass, surtout depuis la dernière version avec de la génération de sprites à la volée :)

Macro-typographie sur le Web – Une grille dynamique - Julien

Julien — Sun, 01 May 2011 11:32:03 +0200

Hello, l’article à l’air intéressant mais il manque un petit truc, une explication au départ sur comment ça marche less, l’intérêt du truc (un peu plus détaillé) ou un truc du style, parce que en tant que graphiste j’ai l’impression à te lire que tu parles d’un truc énorme, et pratique, mais qu’il me manque une clé au début et que du coup je passe totalement au travers.

On comprend bien les explications propres à la syntaxe, une fois qu’on est dedans, mais il manque des détails sur le “avant” (genre ok je ne connais rien de tout ça, comment je fais avant de coder là, comment ça marche ?) (même si tu as mis les liens vers les différents outils)

Et sinon, comme Étienne, j’ai envie de dire “conf paris web” ;)

(hop : le champ url ne valide pas si il manque le http, c’est mal ;) )

Macro-typographie sur le Web – Une grille dynamique - Vincent

Vincent — Fri, 29 Apr 2011 19:50:25 +0200

Cyberbaloo : ça peut potentiellement marcher avec n’importe quelle grille puisque tout est configurable (je pends d’ailleurs 960gs en exemple).

Gabriel : merci pour la découverte. J’en profite pour préciser qu’en prenant le temps d’analyser dans le détail BluePrint, ce fût aussi l’occasion de corriger quelques incohérences au sein même du framework.

Julien b. et Kaelig : je ne cherche pas ici à comparer Less et Sass, qui ont sans doute leurs avantages respectifs ; mais bel et bien profiter de leurs nouvelles possibilités. Merci néanmoins, je ne manquerais pas de jeter un œil plus curieux à tout cela.

Macro-typographie sur le Web – Une grille dynamique - Kaelig

Kaelig — Fri, 29 Apr 2011 16:57:31 +0200

Je suis aussi adepte de Sass (sous sa syntaxe SCSS) et de Compass.

Pour le tester et faire joujou avec, ça prend moins d’1 minute :

$ gem install sass compass
$ sass —watch style.scss:style.css —compass

Macro-typographie sur le Web – Une grille dynamique - Julien b.

Julien b. — Fri, 29 Apr 2011 15:56:28 +0200

Un mot sur Compass. C’est d’avantage un framework CSS qu’un pur compilateur. En ce sens, il offre des fonctionnalités importantes mais également assez contraignantes.

Sass, le « méta-langage » d’extension de CSS3 sur lequel Compass est basé est en lui-même très intéressant. Il propose deux modes syntaxiques différents. L’un (.sass) permet de s’affranchir des accolades, point-virgule, etc. (à la Python), tandis que l’autre (.scss) utilise une syntaxe CSS plus traditionelle.

Sass est assez supérieur à Less, à mon – très humble – avis.

Pour plus d’infos : http://nex-3.com/ & http://sass-lang.com/

À noter qu’un utilitaire less2scss existe pour ceux qui voudraient tester les deux ;)

Macro-typographie sur le Web – Une grille dynamique - Gabriel

Gabriel — Fri, 29 Apr 2011 15:40:28 +0200

Dans le même genre, un framework existe déjà : http://centage.peruste.net/ , il est plutôt bien fait, sur ce même principe.

Macro-typographie sur le Web – Une grille dynamique - Cyberbaloo

Cyberbaloo — Fri, 29 Apr 2011 15:16:30 +0200

Et ça marche avec 960gs ou pas ?

Macro-typographie sur le Web – Une grille dynamique - Vincent

Vincent — Fri, 29 Apr 2011 14:37:35 +0200

Ne dis rien… Tu connais ma timidité légendaire !

Macro-typographie sur le Web – Une grille dynamique - Etienne

Etienne — Fri, 29 Apr 2011 14:23:24 +0200

Je dis ça, je dis rien, je te sens chaud pour proposer un sujet à Paris Web cette année :)