PicoCSS : Un framework CSS pour les amoureux de la sémantique HTML

PicoCSS : Un framework CSS pour les amoureux de la sémantique HTML

Posté le 26/01/2024 | 23 commentaires dans Développement CSS | Retour à la liste

Table des matières

    1. Think different
    2. Pas de classe
    3. Mise en place
    4. Simplicité, légèreté et efficacité
    5. L'outil idéal ?

Aujourd'hui je voulais vous parler d'un petit framework CSS, PicoCSS.

Si je l'aime bien, celui-là, c'est parce qu'il n'utilise pas ou extrêmement peu de classes. Il est léger, sous license MIT, et si on connait Sass, assez facile à modifier.

Think different

Alors non, d'habitude, je n'aime vraiment pas ces bêtes là. Noms de classes à rallonge dans le genre Bootstrap et autres usines à gaz.
Ce que je leur reproche, c'est que le nom des classes utilisées définissent l'aspect du conteneur, genre :

<button class="button is-white">White</button>
<button class="button is-light">Light</button>
<button class="button is-dark">Dark</button>
<button class="button is-black">Black</button>
<button class="button is-text">Text</button>
<button class="button is-ghost">Ghost</button>

Vous avez compris le principe.

Ici on a 2 problèmes :

  • is-white : Ici, on définit la couleur du bouton grâce à une classe, et pas à son contexte. Le problème c'est que si je construis une page sur fond noir, j'aurai tendance à utiliser ces boutons blancs. Si un jour me prend l'envie de balancer mon fond sombre et de passer en clair, soit je modifie mes is-white en is-black, soit je modifie la couleur des boutons blancs. Je me retrouve donc avec des boutons is-white qui sont noirs.
  • <button class="button" : Y'a rien qui choque là ? Il faut définir un bouton comme un bouton, et un input comme un input ? Qui est tenté par faire un <button class="div"> ? Les frameworks n'utilisent pas la sémantique HTML, et c'est un problème qui peut être simplifié.

Pas de classe

PicoCSS revendique n'utiliser presque aucune classe. Presque, car le système de grilles en a besoin, mais une version classless existe également.
Sa force à lui, c'est d'utiliser la sémantique. Pour styliser un bouton, il n'y a aucune classe à ajouter, seule la sémantique suffit :

<button>Texte</button>

Si vous voulez donner un style de bouton à un lien, toujours pas de classe, on utilise ce qui est disponible en HTML5 :

<a role="button">Lien bouton</a>

Et je peux vous garantir que ça fait la différence.
Sur une page simple, avec uniquement des tags HTML, le fait d'inclure le fichier css de Pico change toute la page :

<section id="preview">
    <h2>Preview</h2>
    <p>
        Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla
        iaculis eros a elit pharetra egestas.
    </p>
    <form>
        <input type="text" name="firstname" placeholder="First name" aria-label="First name" required />
        <input type="email" name="email" placeholder="Email address" aria-label="Email address" required />
        <fieldset>
            <label for="terms">
                <input type="checkbox" role="switch" id="terms" name="terms" />
                I agree to the <a href="#" onclick="event.preventDefault()">Privacy Policy</a>
            </label>
        </fieldset>
        <button type="submit">Subscribe</button>
    </form>
</section>

Le rendu sans CSS :

Le rendu avec Pico, simplement en ajoutant la feuille de styles :

Simple et efficace non ?

Il vous laisse le soin d'ajouter vos propres classes. Par exemple, pour un bouton, on peut imaginer un button.error, que vous mettrez en rouge.

Mise en place

Si vous êtes plutôt du genre à tout héberger chez vous, vous pouvez récupérer les fichiers CSS compilés, et le mettre dans l'entête de votre site :

<link rel="stylesheet" href="css/pico.min.css">

Si vous êtes plus fainéants, il y a toujours la solution du CDN (par jsDelivr) :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">

Sinon, il est également disponible via npm et composer.

