• @cy_altern
    cy_altern CC BY-SA
    1
    @tofulm
    1

    GitHub - unocss/unocss : The instant on-demand atomic CSS engine.
    ▻https://github.com/unocss/unocss#scanning

    Un générateur de styles CSS « atomiques » pour construire son framework CSS : les style sont générés à partir d’un ensemble configurable d’éléments ("presets") : reset, typo, icones, animations...
    Les classes sont générés à la demande = si elles sont utilisées dans le code (HTML, JS...) du projet.

    Présentation du concept et des principes de fonctionnement : ▻https://antfu.me/posts/reimagine-atomic-css

    UnoCSS is an atomic-CSS engine instead of a framework. Everything is designed with flexibility and performance in mind. There are no core utilities in UnoCSS, all functionalities are provided via presets.
    [...]
    The main goals of UnoCSS are intuitiveness and customization. It allows you to define your own utilities literally in seconds.

    Livré avec un ensemble de presets « officiels » (tirés de Tailwind ou Bootstrap entre autre) + contributions disponible sur ▻https://github.com/unocss/unocss#community-presets
    Inclus de nombreux utilitaires (shortcuts, themes...) et outils complémentaires (scanner, inspecteur...)

    Documentation des classes générées par les presets « officiels » : ▻https://uno.antfu.me

    Sur le concept de CSS atomique voir : ▻https://css-tricks.com/lets-define-exactly-atomic-css

    #atomique #CSS #unocss #tailwind

    cy_altern CC BY-SA
    • @rastapopoulos
      RastaPopoulos CC BY-NC

      J’ai vraiment du mal à comprendre cette mode (plutôt très récente) du CSS atomique. Quand je vois 99% des exemples ça fait exactement ce que le CSS a permis de rejeter depuis 20 ans, cad la présentation dans le HTML : <center> <blink> <table> de présentation avec toutes les marges en dur dans le code, etc. Tout ce qui a été honnis (avec raison !) pendant des années.

      <div h-full text-center flex select-none all:transition-400>
       <div ma>
         <div text-5xl fw100 animate-bounce-alt animate-count-infinite animate-duration-1s>
           unocss
         </div>
         <div op30 text-lg fw300 m1>
           The instant on-demand Atomic CSS engine.
         </div>
         <div m2 flex justify-center text-2xl op30 hover="op80">
           <a
             i-carbon-logo-github
             text-inherit
             href="https://github.com/unocss/unocss"
             target="_blank"
           ></a>
         </div>
       </div>
      </div>
      <div absolute bottom-5 right-0 left-0 text-center op30 fw300>
       on-demand · instant · fully customizable
      </div>
      RastaPopoulos CC BY-NC
    Écrire un commentaire