less.js, lessframework & CSS grilles ala Blueprint ou 960.gs

Question

Ok, donc Less.js est venu, et il semble que mes rêves de créer un cadre CSS (en particulier un système de «grille»), avec un ' Le langage CSS abstrait pourrait être sur le point de devenir réalité.

C'est, 960 et Blueprint sont super et tout ... mais si je agacé de mettre les informations de style dans le balisage HTML, tels que:

class="article grid_4 pull_2" 

ou quelle que soit la syntaxe était :)

Ainsi, il semble maintenant que nous pouvons le faire de cette façon:

.article { 
    .grid_container(); 
    .grid_four(); 
    .pull_two(); 
    .last(); 
} 

Weeeeeee! Donc, je suis sur le point de me lancer dans le développement de ce système pour moi-même - mais je suis sûr qu'il y a des esprits malins qui l'ont déjà fait - donc avant que je ne me lève lourdement ...?

Des fils?

Bien aimable

Daryl.

Answer 1

C'est le framework CSS que vous cherchez - http://semantic.gs/

Le système de grille sémantique - Mise en page pour demain. Définissez les largeurs de colonnes et de gouttières, choisissez le nombre de colonnes et basculez entre les pixels et les pourcentages. Tout sans aucune classe .grid_x laids dans votre balisage. Oh, et avons-nous mentionné que c'est réactif? Présenté par LESS.js et le créateur de 1KB Grid.

Answer 2

J'ai vérifié moins, il était une poussée entre cela et la nouvelle syntaxe sass (SCSS), mais ce qui m'a fait choisir SASS est qu'il a un moyen de transformer en css code SCSS.

L'aller-retour était quelque chose que je voulais vraiment. Une fois que cela est arrivé, alors Compass s'est présenté. J'allais essayer d'utiliser quelque chose pour coder tout en python, mais il me semble logique de pré-traiter le css, d'autant plus que j'aimerais utiliser le HTML5, et si la spécification change, alors je peux ajuster la génération.

Answer 3

BTW gens, j'ai commencé ce cadre dont je parlais.

http://github.com/DarylAntony/lesser

Je vais avoir du plaisir avec elle.