D'autres frameworks css LEGERS...

Histoire de proposer autre-chose que le pachydermique Tailwind, j'ai regardé les frameworks css légers... Petite sélection (les poids sont présentés non gzippés)

je considère que présenter les poids gzippés c est comme montrer les prix HT  c est de l arnaque .jpg


MUICSS

muicss.jpg

Je l'utilise régulièrement, il est simple et ne demande pas un grand temps d'adaptation pour l'utiliser. Le CSS seul pèse 44ko. Si on veut les trucs un peu plus fancy (overlays, modal, selects custom) il faut ajouter un js de 20 ko.

C'est pas indécent et l'aspect, pour être assez épuré et minimaliste, n'en reste pas moins très satisfaisant.

download v0.9.43 - Site web


InvisCSS

inviscss.jpg

Je ne l'ai pas testé mais il me semble qu'il constitue une alternative intéressante à MUICSS: il reste léger avec ses 50ko minifiés et ses 7ko de JS, est graphiquement très proche du rendu de Muicss ou bootstrap et propose plusieurs thèmes de base.

De plus, il dispose d'une panoplie de styles «admin» et je trouve ce concept intéressant.

Comme Muicss, l'ensemble est assez minimaliste ce qui a l'avantage d'être facilement adaptable.

Un détail particulier a attiré mon attention: la philosophie d'InvisCSS est d'éviter la multiplication de classes pour appliquer les styles:


<button class="btn btn-primary">Primary Button</button> // bootstrap
<button class="pure-button pure-button-primary">Primary Button</button> // pureCSS
<button class="primary">Primary Button</button> // InvisCSS

downloads v1.6.6 - Site web


Vanilla CSS

Deux choses ont attiré mon attention: le nom et le fait que c'est réalisé par la Ubuntu Web Team. Le truc semble assez complet et bien foutu même si le style reste assez austère à première vue. La page de démo permet de se faire une idée précise des possibilités qui semblent assez étendues.

Toutefois, impossible d'avoir une évaluation du poids réel du machin car il utilise sass, ce qui me semble un comble pour un framework qui se fait appeler vanilla...

Download v2.4.0 - Site web


Knacss

knacss.jpg

Même s'il s'agit plus d'une «feuille de style RESET survitaminée» il m'a semblé intéressant de le placer ici.

KNACSS prend en charge les styles de base, mais également la typographie, les modèles de boîte, les alignements et positionnements d’éléments, les grilles de mise en page, dans l’esprit d’être adapté à toutes les tailles d’écran (responsive). Le tout automatiquement, en l'appliquant simplement sur votre structure HTML.

Le style est assez basique mais très fonctionnel et sa simplicité permet là encore de le customiser facilement, le tout pour 37ko. Si vous avez besoins des onglets, il faudra ajouter 4.5ko de js.

Download - Site web


Milligram

milligram.jpg

Avec un poids de 8.72 ko, c'est une feuille de styles vraiment légère. L'ensemble paraît minimaliste mais cohérent et propre comme le montre la page du projet

Download v1.3.0 - Site web


Beauter

beauter2.jpg

beauter.jpg

Avec son style coloré, beauter sort un peu de l'austérité des précédents frameworks. Côté poids, le css pèse 25.5ko et le js se contente d'un modeste 1.8ko. Il mérite donc d'être testé

A tester donc. Download - Site web


Lit

lit.jpg

Un vrai poids plume pour la base (838 octets !) auxquels on peut ajouter 2.2 ko pour les «utils» afin que lit devienne plus qu'une feuille reset. 3ko, c'est pas mal.

Le style est très coloré avec des contrastes de couleur peut-être un peu violents; les éléments de base sont présents, sans effets fancy, ce qui est normal pour un poids aussi réduit. Je vois bien ce framework pour une appli destinée aux plus jeunes.

Download - Site web


Conclusion

Il y en a encore beaucoup mais ils se limitent souvent à une standardisation/reset de styles ou alors ils sont très moches...

  oui lemonCss je parle de toi  .jpg

Pour la plupart, ils n'atteignent pas les fonctionnalités des poids-lourds du genre, et c'est normal: ce n'est pas ce qu'on attend d'eux... Si vous utilisez 10% d'un bootstrap autant utiliser autre chose. Ces frameworks me semble suffisants pour la plupart des productions persos.

6 Balises HTML5 intéressantes

Je me suis aperçu récemment de l'existence de la balise details et je me suis dit que je pourrais me noter celles qui me feraient de l'usage dans un éventuel avenir.

<details>

L'élément HTML details sert à créer une ligne de résumé permettant de révéler plus d'informations sur un clic.

L'attribut [open] permet de styler l'ensemble lorsqu'il est ouvert.


<style>
    details{font-style:italic;cursor:pointer}
    details:after summary{content:"▶"}
    details[open]:after summary{content:"▼"}
    details p{margin-left: 25px}
</style>
<details>
  <summary>Ligne de résumé.</summary>
  <p>Tout plein de détails extrêmement intéressants pour ceux qui veulent mais inutiles pour les autres...</p>
</details>
Ligne de résumé.

Tout plein de détails extrêmement intéressants pour ceux qui veulent mais inutiles pour les autres...

en savoir plus - compatibilité 92% et pas sur edge

<dialog>

Crée une boîte de dialogue dans laquelle on peut mettre ce que l'on veut. L'attribut open contrôle l'ouverture et la fermeture

en savoir plus - compatibilité 75%, c'est peu...

<data>

La balise data permet d'ajouter une valeur interprétable par une machine à une valeur lisible par un humain: plus simplement, on peut relier le nom d'un produit à son ID dans la base de données par exemple.

<p>New Products:</p>
<ul>
    <li><data value="398">Mini Ketchup</data></li>
    <li><data value="399">Jumbo Ketchup</data></li>
    <li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>

en savoir plus - compatibilité 99%

<base>

Fournit l'url de base et le target pour tous les liens relatifs de la page. en savoir plus - compatibilité 98%

<meter>

Crée une jolie jauge dont on définit le remplissage afin de représenter visuellement une proportion. Elle utilise les mêmes attributs qu'input number (min, max, value) et y ajoute high, low et optimum qui définissent respectivement à partir de quel nombre la valeur est haute ou basse ainsi que la valeur considérée comme optimale.

Il faudra prévoir l'affichage de la valeur courante (et cette balise n'accepte pas les pseudo-éléments before et after)


<meter value="2" min="0" max="10" low="2">2 out of 10</meter>
meter value="0.6">60%
2 out of 10 60%

en savoir plus - compatibilité 95%

<progress>

Comme meter, progress crée une... barre de progression. Elle utilise les attribut max et value.

Il faudra prévoir l'affichage de la valeur courante (et cette balise n'accepte pas non plus les pseudo-éléments before et after)


<progress value="2" min="0" max="10" low="2">2 out of 10</progress>
progress value="0.6">60%
2 out of 10 60%

en savoir plus - compatibilité 98%

image
Fil RSS des articles