Simplicité, légèreté et efficacité

PicoCSS ne pèse que 10ko. Si l'on compare ça aux mastodontes, ça en fait un concurrent très léger.
Pour autant, ce framework CSS n'est pas en reste sur pas mal de points :

  • Mode clair / sombre
  • Complètement responsive (taille du texte incluse)
  • Conteneurs fluides
  • Système de grilles
  • ...

Je vous laisse lire la documentation de PicoCSS pour découvrir tout ça. Un générateur de thème simple est également présent, qui vous permettra de choisir la couleur dominante de votre site, si n'êtes pas fan du bleu ;)

A l'heure actuelle, une v2 est en préparation (la v2RC3 est déjà sortie). D'après les sources, les dévs restent dans le même esprit, à savoir la simplicité.

L'outil idéal ?

Alors non, bien sûr. Même si je n'en ai fait que des éloges, PicoCSS n'est pas la réponse à tout, et ne gère pas tout.

Si vous n'êtes pas à l'aise avec Sass, la modification du CSS sera tout simplement longue et barbante.
De plus, il n'y a pas de Javascript. Aussi, oubliez les menus dynamiques ou les animations trop hypes, mais pour un petit blog, un site léger, c'est l'outil parfait.

Max Koder
Max Koder

Développeur en mauvaise herbe, électronicien et bricoleur à mes heures de hobby perdues, compteur de grains de riz, tenteur de tiramisu, mais surtout papa.

Principal développeur de 299Ko, j'essaye de maintenir ce CMS qui me tient à coeur.

