Quelques frameworks sémantiques

Benjamin Derepas
Les bases HTML/CSS

Bonjour,

Ici pas de problèmes, j'aimerai cependant partager quelques framework front sémantiques similaires à Susy, pour ceux qui comme moi aiment avoir un code propre.

J'ai testé ces différens frameworks, personnellement ma préférence va à Neat qui est très performant, d'autant que l'éditeur propose aussi une alternative à Compass très interessante aussi , ainsi qu'un reset typographie (bitters), et une liste de composants avec Refills .
C'est celui que j'utilise dans tous mes projets.

NeutronCSS est bien , mais reste simple coté fonctionnalités.
Aussi pour ceux qui veulent tester, je vous rappelle que la version 4 de Bootstrap est disponible depuis quelques temps , et intègre une grid basé sur le flexbox (on se sépare enfin des float !).

Toute fois attention, la V4 est encore en beta, non customizable, et le téléchargement comporte tout le framework. A utiliser avec des pincettes en développement, mais à éviter en production.

Enfin, pour ceux qui refutent l'utilisation d'un framework , vous pouvez tout aussi bien créer votre propre framework.
Créez vous un reset sympa, en y ajoutant quelques menus détails méconnus pour la plupart. Concernant les grilles elles même, notre cher Graph à fait un super tuto dessus , et libre à vous de créer votre UI à votre sauce. Assez simple en flat design :)

Autre détail : pensez sémantique, modulable (SMACSS) et n'hésitez pas à bien penser votre architecture comme le montre ce tuto.

Pour ma part je n'applique pas SMACSS et BEM / OOCSS à 100%, d'adapte à ma manière de travailler. Mais la base reste la même , voici un exemple d'architecture :

  • css (css/app.css)
  • scss (_reset.scss | _var.scss | _mixin.scss | _grid.scss | _animation.scss | _layout.scss | _module.scss | app.scss )

Et j'utilise un mix entre BEM et OOCSS pour mon markup 

<article class="post">
    <h3 class="post__title"> awesome title </h3>
    <img src="thumb.jpg" class="post__thumb">
    <p class="thumb__desc"> lorem picsou </p>
  </article>

Voilà j'espère que ce petit post aidera certains a avoir un code plus claire, et améliorera votre productivité.

Si vous avez des retours, des questions, ou du saucisson à partager, n'hésitez pas.

PS : J'aimerai vous présenter et partager mon framework & workflow personnel que j'utilise sur pas mal de mes projets, dites moi si ça vous interesse. On peut voir ça comme un mix entre les vidéos de grafifi (c'est cute !), mais à titre personnel.
(cf : ma phrase n'a aucun sens je sais)

Aucune réponse