Trucss : un micro-framework css simple et léger

Trucss est un micro-framework CSS tout récent, créé par un français. Il est très léger (seulement 5,8 ko et moins de 400 lignes de codes pour le fichier non compressé !!)

Voici mon point de vue sur ce nouveau framework ultra léger.

On se lance et on commence par les points faibles :

Si vous avez comme moi l'habitude d'utiliser Bootstrap, sachez que ce framework n'a rien à voir avec ça ! En effet, Bootstrap est très complet et utilise du Javascript pour utiliser de nombreux composants (Carousel, Modal...).

Trucss, quant à lui, est contenu dans un seul fichier 100% CSS ! Finit donc les Tooltip, Modal, Carousel, Collapse, Popovers ou autres petites fonctionnalités tout prêtes et sympatiques.

Mais même pour le CSS, c'est un peu déroutant au début. Par exemple, pour les formulaires ou nous sommes habitués aux classes "form-group" ou "input-group". Avec Trucss, nada ! Vous devez tout (re)coder !

Autrement dit, si vous souhaitez faire un site "complexe", sans trop coder, ce framework n'est pas fait pour vous.

Néanmoins, Trucss à de gros avantages : 

1. Très léger

Très léger (seulement 5,8 ko non compressé et 3,9 ko compressé avec CSSMinifier.com !), Trucss vous permettra d'obtenir de bonnes performances pour votre site, à la fois pour les internautes, mais aussi pour votre référencement (et encore plus avec la mise à Google Speed Update qui arrive en Juillet 2018)

2. Simple mais efficace

Très basic et dépourvu de fonctionnalités surperflues, Trucss vous permettra de créer votre propre base de travail.

2.1 Grille

Il utilise un système de grille sur 12 colonnes. Comme Bootstrap, vous utilisez les classes "row" et "col-X" pour créer votre grille.

2.2 Typographie

Les titres Hn sont optimisés ainsi que les balises Hn (du H1 au H6). Les classes "standards" sont présentes telles que .text-left, .text-center, .bold, .italic

2.3 Boutons

Une seule classe est présente pour le bouton : .button

Facile non ?

2.4 Alertes

Cinq couleurs d'alertes sont présentes sur Trucss : .alert, .alert-success, .alert-warning, .alert-danger, .alert-info

2.5 Formulaires

RAS. Mais manque un peu de fun.

2.6 Tableaux

Deux classes pour différencier le haut du tableau

2.7 Listes

Un liste à puces verticale standard et une classe pour une liste à puces horizontale (class .list-inline)

2.8 BONUS 

Trucss vous a réservé une petite fantaisie. Un système de Bagdes / Tags colorés (classes CSS .tag, .tag-success, .tag-warning, .tag-danger ou .tag-info

Et quelques autres classes CSS que je vous laisse découvrir tout de suite en vous rendant sur le site officiel de Trucss !

Lien vers le site officiel : https://trucss.shost.ca/

Poids du fichier CSS compressé avec CSSMinifier.com : 3,9 ko

Poids du fichier CSS non compressé : 5,8 ko

Version du framework Trucss : inconnue