Commentaires

  • WillieLiary | 01/05/2024

    We bieden tijdelijke telefoonnummers in tientallen landen over de hele wereld, met duizenden nummers om uit te kiezen telegram telefoonnummer

  • Richardnit | 01/05/2024

    Wanneer krijg ik een tijdelijk nummer? Als je met nummerbehoud overstapt naar Odido, krijg je van ons een tijdelijk Odido telefoonnummer bij je nieuwe simkaart https://archertcjs52064.ziblogs.com/26884735/de-magie-van-telegram-zonder-nummer

  • RobertAcugs | 02/05/2024

    Изготавливаем столешницы, подоконники, барные стойки и другую мебель из акрилового камня и кварцевого агломерата под заказ по выгодной цене в Москве Столешницы из искусственного камня

  • StevenLoX | 02/05/2024

    Шикарные идеи для Вашего дизайна по ссылке. Трендовые новинки дизайна интерьера. Оцени самые новые идеи дизайна интерьера из Италии https://battle-art.ru/news-440-ot-klassiki-do-sovremennosti-raznoobrazie-stilej-i-kollektsij-italyanskoj-mebeli-dlya-sozdaniya-unik.html

  • ArthurElato | 02/05/2024

    Наш дайвинг клуб осуществляет обучение дайвингу от новичка до профессионала. Мы организуем пробные погружения с аквалангом в бассейнах Москвы и открытых водоемах Подмосковья. Кроме этого, в нашем дайв-клубе Вы можете приобрести подарочные сертификат на любой курс дайвинга или пробное погружение занятия дайвингом

  • KeithPeeme | 03/05/2024

    Hello,

    PRIVATE MP3 FTP SERVER 0-DAY Access https://0daymusic.org

    SOME DETAILS ON PREMIUM ACCOUNT:
    * Reseller payment method:AltCoins, Webmoney, Perfect Money.
    * Choose payment method: BitCoin, Bank wire, Western Union.
    * Server's capacity: 347 TB MP3, FLAC, LIVESETS, Music Videos.
    * Support: FTP, FTPS (File Transfer Protocol Secure), SFTP and HTTP, HTTPS.
    * Account delivery time: 1 to 48 hours.
    * More 15 years Of Archives.
    * Overal server's speed: 1 Gb/s.
    * Easy to use: Most of genres are sorted by days.

  • Sownxvc | 03/05/2024

    Любовь к сайту -- чрезвычайно индивидуально дружелюбно и много, чтобы увидеть!
    взгляните также мою страничку и дайте ей оценку

    http://0522224528.ussoft.kr/g5-5.0.13/bbs/board.php?bo_table=board01&wr_id=774683 брауни с орехи
    http://medienraeume.de:80/index.php?title=Benutzer:KermitCroft9029 дерматолог в софия
    https://wiki.smpmaarifimogiri.sch.id/artikel/%D0%9F%D0%B5%D1%80%D0%B0%D0%BB%D0%BD%D1%8F_%D0%97%D0%B0_%D0%92%D0%B3%D1%80%D0%B0%D0%B6%D0%B4%D0%B0%D0%BD%D0%B5_BOSCH_WIW28542EU перални за вграждане цени
    https://kcapa.net/bbs/board.php?bo_table=free&wr_id=1165433 почивки в римини през 2024

    =0090=0=

  • JamieHunda | 03/05/2024

    A year on from Qatar 2022, what’s the legacy of a World Cup like no other?
    блэкспрут
    The 2022 World Cup final will go down as one of the most exciting, dramatic and memorable matches in the history of the game.

    It was the scene of Lionel Messi’s greatest moment on a soccer pitch, in which he cemented his legacy as the best player of his generation after finally guiding Argentina to World Cup glory.

    It was, for many, the perfect, fairytale ending to a tournament which thrilled well over a billion fans around the world. So good, perhaps, that many forgot it bookended the most controversial World Cup in history.
    https://blacksprut-darkmarket.info
    спрут
    Rewind to the start of the tournament and the talk was all about matters off the field: from workers’ rights to the treatment of the LGBTQ+ community.

    Just hours before the opening match, FIFA President Gianni Infantino launched into a near hour-long tirade to hundreds of journalists at a press conference in Doha, where he accused Western critics of hypocrisy and racism.

    “Reform and change takes time. It took hundreds of years in our countries in Europe. It takes time everywhere, the only way to get results is by engaging ] not by shouting,” said Infantino.

    At one point, the FIFA president challenged the room of journalists, stressing FIFA will protect the legacy for migrant workers that it set out with the Qatar authorities.

    “I’ll be back, we’ll be here to check, don’t worry, because you will be gone,” he said.

    So, a year on from the World Cup final, what is the legacy of the 2022 World Cup?

  • DouglasHoirl | 03/05/2024

    Стоимость обучения на курсе английского для начинающих онлайн в 1,3-2,5 раза ниже стоимости группового обучения на языковых курсах, где ориентируются на группу, а не ваши индивидуальные потребности курс английского для начинающих онлайн

  • Jamesbopit | 04/05/2024

    Пластическая хирургия — увеличение груди имплантами, подтяжка груди, уменьшение груди. Абдоминопластика — пластика по уменьшению живота, липосакция и липофилинг https:// mammosurgery.ru

  • Jamesclase | 04/05/2024

    В этой подборке онлайн-курсов по английскому языку мы сравнили предложения школ по нескольким параметрам и отобрали лучшие варианты для взрослых и детей, начинающих познание языка или повышающих свой уровень курс английского онлайн для начинающих

  • Sownanh | 06/05/2024

    Hello my friend! I want to say that this post is amazing, great written and come with approximately all significant infos. I'd like to peer extra posts like this .
    посмотрите также эту страничку и дайте ей оценку
    https://academy.theunemployedceo.org/forums/users/lelandhunley/ тайланд екскурзия
    https://www.kino-ussr.ru/user/LynwoodMarlow80/ забележителности краби
    https://giarib596337.loseblog.com/%d0%bf%d0%be%d0%b4%d1%80%d0%be%d0%b1%d0%bd%d0%be-%d1%80%d1%8a%d0%ba%d0%be%d0%b2%d0%be%d0%b4%d1%81%d1%82%d0%b2%d0%be-%d0%b7%d0%b0-%d0%bf%d1%8a%d1%82%d1%83%d0%b2%d0%b0%d0%bd%d0%b5-%d0%be%d1%82-%d0%b1/ патая тайланд валута
    https://academy.theunemployedceo.org/forums/users/garryk785231/ самолетни билети пукет
    https://anotepad.com/note/read/qb5n5ryb закинтос забележителности
    https://anotepad.com/note/read/hk3fxte6 детски рокли 7 години бледо синя

    (9960de)

  • AndrewMePsy | 06/05/2024

    Denver Cleaning Choice is a woman owned local business with more than 20 years experience in commercial cleaning services commercial janitorial service denver co

  • DavidOvara | 09/05/2024

    Наши преподаватели и имеют богатый опыт обучения таким направлениям танца, как аргентинское танго, бачата, контемпорари, k-pop, Hight Heels, шафл. Обучаем танцу как детей, так и взрослых мастер класс бачата для начинающих москва

  • RobertDauff | 09/05/2024

    The simplest way to use Jaxx Lightweight Web Wallet Jaxxify jaxx web wallet

  • Masongurge | 13/05/2024

    Профессиональный Ремонт компьютеров с гарантией, в городе Воркута по низким ценам ремонт телефонов Воркута

  • Mike Young | 13/05/2024

    Hi there,

    My name is Mike from Monkey Digital,

    Allow me to present to you a lifetime revenue opportunity of 35%
    That's right, you can earn 35% of every order made by your affiliate for life.

    Simply register with us, generate your affiliate links, and incorporate them on your website, and you are done. It takes only 5 minutes to set up everything, and the payouts are sent each month.

    Click here to enroll with us today:
    https://www.monkeydigital.org/affiliate-dashboard/

    Think about it,
    Every website owner requires the use of search engine optimization (SEO) for their website. This endeavor holds significant potential for both parties involved.

    Thanks and regards
    Mike Young

    Monkey Digital

  • Ronaldcah | 14/05/2024

    Что бы выяснить более точно сколько стоит пластиковое окно мы рекомендуем воспользоваться бесплатной услугой вызова замерщика. Привезём образцы. Сделаем расчёт в 3-х вариантах пластиковое окно сколько стоит

  • IrvinSters | 16/05/2024

    Телесериал «911 служба спасения» про доблестных и храбрых спасателей, служба которых тяжелая и несет опасность с каждым вызовом. Герои службы 911 все смелые и храбрые в каждой серии сериала спасают жизни людям. Все персонажи сериала разные по характеру, но это не мешает им дружить и работать слаженной командой 911 смотреть онлайн

  • Mike Mason | 16/05/2024

    This service is perfect for boosting your local business' visibility on the map in a specific location.

    We provide Google Maps listing management, optimization, and promotion services that cover everything needed to rank in the Google 3-Pack.

    More info:
    https://www.speed-seo.net/ranking-in-the-maps-means-sales/


    Thanks and Regards
    Mike Mason


    PS: Want a ONE-TIME comprehensive local plan that covers everything?
    https://www.speed-seo.net/product/local-seo-bundle/

  • KeithSoync | 16/05/2024

    Бронирование билетов на автобус Дебальцево - Ростов онлайн без предоплат. Актуальное расписание и цены на рейсы автобус ростов-на-дону енакиево

  • RusselKaf | 17/05/2024

    Нефтегазовое и нефтехимическое оборудование. Данное оборудование используется для разведки газовых и нефтяных месторождений, переработки нефти и природных горючих газов. При его разработке специалисты К5 моделируют все характеристики технологического процесса с помощью программного обеспечения, что гарантирует качество и простоту эксплуатации поставляемых изделий Производство и продажа нефтегазового и нефтехимического оборудования (емкостное и теплообменное оборудование)

  • Franksatty | 17/05/2024

    Простыми словами о том, что нужно знать прежде, чем заказать свидание на крыше ужин на крыше

Ajouter un commentaire