Posté le 26/01/2024 | 32 commentaires dans Développement CSS | Retour à la liste
Table des matières
Table des matières
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 mesis-whiteenis-black, soit je modifie la couleur des boutons blancs. Je me retrouve donc avec des boutonsis-whitequi 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.
Commentaires
Сайт предлагает широкий выбор лизинговых продуктов для бизнеса, включая лизинг оборудования. Благодаря этому, компании могут получить доступ https://www.ehkn.net/index.php?mid=image1&document_srl=41198
http://biprof.ru/
DID предоставляет номера с кодами более чем 150 стран. Это позволяет выбрать номер, соответствующий вашему текущему местоположению или бизнес-целям купить номер навсегда
Это лучшие продукты и слоты, которые заслужили свое место в топе. Ссылки на вход с их официальных сайтов с телефона или компьютера — в нашем канале лучшие казино для мобильных устройств с быстрым выводом
Виртуальный номер создаёт впечатление солидности и профессионализма. Клиенты и партнёры воспринимают компании с городскими или бесплатными номерами (например, формата 800) как надёжные и серьёзные организации купить виртуальный номер телефона
Это лучшие продукты и слоты, которые заслужили свое место в топе. Ссылки на вход с их официальных сайтов с телефона или компьютера — в нашем канале лучшие казино с лицензией на деньги
Boost your content revenue with Scrile Connect. Our white-label platform is an alternative to OnlyFans, offering custom onlyfans tools how to expand photography business
Нужен по настоящему красивый номер, но нет большой суммы для разового платежа? Подключите номер и просто вносите ежемесячную плату за использование купить номер телефона навсегда
У нас вы найдете все, что нужно: от недвижимости и автомобилей до работы и уникальных услуг! Estul — это платформа, где ваш запрос станет важным предложением https://www.nn.ru/user.php?user_id=1471790
Le code promo 1xBet valide: BONUS1X200 – recevez un bonus de bienvenue de 100% jusqu'a 130€ en utilisant ce code code promo 1xbet abidjan lors de votre inscription sur le site 1xBet https://oeclub.org/index.php/Code_promo_1xbet
prohoster
The story of the Hebrews, the descendants of Abraham, is a tapestry of miracles, trials, triumphs, and divine promises that have withstood the test of time how to download reddit videos iphone
Подбираете онлайн игру? Представленный свежий обзор поможет! Мы выбрали лучшие предложения разных категорий: шутеры, стратегии, RPG а простые игры.
Узнайте про новых релизах а испытанных популярных играх. Сравните характеристики, посмотрите скриншоты а прочитайте наши честные отзывы https://telegra.ph/Obzor-luchshih-kartochnyh-igr-v-onlajn-kazino-03-11
Отыщите проект, который увлечет именно тебя! Читайте детальный обзор онлайн игр на Telegraf!
Выбирайте платформер с разнообразием уровней и механик. Игры, предлагающие уникальные задачи и элементы, удерживают интерес. Обратите внимание на истории и персонажей – хорошая нарративная составляющая усиливает вовлеченность http://www.nfgroup.it/forum/street-ving-tsun-system/68869
Выбирайте платформер с разнообразием уровней и механик. Игры, предлагающие уникальные задачи и элементы, удерживают интерес. Обратите внимание на истории и персонажей – хорошая нарративная составляющая усиливает вовлеченность https://loont.com/index.php?title=%20%D0%98%D0%B4%D0%B5%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5%20JRPG%20%D0%B4%D0%BB%D1%8F%20%D0%BA%D0%BE%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D0%BE%D0%B3%D0%BE%20%D0%BF%D1%80%D0%BE%D1%85%D0%BE%D0%B6%D0%B4%D0%B5%D0%BD%D0%B8%D1%8F:%20%D1%87%D1%82%D0%BE%20%D0%BA%D1%83%D0%BF%D0%B8%D1%82%D1%8C%20%D1%81%20%D0%B4%D1%80%D1%83%D0%B7%D1%8C%D1%8F%D0%BC%D0%B8
Волгоград в вашем мобильном!
Измотаны от фальшивок и ложной данных? Желаете принимать верифицированные и важные сообщения непосредственно в Telegram?
Подписывайтесь к канал "Новости Волгограда"!
Тут тебя встречают: https://telegra.ph/Novosti-dlya-biznesa-v-Volgograde-Telegram-kanal-03-11-2
Только подтвержденные сведения и быстрые изменения
Детальные обзоры с районов событий
Уникальные разговоры с увлекательными людьми
Снимки и записи из бытия населенного пункта
Вероятность поставить вопрос и иметь реакцию от редакции
Не пропустите ничего значимого! Оставайтесь в осведомлены существования Волгограда!
Спасибо за то, что помогли списать долги по ЖКХ по закону. Все было сделано профессионально и в кратчайшие сроки. Теперь я могу жить без долгов и стресса. Рекомендую!
Используя наш AI генератор текста, вы можете легко и быстро создавать материал по различным темам. ИИ дает возможность генерировать уникальный и информативный текст https://vc.ru/ai/1846548-napisat-tekst-s-pomoshyu-neiroseti-onlain-top-7-luchshih-ii-v-2025-godu
В нашем салоне можно продать новые модели швейцарских часов, в таком случае сумма выплаты будет более привлекательная. Гарантируем быструю возможность купить в каталоге или продать за 1 день оценка часов
prohoster Prohoster
Pегистрация у операторов связи. Некоторые операторы связи также предоставляют возможность зарегистрировать виртуальный номер в своей сети https://dividend-center.com/novosti/virtualnyj-nomer-vsegda-na-svyazi-bez-ogranichenij.html
Если вы хотите продать свои часы, лучше всего обратиться в специализированные компании, которые занимаются выкупом часов http://kemsrr.forumex.ru/viewtopic.php?f=16&t=5273
Букмекерская контора и онлайн-казино Mostbet приветствует вас на официальном сайте своего бесплатного приложения для Android телефонов. Здесь вы можете скачать https://jetairlines.kz/
Если вы хотите продать свои часы, лучше всего обратиться в специализированные компании, которые занимаются выкупом часов http://www.asystechnik.com/index.php?title=%20%D0%9A%D0%B0%D0%BA%20%D0%BF%D1%80%D0%BE%D0%B4%D0%B0%D1%82%D1%8C%20%D1%87%D0%B0%D1%81%D1%8B:%20%D1%88%D0%B0%D0%B3%20%D0%B7%D0%B0%20%D1%88%D0%B0%D0%B3%D0%BE%D0%BC
Букмекерская контора и онлайн-казино Mostbet приветствует вас на официальном сайте своего бесплатного приложения для Android телефонов. Здесь вы можете скачать https://jetairlines.kz/
Хватит довольствоваться малым! Пришло время раскрыть весь свой потенциал и сорвать крупный куш!
“Топ Рейтинг Казино” в Telegram – это твой детонатор к взрывным выигрышам!
Мы не просто рассказываем о казино, мы даем тебе инструменты для победы:
Разбор полетов каждого казино: От А до Я! Мы изучаем все аспекты, от лицензии и безопасности до RTP слотов и лимитов на вывод средств. Никаких сюрпризов! Секретные коды к бонусам: Получи доступ к эксклюзивным промокодам и фриспинам, которые увеличат твой банкролл с первого дня! Аналитика и стратегии от профи: Узнай, как играть умно и повысить свои шансы на успех! Мы делимся проверенными стратегиями, которые работают! Общение с единомышленниками: Делись опытом, задавай вопросы и получай советы от других игроков в нашем дружном сообществе!
Прекрати терять деньги на сомнительных платформах! Присоединяйся к “Топ Рейтинг Казино” и начни играть как профессионал!
https://telegra.ph/Raskruchivaem-vash-veb-proekt-v-top-Google-za-nedelyu-klyuch-k-uspehu-v-gembling-strategii-03-15
Почему тебе стоит подписаться?
Экономия времени и денег: Мы уже сделали всю работу за тебя! Не нужно тратить часы на поиски и сравнения.
Максимальная выгода: Получай лучшие бонусы и промокоды, доступные только для наших подписчиков.
Безопасность: Мы рекомендуем только проверенные и надежные казино с лицензией и хорошей репутацией.
Не жди, пока удача постучит в другую дверь! Подписывайся на “Топ Рейтинг Казино” и стань повелителем азарта!
Casino Mostbet успешно объединяет БК и слоты, занимая топовые позиции на рынке много лет. Каталог с игровым софтом на сайте содержит высококачественный контент, включая разнообразные слоты, Live, карточные и настольные развлечения скачать мостбет
Хватит довольствоваться малым! Пришло время раскрыть весь свой потенциал и сорвать крупный куш!
“Топ Рейтинг Казино” в Telegram – это твой детонатор к взрывным выигрышам!
Мы не просто рассказываем о казино, мы даем тебе инструменты для победы:
Разбор полетов каждого казино: От А до Я! Мы изучаем все аспекты, от лицензии и безопасности до RTP слотов и лимитов на вывод средств. Никаких сюрпризов! Секретные коды к бонусам: Получи доступ к эксклюзивным промокодам и фриспинам, которые увеличат твой банкролл с первого дня! Аналитика и стратегии от профи: Узнай, как играть умно и повысить свои шансы на успех! Мы делимся проверенными стратегиями, которые работают! Общение с единомышленниками: Делись опытом, задавай вопросы и получай советы от других игроков в нашем дружном сообществе!
Прекрати терять деньги на сомнительных платформах! Присоединяйся к “Топ Рейтинг Казино” и начни играть как профессионал!
https://telegra.ph/Rejting-TOP-Kazino-vse-dorogi-vedut-k-vyigryshu-03-16-5
Почему тебе стоит подписаться?
Экономия времени и денег: Мы уже сделали всю работу за тебя! Не нужно тратить часы на поиски и сравнения.
Максимальная выгода: Получай лучшие бонусы и промокоды, доступные только для наших подписчиков.
Безопасность: Мы рекомендуем только проверенные и надежные казино с лицензией и хорошей репутацией.
Не жди, пока удача постучит в другую дверь! Подписывайся на “Топ Рейтинг Казино” и стань повелителем азарта!
Хватит довольствоваться малым! Пришло время раскрыть весь свой потенциал и сорвать крупный куш!
“Топ Рейтинг Казино” в Telegram – это твой детонатор к взрывным выигрышам!
Мы не просто рассказываем о казино, мы даем тебе инструменты для победы:
Разбор полетов каждого казино: От А до Я! Мы изучаем все аспекты, от лицензии и безопасности до RTP слотов и лимитов на вывод средств. Никаких сюрпризов! Секретные коды к бонусам: Получи доступ к эксклюзивным промокодам и фриспинам, которые увеличат твой банкролл с первого дня! Аналитика и стратегии от профи: Узнай, как играть умно и повысить свои шансы на успех! Мы делимся проверенными стратегиями, которые работают! Общение с единомышленниками: Делись опытом, задавай вопросы и получай советы от других игроков в нашем дружном сообществе!
Прекрати терять деньги на сомнительных платформах! Присоединяйся к “Топ Рейтинг Казино” и начни играть как профессионал!
https://telegra.ph/Puteshestvie-v-mir-onlajn-kazino-s-Rejting-TOP-Kazino-03-16-4
Почему тебе стоит подписаться?
Экономия времени и денег: Мы уже сделали всю работу за тебя! Не нужно тратить часы на поиски и сравнения.
Максимальная выгода: Получай лучшие бонусы и промокоды, доступные только для наших подписчиков.
Безопасность: Мы рекомендуем только проверенные и надежные казино с лицензией и хорошей репутацией.
Не жди, пока удача постучит в другую дверь! Подписывайся на “Топ Рейтинг Казино” и стань повелителем азарта!
Если вы ищете надежную платформу для спортивных ставок, обратите внимание на 1вин. Этот сервис предлагает широкий выбор спортивных событий и различных рынков, что делает ставку не только интересной, но и прибыльной https://wifidb.science/index.php?title=%20%D0%9F%D1%81%D0%B8%D1%85%D0%BE%D0%BB%D0%BE%D0%B3%D0%B8%D1%8F%20%D0%B1%D0%B5%D1%82%D1%82%D0%B8%D0%BD%D0%B3%D0%B0:%20%D0%9A%D0%B0%D0%BA%20%D0%BD%D0%B5%20%D0%BF%D0%BE%D0%B4%D0%B4%D0%B0%D1%82%D1%8C%D1%81%D1%8F%20%D1%8D%D0%BC%D0%BE%D1%86%D0%B8%D1%8F%D0%BC%20%D0%BD%D0%B0%201win?
Откройте мир азарта с Flagman Casino!
В 2025 году Flagman Casino стало топ-выбором для русскоязычных игроков. Официальный сайт https://t.me/s/f32dfsf23rf6 предлагает лучшие онлайн-слоты, рулетку и игры с живыми дилерами. Играйте на рубли с депозитом от 100 рублей и выводите выигрыши быстро!
Преимущества Flagman Casino:
Лицензионные слоты от Amatic: Book of Fortune, Hot Seven, Wild Stars.
Бонус за регистрацию: 50 FS по промокоду BONCASIN.
Приветственный пакет: 225% + 500 FS на первый депозит.
Еженедельный кэшбэк до 20%.
Как начать играть:
Перейдите на сайт казино.
Зарегистрируйтесь, указав промокод PORTABLE.
Пополните счет и получите бонусы.
Flagman Casino — это честное онлайн-казино с удобным интерфейсом и крупными выигрышами. Присоединяйтесь к лучшей платформе азартных игр 2025 года и испытайте удачу уже сегодня! ??
Откройте мир азарта с Flagman Casino!
В 2025 году Flagman Casino стало топ-выбором для русскоязычных игроков. Официальный сайт https://t.me/s/f32dfsf23rf6 предлагает лучшие онлайн-слоты, рулетку и игры с живыми дилерами. Играйте на рубли с депозитом от 100 рублей и выводите выигрыши быстро!
Преимущества Flagman Casino:
Лицензионные слоты от Amatic: Book of Fortune, Hot Seven, Wild Stars.
Бонус за регистрацию: 50 FS по промокоду BONCASIN.
Приветственный пакет: 225% + 500 FS на первый депозит.
Еженедельный кэшбэк до 20%.
Как начать играть:
Перейдите на сайт казино.
Зарегистрируйтесь, указав промокод PORTABLE.
Пополните счет и получите бонусы.
Flagman Casino — это честное онлайн-казино с удобным интерфейсом и крупными выигрышами. Присоединяйтесь к лучшей платформе азартных игр 2025 года и испытайте удачу уже сегодня! ??